Channels ▼
RSS

Tools

Developing in HTML5: The What and How


We are in the midst of a generational change to the Web platform. HTML5 is the shorthand term often used to describe this change, although the new technologies driving this transformation are not limited to the features defined in the HTML5 specification.

I use the phrase "Web platform" to refer to the broad set of protocols, formats, and APIs that are natively supported in Web browsers. Developers use these features to build stylish applications that support social interaction and take full advantage of device capabilities such as cameras, microphones, and GPS. HTTP, TLS, and WebSockets are some of the protocols that are part of the Web platform; and HTML, CSS, SVG, and JavaScript are examples of some formats. APIs include the Geolocation API and the 2D drawing API for the <canvas> element, among others.

Ultimately, a feature becomes part of the platform once it is broadly implemented and developers use it regularly to deliver a consistent user experience. The World Wide Web Consortium (W3C) plays a role in achieving consistent interoperability by bringing a range of stakeholders to the table, developing standards that can be implemented without royalties, and creating supporting materials such as test suites and validators.

A standard represents a shared agreement and is very useful as such. But the Web platform consists of a great many technologies at different levels of maturity, not all of which are uniformly standardized. Practical questions arise when leading-edge developers start to use them, including:

  • How do I minimize the amount of special-case code?
  • What features are stable enough for me to use now?
  • How do I reach users that do not have modern browsers?

The answers change over time, so developers have devised practical solutions such as fallbacks and "polyfills" (which will be further explained later). These can make content useable in both older browsers and in the latest browsers. In this article, rather than focus on the state of HTML5 standardization, I explore some resources that can help developers start using Open Web Platform technology today. These resources provide the "what and how" for using HTML5 now, complement the standards, and ultimately help accelerate deployment.

platform.html5.org

How does a busy developer keep up with current feature support, and which fallbacks and polyfills (if any) are available? I put together a site, platform.html5.org, that acts as a dashboard for keeping you up-to-date about the set of technologies that constitute the Web platform. (It's backed by a github repository, and I encourage you to help maintain it by sending pull requests with proposed updates.)

The site groups technologies into categories such as graphics and typography, media, and storage. Icons on the site indicate the level of maturity of each feature. A green flag indicates that a feature is ready to use. A yellow lighting bolt means "use with caution." However, these are minimal indicators; to get a true picture of the readiness of a feature, you need to follow the helpful links that are provided. Each technology links to the specification that defines it as well as other helpful links to sites such as:

The HTML5 Please site, in particular, is worthy of further comment. It was created by the H5BP developer collective (the same group of developers behind HTML5 Boilerplate). It lists features by name and provides a quick way to get a high-level overview of the maturity of each feature. It shows an expandable panel with status information (use/caution/avoid). The "caution" and "use" keywords are in some cases further qualified with the phrases "with fallback" or "with polyfill." In the cases where "with fallback" appears, you can expand the feature for that panel to view information about exactly how to provide fallback for that feature.

A polyfill is a piece of JavaScript code that acts as a kind of shim for a feature; that is, it mimics a future API providing fallback functionality to older browsers.

The site operators for HTML5 Please make it easy for anyone to contribute by providing an "Edit this info" link in each panel, enabling you to create a copy of its contents, which you can then submit back to the site. (The mechanism is backed by a github repository and your contributions are sent as pull requests for that repo.) The maintainers review and merge contributions.

Sometimes you'll want more detailed status information than what HTML5 Please provides. For example, you might want to know exactly which browsers support a particular feature, and which versions of each browser support it, or what level of support it currently has in mobile browsers, and which OS versions of those browsers. In those cases, the site you'll want to turn to for that information is When Can I Use...

When Can I Use is maintained by Alexis Deveria. He follows the readiness status of a large set of features and updates the site as new versions of browsers are released. And if there is a feature you want to know about, but that is not yet listed on When Can I Use, you can contribute feature suggestions.

Each feature currently tracked at When Can I Use has a table with a column for each major desktop browser (IE, Firefox, Chrome, Safari, and Opera); for each major mobile browser (iOS Safari, Opera Mini, Opera Mobile, and the Android Browser); and rows with version numbers for each browser. As in other sites, color codes indicate the level of support for a feature in each particular browser version (support/partial, support/no, support/unknown).

For example, consider support as of today for CSS Counters. A table full of green entries makes clear that the feature is well supported. Other features that are not well supported are shown with red highlights.

Each feature table at When Can I Use provides "see-also" links to tables for related features, as well as links to third-party sites that provide how-to information about actually developing content with that feature.

MDN (the Mozilla Developer Network) is one of the sites that both platform.html5.org and When Can I Use link to. Think of MDN as a "how can I use" feature guide. If, for example, you want to implement Web Workers, and need code examples and links to resources with detailed information, MDN has a page on using Web Workers that's a great place to get started.

As with HTML5 Please, When Can I Use, and platform.html5.org, MDN welcomes contributions and actually makes contributing even quicker and easier than the other sites do: The entire site is a wiki, so once you create an account there, you can edit any page.

Test Suites

There is no better means to evaluate the maturity of a particular feature than to have a complete test suite for that feature, run the test cases for it yourself, and analyze the results. There is no single central repository for all test suites for the Web platform, and no single place to view the results for all of them, but the W3C has started work on a shared test framework site and the W3C CSS Working Group has a CSS-specific test framework site.

These sites allow you to view per-browser and per-browser-version results for a number of test suites. You can also run the test cases in your own browser and submit your results to be integrated back into the framework results database. See, for example, the results data for the CSS Multi-column Layout Module test suite, or the start page that allows you to run the test suite in your own browser.

Conclusion

The aforementioned sites can help you stay current on the emerging Web platform. I expect even more helpful sites to appear as the platform continues to mature and as people share their code and their experience. I encourage you to use the sites I've mentioned here, and to consider contributing updates to them so you can help ensure that quality, up-to-date information about the Web platform is available to us all.


Mike Smith works on W3C core specifications for browser technologies. He previously worked for Opera Software.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video