Library

Modernizr

by Jeremy Caney

Modernizr is a lightweight JavaScript library that detects up-level HTML5 and CSS3 functionality, and allows a web developer to take advantage of new features if they're supported, and otherwise define fallback behavior for down-level browsers.

Strengths

Instead of relying on a manually maintained list of browser capabilities, Modernizr instead attempts to call each feature to determine if it is supported.  This process is not only far easier to maintain, but is also the most accurate way of determining whether or not a particular feature is supported since it's detecting the capability of the current client.

Weaknesses

While Modernizr can effectively determine whether or not a browser supports a particular feature, it cannot tell whether or not it correctly implements it. As a result, Modernizr may not completely eliminate the need to detect particular browsers and offer fallback experiences based on user agent string — although it will greatly reduce these scenarios.

Usage

Modernizr is an indispensable tool when developing sites that want to take advantage of up-level ("next generation") functionality, but still need to maintain compatibility with down-level devices or browsers.  It is particularly valuable when combined with a JavaScript pre-loader, such as YepNope.js or Require.js to conditionally load different scripts or stylesheets based on a browser's capabilities.  In fact, YepNope.js was written by the same team as Modernizr, although the two are not coupled together (i.e., they can be used independently, or with other libraries).

BestPractices

While Modernizr can be used to detect browser capabilities and provide fallback behavior that simulates up-level features, this isn't necessarily the best choice.  Recreating up-level features on down-level browsers can be expensive (both in terms of development as well as performance).  In many cases, it may be better to provide a simpler experience for down-level browsers rather than maintaining 100% feature parity with the latest, most capable browsers.  Modernizr allows developers to degrade the experience gracefully.