Supported browsers include: IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, and Chrome. On mobile, it supports iOS’s mobile Safari, Android’s WebKit browser, Opera Mobile, and Firefox Mobile, but there is still more testing to be done with respect to support for Blackberry 6+.
Many web site implementations employ user agent sniffing methods for detecting a user’s browser with tools such as the configurable navigator.userAgent property. Modernizr uses feature detection that is a more reliable method of establishing what the browser can and cannot do:
- Tests for over 40 HTML5 and CSS3 features in a matter of seconds
- Adds classes to the html element that explain precisely what features are and are not natively supported
- Provides a script loader so you can pull in polyfills to backfill functionality in old browsers
To install the Modernizr, you can create a custom set of features for your own use, specialized to fit your needs, and this helps keep the code to a minimum. Once on the download page, you select which features you want to use for your project; they include selections from CSS3, HTML5, and others. Or, you can use a developer build that includes an uncompressed version of all the features. This allows you to learn about the features, and then when ready for production, you can utilize the download tool to pick and build only the ones you select. A screen capture of the feature selector download page is shown below.
Once you have the script set up and downloaded, you then add the script tags within the <head> of your HTML documents. And for best performance, it is recommended that the script follow after the stylesheet references for two reasons: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent any flash of unstyled content.
Probably one of the best features about using Modernizr is that there is a polyfill for just about every HTML5 property that it recognizes, which means that you can develop for the future with HTML5 and CSS3 elements and be able to ensure replication in non-supporting browsers.
There is much more to Modernizer than can be conveyed in this quick review of the amazing tool, but this will get you started on the right track for enabling your web documents for now and into the future of HTML5 and CSS3 web development.