Modernizr: the feature detection library for HTML5/CSS3

Created: 2015-03-23 20:50 Updated: 2015-03-23 20:50 Source: http://modernizr.com/ Notebook: All Tech/Frontend Development

Modernizr v3 is currently in beta. Create a custom build with v3 now!

Modernizr

Front-end Development Done Right

“An indispensable tool.” — Bruce Bowman, sr. product manager, Edge Tools & Services

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

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.

How it works

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 on. 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.

Download Modernizr 2.8.3

Use the commented, uncompressed Development version to develop with and learn from.

Then, dive into the Production build tool and pick just the tests you need!

Get started with Modernizr

While Modernizr gives you finer control over the experience through JavaScript-driven feature detection, it is important to continue to use best practices throughout your development process. Use progressive enhancement wherever you can, and don’t sacrifice accessibility for convenience or performance.