The Modernizr JavaScript Library

July 14, 2011

HTML5 and CSS3 add useful and cool new features, but, as always, browser support is still an issue. If you want to develop sites using cutting edge options, while still being backwards-compatible, a great tool to use is Modernizr. The concept is simple (and brilliant): Modernizr identifies what features the user’s browser supports and adds corresponding classes to the opening HTML tag. In your CSS, you can then add styling to just those classes. The result is that browsers that support, say, @font-face or canvas, will get the stylized version, and browsers that don’t, won’t. Modernizr also creates a JavaScript object that represents the browser’s capabilities. This object could be used to customize your JavaScript accordingly, too. And Modernizr has IE-specific tools, that add HTML5-like functionality to that browser.

For good, quick introductions, see the Modernizr site, this article at A List Apart, and this article at Web Designer Notebook. Modernizr just came out in version 2 and is open source.