Detect HTML5/CSS3 Features Using the Modernizr JavaScript Library

In the past, when we developed an application or website, there was a limited variety of browsers: Microsoft Internet Explorer and Netscape. The changes between the browsers forced the developers to detect the browser type by user string and load the appropriate JavaScript file accordingly.

 

Now there are a huge variety of browsers— 5 major desktop browsers—and countless browsers on other platforms, including mobile and gaming consoles. Now that you have an image of all the different browsers that we come into contact with daily, remember that almost all the major browsers update frequently.  Each of these updates affect (sometimes heavily)  the features that the browser supports.

 

Support for one and missing in others

 

For example, the track element, that allows native translation interface to the HTML5 video element, is supported in Chrome, but not in Firefox or IE.

 

If we want to implement track element, or any other HTML5 element, we must use feature detection i.e.  Checking  if the user browser support this feature – if not, I will go to some fallback solution.

 

Creating a test manually is quite easy. For example, to check if my browser support track I need to execute this code:

function testTrack() {
    var video = document.createElement('video');
    return  typeof video.addTextTrack === 'function';
}
if (testTrack()  == false) {
    //use polyfill for fallback solution
}

 

 

This is a simple test in JavaScript that checks to see if theHTML5 video tag has the addTextTrack method, if not – the browser does not support track element.

 

This is quite simple, but in real life, we sometimes use a lot of new features in our application or website. Creating dozens of global functions can create a code base that is very hard to maintain. This is the reason that we are using the popular library Modernizr.

 

Modernizr is an open source (MIT license) JavaScript library. It is small, easy to use and plays very well with other libraries and frameworks. Installing it is quite simple – just download Modernizr script(you can create your own build) and include it in your HTML output. It is ready to use after completing these easy steps.

 

The benefits of Modernizr

 

Modernizr contains the famous HTML5shiv library. This library enables old Internet Explorer version (IE6-IE8) to render the new HTML5 elements correctly. So, installing Modernizr allows old browsers to render HTML5 layout. After the user completes the page render, Modernizr immediately tests the browser in some basic HTML5 features and exposes the result by two ways.

 

The first one is by attaching CSS classes to the html element:

 firebug exmaples

 

As you can see, all the HTML5 features that the browser supports displays at the HTML tag--this applies to  video, audio, localstorage, etc. If you don’t have any fallback solutions for browsers without video support, you need to show them a kind message" all you need to do, after including the Modernizr library is create this HTML element in your layout":

<div id="video_error">
Your browser does not have video support.
</div>

 

And include this CSS class in your CSS file:

.video #video_error {
    display: none;
}

 

And that's it – quite neat, yes?

 

The second way that Modernizr shows us the result of the test is by using the global Modernizr object. For example:

if(Modernizr.canvas== false) {
    //print some error message to user
}

 

The global Modernizr object contains all the results of the default tests. You can decide which tests will be set as default by creating the Modernizr build in the download area in the Modernizr site.

 

Modernizr contains a lot of tests of HTML5 features, but if your desired feature is not supported by Modernizr, it is very easy to add custom tests. For example – testing for support of the track element is not in Modernizr default tests. How can you add it? Just use Modernizr addTest method, like this:

Modernizr.addTest('track', function(){
  var video = document.createElement('video');
  return typeof video.addTextTrack === 'function'
});

 

After running this, the Modernizr global object will have the property of track with what the anonymous test function (given as the second parameter of addTest) returns. We can use it like every other test, for example:

if (Modernizr.track == true) {
   console.log('Track is enabled!');
}

 

Another important feature that Modernizr contains is a resource loader that can be used with the tests result to decide resources according to the tests. It is extremely useful for loading fallback polyfills (or other) solution for older browsers.

 

Using the loader is very easy :

Modernizr.load({
  test: Modernizr.video,
  yep : 'video.js',
  nope: ['flash_player.js', 'flash_player.css']
});

 

In this simple example, the test is conducted as if the browser is the support feature. If the answer to this question is yes, I will load the regular video.js. If not, I will load 2 resources: flash player JavaScript file and some CSS file in order to make the flash player appear correctly.

 

In fact, the Modernizr resource loader is so exceptionally good, it was forked and is now a standalone project called http://yepnopejs.com/.

 

Feature detection is not a luxury or nice-to-have. In today's environment, with a lot of browsers and platforms available, it is essential to use it. Modernizr can ease the process without complicating the code base.

 

This article has been written by Ran Bar-Zik

Leave a Comment

We encourage you to share your comments on this post. Comments are moderated and will be reviewed
and posted as promptly as possible during regular business hours

To ensure your comment is published, be sure to follow the Community Guidelines.

Be sure to enter a unique name. You can't reuse a name that's already in use.
Be sure to enter a unique email address. You can't reuse an email address that's already in use.
Type the characters you see in the picture above.Type the words you hear.
Search
Showing results for 
Search instead for 
Do you mean 
About the Author
Featured


Follow Us
The opinions expressed above are the personal opinions of the authors, not of HP. By using this site, you accept the Terms of Use and Rules of Participation.