Importance of Modernizr in HTML5
Feb 25, 2013

HTML is slowly but surely entering our development psyche. Though still not a W3C recommendation, many browsers support a wide range of the proposed HTML5 features. Development tools have also begun to support HTML5.

As a developer called upon to develop using HTML5, it pays to know the current scenario, and keep up to date with the trends in this technology.

Let’s begin by analyzing the adaptation of browsers by internet users. A good source of this data is Stat Counter.

StatCounter-browser-ww-monthly-201211-201301-bar Figure 1

A further breakdown of the above for the same period by browser version is below.

StatCounter-browser_version-ww-monthly-201211-201301-bar Figure 2

Now let’s look at how these browsers support HTML5 features. We can do this using this URL: Open the browser and call this URL.

This will return with a page that lists the HTML5 features that are supported by the browser. And provides a ‘score’ based on the features supported.

This is an extract from the test report for the Chrome Version 24.0.1312.57 m: Chrome

Chrome 23 scores 448.

And for Firefox 19.0: Firefox 19

Firefox 1.06 scores 372, Firefox 17.0 392 and Firefox 18.0 393

And IE9: IE9 IE 8.0 scores 42 and IE7 27.

With such a huge difference in support in different browsers, how does a developer meet the expectation that his application runs in all major browsers?

Enter the Modernizr.

Modernizr describes itself as a “JavaScript library that detects HTML5 and CSS3 features in the user’s browser …Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily”.

If you include this JS library in your project (just like you do jQuery files), “Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on”.

And this is how you could use it:

An example to support audio checks a script [taken from]:

var audio = new Audio();
audio.src = ? 'background.ogg' : ? 'background.mp3' :

You could detect a feature supported by a browser like this [taken from]:

if (Modernizr.canvas) {
alert("This browser supports HTML5 canvas!");
} else {
alert("no canvas :(");

Of course nothing comes for free.  Detecting features and coding for those that are not supported, requires extra effort. Remember this when you are asked to prepare an estimate.

Suggested reading:

  4. This is not so much about the Modernizr, as much about fallbacks.


  1. nice one

    March 14, 2013 15:57

Leave a Reply

Your email address will not be published. Required fields are marked *


Related Posts

Solve MS Ajax Script loading error in Safari & Chrome

Safari 3x and Google Chrome uses javascript engine called WebKit and which causes…

Jan 16, 2008

Web Design Services Denmark | Germany | Switzerland

Web Design Services If you are thinking of creating a website, then the…

Oct 13, 2016

The Basics of Responsive Web Design

We show you the most important principles of responsive design Responsive Web design:…

Jan 9, 2017

Copyright © Prakash Software Solutions Pvt. Ltd. All Rights Reserved.