Posted on by & filed under Content - Highlights and Reviews, Mobile Development, Web Development.

Some developers avoid including HTML5 features in their applications for fear of leaving their users behind. While it is important to accommodate users, it is also important to keep innovating and providing top features to those using state-of-the-art browsers. In this post, we’ll explore how to ensure that applications degrade gracefully, catering to those users with older browsers and devices.

How to perform feature detection and use polyfills

The best way to detect support for particular HTML5 features is to use JavaScript to perform a test for a given feature. Unfortunately, there is no standard convention to test for each of the different APIs, since each of the tests you need to perform are different. Thankfully, there is a small JavaScript library named Modernizr, which will give you a simplified interface to detect all of HTML5’s features. This allows you to easily provide fallbacks where a feature is not supported.

You may also be wondering how to provide fallbacks for given HTML5 features. Of course, you could write these yourself, but this is generally unnecessary as there are many JavaScript shims known as “polyfills” out there that take care of this for you. Polyfills can be quite bloated, so you should only load them if necessary. This is made easy by the YepNope.js micro-library, which is built-in to the Modernizr library itself.

An example of using a polyfill might be for JSON support. Modern browsers all include native JSON as a standard, but there are a number of older browsers that don’t understand JSON at all. In this case, you would most likely use Douglas Crockford’s json2.js script as a polyfill to provide older browsers with JSON parse and stringify methods. To only load this polyfill when required using YepNope.js, you would use the following code:

yepnope({
test: window.JSON,
nope: 'json2.js',
complete: function () {
var data = window.JSON.parse('{ "json" : "string" }');
}
});

Paul Irish, lead developer of the Modernizr library, maintains an enormous list of polyfills for virtually every feature of HTML5, CSS3 and related standards and languages. You can find it on GitHub.

These techniques will help make sure the largest possible audience of users can take advantage of your HTML5 applications.

Safari Books Online has the content you need

Take advantage of these HTML5 resources in Safari Books Online:

HTML5 and CSS3 in the Real World is ideal for any developer who wants to use the latest generation of Web technologies in their everyday work.
HTML5: The Missing Manual shows you not only how HTML5 works, but also how to best use its new features to create an effective Web experience for your visitors.
HTML5 Developer’s Cookbook provides you with all of the expert advice and proven code you need to start building production-quality HTML5 applications right now.

About the author

  Joe Lennon is a Web and Mobile applications developer from Cork, Ireland. He works as Product Manager of Mobile Solutions for Core International, one of the UK and Ireland’s leading enterprise HR software vendors. Joe is the author of Beginning CouchDB, and is co-author of the forthcoming title HTML5 in Action. He is also a regular contributor to the IBM developerWorks library. You can learn more about Joe and his work on his website at .

Tags: html5, JSON, Modernizr, polyfills,

2 Responses to “HTML5 Feature Detection and Fallbacks”

  1. Stephen Greig

    Modernizr is brilliant. Without it I highly doubt we’d be seeing as much mainstream experimentation with HTML5 and the various new technologies that come with it. The polyfills are vital to allow us to push forward and innovate whilst ensuring older browsers can still cope.