Modernizr Demos

What is Modernizr?

Modernizr is a javascript library that detects browser features and allows developers to write rules based on these detections. Everyone wants to use the newest HTML and CSS features, but the user experience is also super important. If a browser can't implement your design the experience suffers, sometimes fatally. This is why Modernizr and polyfills are important. They allow us to use new features when the users system allows it and also create a fallback (or polyfill) for those users on older browsers.

How Does Modernizr work?

It works by dynamically adding classes to your HTML after Modernizr has checked your browser for what it supports. All you need to do is link to the modernizr.js from your page and Modernizr builds a representation of the state of your browser. We can write different sets of css rules for any combination of supported/active features.

For example you might want to have a message for users that don't have javascript enabled. The classes "js" and "no-js" are added to browsers that support and do not support javascript, respectively. Then by making rules for these classes we can target the users we need to.

/* We add a div with text telling the user javascript is not supported */

<div class="warning">
This application runs entirely on javascript. Please use a different browser(link to mozilla/chrome) to access this website.
</div>

Now we add properties to the css class that corresponds to our div and the Modernizr features we're detecting.

/* The class added to browsers with javascript support */

.js .warning{
  display: none;
}

/* The class added to browsers without javascript support */

.no-js .warning{
  display: block;
  color: #ff000;
}

Now a div with the class of "warning" will only be visible to users without JS support in their browser. The "js" or "no-js" class will be added to the HTML tag in your page by Modernizr. I have included a div here with the same rules. You probably can't see it now since you probably have javascript enabled. To test it out, open an inspector tab and find the hidden div. Also you could change the Modernizr class on the HTML tag from "js" to "no-js" and the div will appear.

Conditional Loading

Lets say you're excited about using some new HTML 5 feature like the input type "range" slider. We'll also assume that this feature needs to be supported in all browsers including IE 8+. A great resource to look at is caniuse.com. This breaks down what is supported by all major browsers. Sliders are considered an HTML 5 Form Feature, so that page shows us that new form features are not supported in IE 8 and IE 9, which we have to account for. There happens to be a number of polyfills available for sliders, one that looks very good in IE 8 and 9 is rangeslider.js

In most cases I think it makes sense to build around a responsive and backwards compatible polyfill like rangeslider.js, but there may be a time where you want to use the native implementation of the range slider in browsers that support it (anything but IE 8 and 9 or safari 3.2). You can do this with conditional loading, which is included in the Modernizr library. It allows for you to bring in different files depending on which features are supported. For our example we will use the native implementation on browsers that support it, but pull in the rangeslider polyfill for older browsers.

You should be loading different files and seeing a different slider based on your browsers support of Range Input Types:

Let's see how Modernizr helps us use this polyfill:
We link to our conditional loading script at the bottom of our page

/ Make sure to also include the correct version of 
 Modernizr for Conditional Loading 
 (not the dev version) /
<script src="/js/modernizr_load.js"> </script>

What our script looks like:

Modernizr.load({
  test: Modernizr.inputtypes.range,
  yep : '',
  nope: ['/js/rangeslider.min.js', '/js/sliderset.js']
});

This is using the Modernizr.Load() function to test the browser. If the browser supports the feature (yep), then we load nothing because we want the native implementation in those browsers. If the browser doesn't support form input types we load the files for our polyfill. Something to note, the development version of Modernizr does not include the .load function, you will have to make a custom build in order to use the conditional loader as described. Also another note make sure you are loading your scripts in the correct order. Deploying with CDN's such as Cloudflare can also cause a conflict.