Skip to content
Get packs

Modernizr

A JavaScript library that checks which HTML5 and CSS3 features a visitor's browser supports.

GitHub Download v3.13.1
Stars
25.7k
Forks
2.9k
Licence
MIT
Language
JavaScript
Last update
15 days ago
Type
Library

What it is

Modernizr is a JavaScript library that tests whether the user's browser supports modern HTML5 and CSS3 features. It exposes the results as properties on a global Modernizr object and as classes on the html element, so a page can be enhanced when a feature is available and fall back when it is not. The README also describes building a custom version containing only the detections you need.

  • Adding a CSS class to the html element when a feature such as a canvas or storage API is missing, then styling around it
  • Building a custom Modernizr file with only the feature tests your site uses via the build method
  • Waiting for an asynchronous feature test to finish using Modernizr.on with a callback
  • Including a generated Modernizr build in a Webpack, Gulp, or Parcel project

Great for

  • Front-end developers who need to serve different experiences depending on browser capabilities
  • Teams doing progressive enhancement of existing websites
  • Developers who want to build a slimmed-down Modernizr with only chosen feature tests
  • Developers who need async feature tests with an on() event listener

Not ideal for

  • Projects that only target modern browsers and do not need feature checks, since the library adds code for detection
  • Developers looking for a polyfill library; the README describes detection, not filling in missing features
  • Anyone who needs the project website for documentation, since the README says the website is outdated and broken and points to the npm package instead
Step-by-step guide: how to use ModernizrInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js 12 or newer (per the v4 breaking changes note) · npm

    Install dependencies in the cloned repository

    npm install

    Install the npm package in your project

    npm install modernizr --save
  2. 2

    Run it

    • Install the package with npm install modernizr --save
    • Create a build with modernizr.build({}, callback) or run the command line interface from the repository
    • Include the generated build file in your page
    • Check results with Modernizr properties or the classes on the html element
  3. 3

    Get the most out of it

    • Use a custom build config listing only the feature detects you need to keep the output small
    • Review lib/config-all.json to see all available options
    • Use Modernizr.on for asynchronous tests instead of polling properties
    • Use the src/addTest feature to write your own detection that also exposes the on() event

Downloads

Source code (.zip)master branch · straight from GitHubRelease v3.13.1Release notes and sourceOfficial website & docswww.npmjs.com/package/modernizr

Strengths

  • Well-established project with a long history and a large number of GitHub stars
  • Results are available both as JavaScript properties and as HTML classes, which suits progressive enhancement
  • Build system lets you include only the feature tests you need

Trade-offs

  • The README warns that the official website is outdated and broken, so you must rely on npm and the linked docs
  • The v4 breaking changes list several renamed, moved, and removed tests, so older code may need updates
  • Build tool integration steps in the README reference plugins and config formats that were not verified here

How it compares

ProjectStarsTypeLevelUpdatedBest for
Modernizr (this)25.7kLibraryintermediate15 days agoFront-end developers who need to serve different experiences depending on browser capabilities
Inquirer.js21.6kLibraryintermediate5 days agoNode.js developers building interactive command-line tools
inferno16.5kLibraryintermediate6 days agoDevelopers already familiar with React who want a React-like API
anime74.2kLibrarybeginner3 months agoFront-end developers adding motion to websites or web apps
Semantic-UI-React13.2kLibraryintermediate2.0 years agoReact developers who already use or want Semantic UI styling
flowy12.1kLibraryintermediate2.3 years agoWeb developers adding a visual flowchart editor to an existing web app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.