Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Unlike with the traditional—but highly unreliable—method of doing “UA sniffing,” which is detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do. After all, the same rendering engine may not necessarily support the same things, and some users change their userAgent string to get around poorly developed websites that don’t let them through otherwise.

Modernizr aims to bring an end to the UA sniffing practice. Using feature detection is a more reliable mechanic to establish what you can and cannot do in the current browser, and Modernizr makes it convenient for you in a variety of ways:

1. It tests for over 40 next-generation features, all in a matter of milliseconds
2. It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties
3. It adds classes to the html element that explain precisely what features are and are not natively supported
4. It provides a script loader so you can pull in polyfills to backfill functionality in old browsers

With this knowledge that Modernizr gives you, you can take advantage of these new features in the browsers that can render or utilize them, and still have easy and reliable means of controlling the situation for the browsers that cannot.

Tutorials

Mozilla Web Developer Toolbox: Modernizr
— Jeremie Patonnier

Taking Advantage of HTML5 and CSS3 with Modernizr
— Faruk Ateş

How to use Modernizr
— Inayaili de León

Modernizr: front-end development done right
— Ryan Seddon

Using Modernizr Prefixed
— Andi Smith

 

Official resources

Github repository

Extra Feature Detection tests

Modernizr logos

Documentation: Getting started

The Undetectables: features that cannot be detected

Cross-browser Polyfills

Documentation

1. General
   1. What is Modernizr?
   2. Installing Modernizr
   3. Polyfills and Modernizr
   4. Modernizr.load() tutorial
   5. How Modernizr works
   6. HTML 5 elements in IE
   7. Supported browsers
2. Features detected by Modernizr
   1. CSS3 features
   2. HTML5 features
   3. Miscellaneous
3. Modernizr API methods
   1. prefixed() for CSS features
   2. prefixed() for DOM features
   3. mq() for media query testing
4. Extensibility
   1. addTest() Plugin API
   2. testStyles()
   3. testProp()
   4. testAllProps()
   5. hasEvent()
   6. _prefixes