Modernizr: To check the HTML5 and CSS3 compatibilty of browsers

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. Using Modernizr, you can determine which css3 and HTML5 feature to be used in your website. This helps you in detemining which features are available in the user's browser. Since most of the users may use different browser which may have some features and may lack others. Lets see how Modernizr sloves this issue.  

  Mordernizr

I came to know about Modernizr, on visiting the site Evolution of web, this site explains the growth of different browsers along with the technologies. This site uses mostly all css3 properties and animation still manages to behave similar in all the browsers. Then i found that is because of the use of Modernizr. You can get your customized copy of Modernizr from 'Download Modernizr 2'. By default, only html canvas and core extensibilites will be enabled in the download pack. You can choose your extension depending upon your reqirement. For testing purpose you can select all the features and download the pack. Include the Modernizr in the head


<!DOCTYPE html>
<html>
<head>
    <title>Modernizer Demo</title>
    <script src="modernizr.custom.js"></script>
</head>

 

In the html tag add the class 'no-js'. This tag will insist Modernizr script check for the available html5 and css3 features in the user's browser and depending upon the availablity corresponding class names will be added to the body tag replace by the present 'no-js class'


<html class='no-js'>

 

When i viewed the script in Firefox6, these are the classes added to my head tag.


<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage
no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla 
multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity
 cssanimations csscolumns cssgradients no-cssreflections csstransforms 
no-csstransforms3d csstransitions fontface generatedcontent video audio 
localstorage sessionstorage webworkers applicationcache svg inlinesvg smil 
svgclippaths">

 

In the case of IE9, i got this head tag.


<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop 
no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius 
boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients 
no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface 
generatedcontent video audio localstorage sessionstorage no-webworkers 
no-applicationcache svg inlinesvg smil svgclippaths">

So with these class name we could determine which css properties can be applied to which browers.


    #bg {
        background: url(bg-one.png) top left repeat-x;
    }
    .multiplebgs #bg {
        background: url(bg-one.png) top left repeat-x,
	url(bg-two.png) bottom left repeat-x;
    }

The above code illustrates the use of multiple background css in the browsers which has that feature and in other browsers you can use simple background images. since your viewer is not going to view your site in more than one site, it is not a must to make your site to look alike in all the browsers. In the same way you can use all the available class to apply different css3 properties. This feature will only allow you to apply properties that are available in the user's browser, but it will not make the browser to have that feature enabled. i.e, it will not make a IE 6 or 7 browser to have all the css3 properties enabled. But we can even do that using Modernizr, lets discuss about that in the next post.