Modernizr is a JavaScript library that detects which HTML5 and CSS3 features are available in a user's browser. The library makes feature detection results accessible through two mechanisms: as properties on a global Modernizr object and as classes applied to the HTML element. This dual approach enables developers to progressively enhance web pages with granular control over the user experience based on browser capabilities.
The library exposes detected features in a way that allows developers to conditionally apply different code paths or styling depending on what the browser supports. Rather than attempting to use features that may not exist, developers can check for their availability first and provide fallbacks or alternative implementations when needed. This approach is particularly valuable for managing the transition period when new web standards are being adopted across different browsers at different rates.
Version 4 introduced significant structural changes to the codebase. The project dropped support for Node versions 10 and earlier, requiring users to upgrade to at least version 12. Many feature detection tests were reorganized into subdirectories for better organization, with tests grouped by category such as storage, audio, battery, canvas, events, images, input, SVG, and WebGL. Several tests were also removed, including touchevents, unicode, templatestrings, contains, and datalistelem, either because they were duplicates of other detects or due to community discussion about their necessity.
The library introduced asynchronous event listeners to allow applications to react when asynchronous tests complete. Previously, developers had to rely on watching properties or HTML classes for changes. The new API provides a callback mechanism specifically for asynchronous tests, with guarantees that functions are invoked only once per call. Synchronous tests continue to be handled synchronously to maintain performance and consistency.
Modernizr can be used programmatically through npm, exposing a build method that generates custom Modernizr builds. Developers can pass a JSON object specifying which feature detects to include, with all available options documented in the config-all.json file. The project also provides a command-line interface for building Modernizr without requiring programmatic access. Testing is supported through mocha-headless-chrome for console execution and browser-based testing with integration and unit test suites available.
The repository includes integration guidance for popular build tools including Webpack, Gulp, and Parcel. Each integration approach involves installing Modernizr via npm, creating a configuration file, updating the respective build tool configuration, and running the build process. This flexibility allows Modernizr to fit into various development workflows and project structures.
The project maintains good first issue labels to encourage new contributors. The repository shares contributors with major projects including Microsoft's VSCode and TypeScript, as well as the Rust language project, indicating its significance in the web development ecosystem.
