Guide · Open source
How to use Modernizr: install, detect features and build a custom version
Updated · written with AI from the project's own documentation and checked against our catalogue data
Modernizr is a JavaScript library that tests whether the user's browser supports HTML5 and CSS3 features. This guide is for front-end developers who want to serve different experiences depending on browser capabilities. By the end you will know how to install it, read its results in your page, listen for asynchronous tests and build a version that includes only the detections you choose.
ModernizrModernizr/Modernizr · ★ 25.7k · MIT Install options & downloads Quick start
- 1Check prerequisites. Confirm you have Node.js 12 or newer and npm installed.
- 2Install the package. Run npm install modernizr --save in your project.
- 3Require or load Modernizr. Load the library in your code using require("modernizr") or your build tool.
- 4Check feature results. Read the Modernizr global object or the classes on the html element to see which features are available.
- 5Listen to async tests. Use Modernizr.on with a test name and callback for any asynchronous test.
- 6Build a custom version. Call modernizr.build with the feature-detects you need, or run npm start to generate the full build.
What Modernizr does
Modernizr tests which native CSS3 and HTML5 features are available in the current browser. It makes the results available in two ways: as properties on a global Modernizr object, and as classes on the html element.
This lets you progressively enhance a page, adding richer behaviour where a feature exists and falling back where it does not.
Install Modernizr with npm
Modernizr is installed as a package. The README lists Node.js 12 or newer as the requirement for the v4 line, along with npm.
Run the following in your project to install the npm package.
- Prerequisites: Node.js 12 or newer and npm
npm install modernizr --saveRead feature results in your page
Each test sets a property on the global Modernizr object and a class on the html element. Use these to choose which code runs.
The README notes that the project website is outdated and broken, so build your version from the npm package rather than the website.
Listen for asynchronous tests with on()
Some tests are asynchronous. For these, Modernizr provides an on() method so your code can react when the test finishes. The callback runs once per call to on.
Only asynchronous tests support events. Synchronous tests should be handled synchronously, as the README explains.
Modernizr.on("testname", function (result) {
if (result) {
console.log("The test passed!");
} else {
console.log("The test failed!");
}
});Build a custom Modernizr
You can build a version containing only the detections you need. The build method takes an options object listing feature-detects, and a callback that receives the build. The full list of options is in lib/config-all.json.
From the command line, run ./bin/modernizr to see all options. To generate everything listed in config-all.json, run npm start, which outputs to ./dist/modernizr-build.js.
- Pass feature-detects in the options object to include only chosen tests
- Use ./bin/modernizr to view command-line options
var modernizr = require("modernizr");
modernizr.build({}, function (result) {
console.log(result); // the build
});Run the tests and integrate with build tools
To run the test suite in the console, use npm test, which uses mocha-headless-chrome. To test in a browser, run npm run serve-gh-pages and open the local unit and integration test URLs.
The README also includes integration guidance for Webpack, Gulp and Parcel. Those sections name plugins and setups, so check the current plugin documentation before copying them.
npm testWhat people use it for
- Show a richer interface when a browser supports a given CSS3 or HTML5 feature, and a simpler one when it does not.
- Enhance an existing website step by step through progressive enhancement.
- Produce a slimmed-down build that includes only the feature tests your project uses.
- React to an asynchronous feature test in your application using the on() listener.
Frequently asked questions
Is Modernizr free to use?
Yes. The project is released under the MIT License, as stated in the README and the item's licence field. You can read the licence text at the link in the README.
What do I need to install Modernizr?
The README lists Node.js 12 or newer as the requirement for the v4 line, and npm to install the package. Run npm install modernizr --save in your project.
How do I check if a browser supports a feature with Modernizr?
Modernizr sets results as properties on the global Modernizr object and as classes on the html element. You can check these in your code to choose which experience to show.
Does Modernizr fill in missing features?
No. The README describes detection, not filling in missing features. It tells you what the browser supports so you can decide what to do; it is not a polyfill library.
How do I make a smaller Modernizr build?
Use the build method with an options object listing the feature-detects you need, or see lib/config-all.json for all options. The command line tool at ./bin/modernizr also lists its options.
What are alternatives to Modernizr?
Comparable projects named in the analysis are Feature.js, Detectizr and has.js. Compare them on the features they test and how they are built before choosing.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Modernizr suits front-end developers and teams who need to adapt pages to browser capabilities, or who want a custom build with only chosen tests. If your project only targets modern browsers and needs no feature checks, you do not need it, and if you need missing features filled in, look at a polyfill library instead.
Install options & downloads