BT

Your opinion matters! Please fill in the InfoQ Survey!

Safely use HTML 5 and CSS 3 Today with Modernizr

| by Jonathan Allen Follow 193 Followers on Jun 08, 2011. Estimated reading time: 1 minute |

A note to our readers: As per your request we have developed a set of features that allow you to reduce the noise, while not losing sight of anything that is important. Get email and web notifications by choosing the topics you are interested in.

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

Adoption Stage
Style

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

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT