Importance of Modernizr in HTML5

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:  http://html5test.com/. 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 http://modernizr.com/docs/#installing]:

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

You could detect a feature supported by a browser like this [taken from http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks]:

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

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:

  1. http://modernizr.com/docs/
  2. http://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr
  3. http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/
  4. http://camendesign.com/code/video_for_everybody. This is not so much about the Modernizr, as much about fallbacks.

1 COMMENTS

  1. March 14, 2013 15:57 Reply

    nice one

Leave a reply