Click here to Skip to main content
13,899,955 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 10 Jan 2011
Licenced CPOL

Detecting HTML5 Features Using Modernizr

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

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">
if (!{
  // if no native support, create your own search box

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.


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.


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


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:

You may also be interested in...


Comments and Discussions

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