Use Modernizr to make HMTL5 render correctly on older browsers
HTML5 is a joy to work with compared to older versions, given the amount of visual and semantic control it gives authors of websites. However, as I realized while hacking up vepa.in, one of the problems with using it is that older browsers, especially Internet Explorer IE6, IE7, and IE8 don't support it. Enter Modernizr! Modernizr is the perfect solution to the problem of rendering a site developed in HTML5, correctly on older browsers.
- Download modernizer.js and place it at the location on your web server where you keep your scripts.
Add the following line to the headers of your web pages:
The full Modernizer script weighs in at about 50Kib. So if it is used directly, page weight will increase considerably. But the Modernizr websites's download page allows you to trim down the size of the script by downloading a custom version that only contains those features you need in a minified form. The technique used, as recommended on the website was to use the full featured script for development and then experiment with turning off featuers to create the final minified script on the production website.
The effect is magical. The figure below shows how this site looked on IE7 before and after the use of modernizer. For comparison, I also show the image of how the site looks on IE 9.
Notice that the rendering on IE7 is not quite the same as IE9, but comes reasonably close to the design intent of the HTML5 elements on the page. There are many more capabilities that Modernizr provides. Check out their website for the details.