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, 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.

Modernizr is a polyfiill. A polyfill is a piece of code, usually Javascript, also often a plugin, that provides technology not natively supported by a web browser. Modernizer allows older browsers to recoginize a wide variety of HTML5 features. And using it turned out to be extremely simple.

  1. Download modernizer.js and place it at the location on your web server where you keep your scripts.
  2. Add the following line to the headers of your web pages:
    <script type="text/javascript" src="modernizr.js"></script>

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. home page screenshot when rendered on IE7 without using modernizr home page screenshot when rendered on IE7 using modernizr home page screenshot when rendered on IE9
Screenshots of the home page when rendered on IE7 without modernizr (first image), with modernizr (middle), and on IE9 (last.)

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.