20 June 2012

HTML5 with Modernizr

2012-06-20T22:20:00+08:00  Jason  No comments


There are still lots of issue when come to build a web site to shoot every browsers, as we still see some of the outdated browser like IE7 and IE8 is still used by various company. which I think it can be a headache for people who try to build their web site using HTML5 and CSS3. 

HTML5, it been a good start to have some features supported by some of the browser and if it is not, you will have to work out with some of some polyfill and fallback. In this post I am going to share on how to use Modernizr to detect if bowser is support the HTML5 features.

Ok, What is Modernizr?

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.


Some of you might wonder how we want to use Modernizr to detect HTML5 feature, I will share with you on how it work with some simple example, let say web worker. For those who not sure how Web worker work, you can refer to link http://www.html5rocks.com/en/tutorials/workers/basics/ for some basic briefing on it. 

Let's check on this example below:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <title>Testing Modernizr For HTML5 Web Worker</title>
  <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
</head>
<body>
<script>
      if(Modernizr.webworkers){
          alert("Browser supports Web Workers");
        }
        else{
          alert("Web Workers not supported");
        }   
   </script>
</body>
</html>


With this code you will get alert to check if the browser support HTML5's Web Workers feature.

Google Chrome having a positive test on this features and it supported HTML5's Web Workers feature:
 Firefox is giving the green light on this feature as well:-


IE9 is obviously not support Web Workers.


Theory behind  Modernizr is it adds a large number of classes indicating the browser's capabilities into the html tag with no-js class added beginning of the code.

you can have a check on firebugs for firefox, it will show this:-


if you interested to check out what are the features that can be detected, please go to the link below:-
http://modernizr.com/docs/#features-html5

And please go to Download page to build your production copy, and you can choose what to include on the build itself.

Posted in: , ,

0 comments:

Post a Comment