How to Optimize CSS3 Applications with Modernizr - dummies

How to Optimize CSS3 Applications with Modernizr

By John Paul Mueller

There are many different browsers and browser versions in use today. Not all of them are optimal for CSS3. This is where Modernizr comes into play. Its developers call it “a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.”

You use Modernizr to optionally perform tasks and include application features based on the browser that the user has installed. As a consequence, users with newer browsers can enjoy the full functionality that your site has to offer, but you can also include users with older browsers (just not at the same functionality level, in many cases).

The creators of yepnope.js and Modernizr have worked to make their products highly compatible. You can use these two products together to create applications that are incredibly flexible, browser- and browser version-inclusive, and yet quite fast and resource-frugal.

Modernizr performs its task by using a number of techniques — not just the highly unreliable navigator.userAgent property — to detect a user’s browser. It detects a wealth of browser features, and helps you avoid problems when a browser lacks a particular feature, using a yepnope.js paradigm.