Detecting HTML5 Features Using Modernizr

In the past, I wrote a post about using feature detection instead of browser detection when writing web applications/sites. There are frameworks like jQuery that do that for you and all you have to do is to use them. There are other frameworks like Modernizr that are specializing in testing the current browser you use in order to detect whether it supports upcoming features such as HTML5 or CSS3.

What is Modernizr?

Taken from Modernizr site: “Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.”

How to Use the Modernizr?

Using Modernizr is very easy. First, download the library from Modernizr’s site. Then, add the JavaScript file you downloaded to your site and use Moderinzr API. For example, here is how you’ll detect whether HTML5 Canvas is available in the browser:

// In your BLOCKED SCRIPT
if (Modernizr.canvas) {
   var c = document.createElement('canvas');
   var context = c.getContext('2d');    
   // Do your work 
}

Here is an example of detecting search input type:

<input type="search" name="searchBox" id="searchBox">
 
<script>  
if (!Modernizr.inputtypes.search){
  // if no native support, create your own search box
  createSearchBox(document.getElementById('searchBox'));
}
</script>

Here is a check for SVG:

if (Modernizr.svg)
{
    // SVG is supported by your browser
} else 
{
    // SVG is not supported
}

As you can see, the API is very easy to use and easy to pick up. For further information about the API, you can go to Modernizr’s documentation.

Summary

Feature detection can help you to create a more stable web application/site. Modernizr is a JavaScript library that can help you to detect upcoming features such as HTML5 or CSS3. It is very easy to use and can be downloaded from here.