Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Detecting HTML5 Features Using Modernizr

, 10 Jan 2011 CPOL
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)

Share

About the Author

Gil Fink
Technical Lead sparXys
Israel Israel
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. 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 co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

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