Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Safely use HTML 5 and CSS 3 Today with Modernizr

Safely use HTML 5 and CSS 3 Today with Modernizr


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.

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

Community comments

  • Beware of polyfills and JS shims

    by Flinn Mueller,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    @Flinn Mueller Please, show us your solution!

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

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