Modernizr: A Handy HTML5 Tool

One of the most frustrating things about HTML development over the years has been dealing with browser idiosyncrasies and differences. We've been forced to litter our code with detection scripts. As we move toward HTML5, these same issues must be dealt with. Modernizr is a handy tool that reduces some of the difficulties involved in applying HTML5 features across multiple browsers. Even the main web page for Modernizr is helpful in HTML5 development because it uses its own JavaScript library to indicate which features the web browser rendering that page supports.

The following four screen snapshots demonstrate which features Modernizr reports are covered by the Windows versions of the four web browsers: Google Chrome 6.0, Firefox 3.6.10, Microsoft Internet Explorer 8, and Apple Safari 5.0.2. The green checks next to the features indicate that Modernizr reports that feature to be supported by the web browser being used.

Google Chrome Feature Support Reported by Modernizr

Firefox Feature Support Reported by Modernizr

Internet Explorer Feature Support Reported by Modernizr

Safari Feature Support Reported by Modernizr

As the above screen snapshots indicate, Microsoft Internet Explorer 8 lags well behind the other three web browsers in terms of modern feature support. Microsoft Internet Explorer 9 is expected to reduce the gap in modern feature functionality.

As demonstrated in the above screen snapshots, Modernizr is useful in quickly ascertaining which features are supported in each browser. However, Modernizr's real power comes in applying it within web applications for simple and convenient feature detection rather than writing custom feature detection JavaScript code. Modernizr simplifies feature detection, which is generally preferable (as documented here) to user agent detection (AKA browser detection). Developers can include calls to the small Modernizr JavaScript library to reliably detect which features are available in a particular browser.