Modernizr: Detecting Browser Support for HTML5 and CSS3

Monday, 04 January 2010

If you've been looking to implement modern browser features right now then the Modernizr javascript framework is indispensable:

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

The "What Modernizr Doesn't Do" section might make its purpose more clear:

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

Here's an example taken from Mark Pilgram's Dive Into HTML5 book:

if (!Modernizr.inputtypes.number) {
  // no native support for type=number fields
  // maybe try Dojo or some other JavaScript framework