Click here to Skip to main content
Click here to Skip to main content

Detecting HTML5 Features Using Modernizr

, 10 Jan 2011
Rate this:
Please Sign up or sign in to vote.
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

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Gil Fink
Architect Sela Group
Israel Israel
Gil Fink is an expert in web development and Microsoft web and data platforms. He works as a senior consultant and architect at Sela Group. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also a co-author of several Microsoft Official Courses and training kits and the founder of Front-End.IL meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 10 Jan 2011
Article Copyright 2011 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid