July 30, 2013

Why use Modernizr?

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the HTML element for you to key your CSS. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.

Check out the full list of features that Modernizr detects, or learn more about conditional resource loading with Modernizr. Modernizr support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, and Chrome. On mobile, Modernizr' support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile and whilst they are still doing more testing Blackberry 6+ is supported too.

In general, in order to keep page load times to a minimum, it's best to call any JavaScript at the end of the page because if a script is slow to load from an external server it may cause the whole page to hang. That said, the Modernizr script *needs* to run *before* the browser begins rendering the page, so that browsers lacking support for some of the new HTML5 elements are able to handle them properly.

To download Modernizr (visit www.Modernizr.com). Read further on how to install Modernizr on your sites.

While Modernizr was meant from day one to eventually become unnecessary, that day is far from here, and so development on the library continues.

No comments:

Post a Comment