Modernizr ORG

Breaking changes with v4

• Dropped support for node versions <= 10, please upgrade to at least version 12

• Following tests got renamed:

• Following tests got moved in subdirectories:

• Following tests got removed:

New Asynchronous Event Listeners

The new API looks like this:

js
// Listen to a test, give it a callback
Modernizr.on("testname", function (result) {
  if (result) {
    console.log("The test passed!");
  } else {
    console.log("The test failed!");
  }
});

Getting Started

Building Modernizr

From javascript

Modernizr can be used programmatically via npm:

js
var modernizr = require("modernizr");

javascript
var modernizr = require("modernizr");

modernizr.build({}, function (result) {
  console.log(result); // the build
});

The second parameter is a function invoked on task completion.

From the command-line

We also provide a command line interface for building modernizr.
To see all available options run:

shell
./bin/modernizr

Or to generate everything in 'config-all.json' run this with npm:

shell
npm start
//outputs to ./dist/modernizr-build.js

Testing Modernizr

To execute the tests using mocha-headless-chrome on the console run:

shell
npm test

You can also run tests in your browser of choice with this command:

shell
npm run serve-gh-pages

and navigate to these two URLs:

shell
http://localhost:8080/test/unit.html
http://localhost:8080/test/integration.html

Integrating Modernizr with Build Tools

This section provides guidance on how to integrate Modernizr with various build tools and frameworks, making it easier to use in your projects.

1. Integrating with Webpack

To integrate Modernizr with Webpack, follow these steps:

bash
   npm install modernizr --save

javascript
   module.exports = {
     "feature-detects": [
       "test/feature1",
       "test/feature2",
       // Add more feature detects as needed
     ]
   };

javascript
   const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

   module.exports = {
     // Other configurations...
     plugins: [
       new ModernizrWebpackPlugin({
         "feature-detects": [
           "test/feature1",
           "test/feature2"
         ]
       })
     ]
   };

bash
   npm run build

2. Integrating with Gulp

If you are using Gulp, you can integrate Modernizr as follows:

bash
   npm install modernizr --save-dev

javascript
   const gulp = require('gulp');
   const modernizr = require('modernizr');

   gulp.task('modernizr', function() {
     return modernizr.build({
       "feature-detects": [
         "test/feature1",
         "test/feature2"
       ]
     }).pipe(gulp.dest('dist/'));
   });

bash
   gulp modernizr

3. Integrating with Parcel

For projects using Parcel, you can integrate Modernizr as follows:

bash
   npm install modernizr --save

javascript
   module.exports = {
     "feature-detects": [
       "test/feature1",
       "test/feature2"
     ]
   };