Garçon Un HTML5

canvas is definitely good to go for modern browsers. If you want to support Internet Explorer 8 and below, ExplorerCanvas and FlashCanvas can be helpful in providing support for most canvas features. However, due to the complex nature of native canvas implementations, developers should be aware that the polyfills for canvas are not simple drop-in solutions in some cases.

For example, both ExplorerCanvas and FlashCanvas may have difficulties handling the commonly used drawImage method. FlashCanvas cannot be passed the bitmap data from a DOM-based Image object, and therefore has to re-request the asset in the Flash Player causing undesired latency and flickering. Developers should be careful when handling image data and ensure thorough testing due to the unreliability and technical limitations of these features in the polyfills.

That isn't to say canvas shouldn't be used if cross-browser compatibility is a concern. Existing polyfills are more than capable of rendering simpler bitmaps such as charts/graphs, visualizations, and even starfields! For these uses and many more, canvas is highly encouraged.

HTML5 has baked in clientside form validation, and polyfills can enable this for legacy browsers as well. Using the defined HTML5 API for constraint validation may be a more maintainable direction than using a jQuery Validation plugin, depending on your team. When detecting this feature, be aware of Safari's half baked support. It does support form validation, but won't highlight invalid fields or present error messages.

All current browsers, except Internet Explorer 8 and below, support the use of the new HTML5 elements (e.g., <header>, <footer>, <nav>, <article>, <section>, etc.). However, they aren't always mapped to accessibility APIs as the HTML5 spec requires. Currently only Firefox does this, but other browsers are implementing the accessibility APIs quickly. In the meantime, Accessifyhtml5.js maps them correctly.

The notes below only apply to Internet Explorer 8 and below:

The html5shiv enables you to use the new HTML5 elements in your markup (and Modernizr does the exact same by default).

If you insert any of these new elements later on (via AJAX or templating), the html5shiv will handle this for you (as of v3). jQuery 1.7 has this functionality baked in.

Lastly, if you need these elements to print correctly, use html5shiv-printshiv.js.

A color input will fall back to a plain text input if it's not supported. So far, only Opera and Chrome Canary support this.

You should probably avoid this until it has support in WebKit, Gecko or IE.

There are many date inputs: datetime-local, date, time, month, week that should provide a datepicker to the user. For a long time, WebKit offered a spinner UI on these inputs, but this was an incomplete implementation (and has since been removed).

A few polyfills offer a proper datepicker UI, if the feature is not offered natively.

We suggest you use Modernizr to detect this feature, as it has correctly detected these features, regardless of WebKit's partial implementation or other browser bugs.

A range input (AKA slider) will fall back to a plain text input if it's not supported.

You can use freqdec's Input Range Polyfill or for just Firefox support, Frank Yan's html5slider.

These polyfills aren't drop-in polyfills, and you'll need to wire them up a little, but your markup can depend on <input type=range> creating a slider.

Crockford's JSON2.js is a perfect polyfill that accounts for non-native implementations (basically only IE6 & IE7 at this point). It's robust, well tested and can be used along with the native feature flawlessly.

Local and session storage are a great way to store data without resorting to cookies. IE8 supported localStorage and sessionStorage so you may not need a polyfill. If you do, Remy's is a piece of cake to implement and use.

This is a simple key/value store, so if you want to store complex data use JSON.parse(str) and JSON.stringify(obj) on your way in and out. There is also no way to know if you exceeded the storage cross-browser, so wrap your store commands in try/catch. Up to 2.5MB is safe to use.

As part of keeping things simple, localStorage has a synchronous API that runs on the main UI thread in browsers; as a consequence of that, a race condition can occur if a user has the same site open in multiple windows or tabs running as separate processes. For many applications, that’s never really a problem in practice. But it can cause data corruption—so applications where it’s important to try to ensure that absolutely no data corruption can occur should instead use a more robust storage mechanism such as IndexedDB.

Due to the shortcomings of localStorage, there are calls to stop advocating for and building examples that use it.

Go read Cross Browser HTML5 Progress Bars In Depth . :)

requestAnimationFrame is recommended for animation as it's battery and power friendly and allows the browser to optimize the performance of your animations.

The spec has gotten some fixes and settled down. In addition to Chrome and Firefox, IE10 will have it.

An interesting usecase: If you have vertical parallax that changes on scroll, you can consider using rAF instead of binding to a window's scroll event. In this way, you'd just ask for window.scrollTop on your rAF callback and take action. This will give you the smoothest animations possible.

SVG has had good support for several years in most browsers, except for Internet Explorer. IE9 brings support, which means for oldIE you can use SVGWeb as a polyfill, or create SVG dynamically via Raphael (which uses a VML fallback).

For Android Browser support, you can use CanVG. Meanwhile D3.js is an SVG and DOM library for data visualization.

Do note you need to supply your video in various formats to cater to all browsers and fallbacks—Miro Video Converter makes this trivial. H264 and WebM cover all browsers (except Firefox 3.6 which needs Ogg Theora). Use the above polyfill or gracefully handle all cases without any scripting, as explained by Kroc Camen in Video for Everybody.

There is also an incredibly useful service called vid.ly which converts video online into all necessary formats and provides a short url that detects your browser/hardware and sends the correct format. Archive.org also converts MP4 videos uploaded to OGG automatically, and does the same with audio.