Safely use HTML 5 and CSS 3 Today with Modernizr

by Jonathan Allen on Jun 08, 2011 |

The principal problem with using HTML 5 and CSS 3 isn’t the adoption rate or the differences between browsers, it is knowing what those differences are in the first place. Once that is known developers can work around the limitations using graceful degradation techniques. To help figure that out many turn to the open source project Modernizr.

Rather than look at user-agent strings, Modernizr uses a series of tests to determine the capabilities of a browser. In a few milliseconds it can perform over 40 tests and record their results as properties on an object called Modernizr. Using this information developers can detect if a feature they are using isn’t supported and react accordingly.

New in version 2, Modernizr now comes with a conditional resource loader for JavaScript and CSS. This resource loader takes three arguments, the first being an expression listing the features that are required. The second argument is the list of JavaScript and CSS files to be loaded if the expression returns true. The third argument is the fallback files to use if the necessary features are not present.

In addition to graceful degradation, the loader can be used to bring in a polyfill. For those of you who are not familiar with the term, a pollyfill is “a JavaScript shim that replicates the standard API for older browsers”. While not always recommended, pollyfills can be used to add support for the vast majority of HTML 5 features that Modernizr detects.

In order to improve performance, Modernizr can be customized to only perform the tests that are needed by the site. This is done via the Modernizr download page, which also services as a list of detectable features. There is a separate list of undetectable features and possible workarounds on their github site.

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Beware of polyfills and JS shims by Flinn Mueller

These kinds of techniques never work as advertised and almost always introduce performance issues. This isn't a proper solution for supporting browsers.

Re: Beware of polyfills and JS shims by Wanderson Santos

@Flinn Mueller Please, show us your solution!

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

2 Discuss
General Feedback
Marketing and all content copyright © 2006-2016 C4Media Inc. hosted at Contegix, the best ISP we've ever worked with.
Privacy policy

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.