A Quick Look at Modernizr 3.0

Browsers are getting quicker at adopting new standard web features, but the fact remains that we often have little choice but to provide a functioning fallback for old browser versions. In a nutshell, we need Modernizr.

Modernizr is a JavaScript library which detects browser features, then makes the status of each one available for us as a class attached to the html element, or a property within the Modernizr JavaScript object.

Modernizr recently received some major updates, which means new features, changes, and improvements. In this article, we’ll revisit Modernizr, taking a look into what it has to offer in version 3. Let’s get started!

Getting Modernizr

In previous versions we were able to download the development build (the unminified Modernizr) as well as a customized package including only selected features and APIs, through the Download page. In version 3, Modernizr enables us to do so through the official CLI (Command Line Interface).

To do so, first select the features you require from Modernizr. You will then be given the option to download a JSON config file.

The file contains lines of configuration that determine the Modernizr file output:

{
  "minify": true,
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "test/css/flexbox",
    "test/css/flexwrap",
    "test/css/transitions"
  ]
}

Taken the above example, our specification for Modernizr is bare minimum. The resultant file should be minified and includes only three feature tests, namely:

the flexbox,
the flexboxwrap (a new test since version 3),
and the transition.

This config file is to be used with the Modernizr command line interface. Install the CLI with NPM with the following command:

npm install -g modernizr

Now, you have access to the modernizr command. Run the command by pointing to the directory where you have downloaded the JSON config file. For example, assuming it is in the “Download’ folder, you would enter:

modernizr -c ~/Downloads/modernizr-config.json

The file should now have been generated and is ready for deployment in your website.

An example of Modernizr generated file through the CLI

Working with Class Names

Modernizr adds a pile of classes to the html element, based on whichever features you’re testing for, and it will add js if JavaScript is enabled, replacing the no-js class if added initially.

The following screenshot shows the latest Chrome at the time of writing; the classes added to the html tell us that Chrome supports all the three features that we have included in our own build.

In a browser that does not support these features, Modernizr will add a no- prefix to each respective class. In IE9, where none of these three features are supported, we would be given the following classes:

Where flexbox is supported, you might apply styles like so:

.flexbox .column {
    display : flex;
}

Adding a fallback like so:

.no-flexbox .column {
    display : block;
}

Class Prefixes

In case these class names happen to clash with one or more of your own class names, you can always suggest a prefix when downloading the JSON file before building.

In Modernizr 3, this option is configurable in the JSON file under the name classPrefix property. For example:

{
  "minify": true,
  "classPrefix": "is-",
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "test/css/flexbox",
    "test/css/flexwrap",
    "test/css/transitions"
  ]
}

Open Terminal and rebuild the file. You should now see that the classes are is- prefixed.

JavaScript: Feature Detection Property

When detecting a browser feature with previous versions of Modernizr, say flexbox, we we would typically write :

if ( ! Modernizr.flexbox ) {
 elem.matchHeight();
}

There were a few exceptions, where properties include hyphens or spaces, such as display: table, display: run-in, exif-orientation etc. In these cases, we would have to write the test this way:

if ( ! Modernizr["exif-orientation"]) {
  fallbackFunctions();
}

In version 3, all feature detection property names are single worded, without spaces, or hyphens. This enables us to be more consistent in our code. Taking the above example, we can now test the exif-orientation in the same way as we test the flexbox feature, like so:

if ( ! Modernizr.exiforientation ) {
  fallbackFunctions(); 
}

This change also affects the class names added to the html. If we take a look at our DOM through the DevTools, we will now find the exif-orientation class name is not hyphenated. If you have used some old class name convention, worry not. Classes which are presumed to be more widely used have been provided with an alias for backward compatibility. You will see the display-table and object-fit, for example, are named both with the hyphen and non-hyphen.

New Test Methods

Some feature tests are performed asynchronously which can cause a timing issue, preventing proper results. Therefore, when you run the following test for new image format webp, for example, Modernizr will return undefined instead of true or false.

console.log( Modernizr.webp ); // undefined

Being able to get asynchrounous test results was one of the most requested features, so (happily) version 3 now gives us the Modernizr.on() method. The following test should now return correctly.

Modernizr.on( 'webp', function( result ) {
  if ( result ) {
    console.log(result); // true or false;
  }
});

Keep in mind that the Modernizr.on() method is generally applicable to all feature tests, but it’s advisable to use it only for asynchronous features, including:

webp
apng (Animated PNG)
jpeg-xr
dataworkers
blobworkers
exif-orientation
csshyphens
flash
data-uri

A Note About YepNope

YepNope development has been discontinued in favor of better script loaders and dependency managers such as Require.js. Previously, in Modernizr 2, you might have run theModernizr.load() method to load JavaScript files based on the feature test feedback.

Modernizr.load({
  test: Modernizr.flexbox,
  nope: 'matchHeight.js'
});

However, since YepNope has been deprecated, this method has also been dropped in Modernizr 3. The Modernizr.load() is no longer applicable. So, evaluate your legacy code for instances of this method if you plan to update to version 3.

Wrapping Up

Modernizr has long been one of my must-use libraries for any project, so I’m thrilled to see all these updates. Modernizr 3 has effectively been rebuilt from the ground up, and with around 99 new feature tests the changes are kind of overwhelming! Follow the steps in this guide, tailor your own build, then check out these references to dig further: