Html5 and the Modernizr

Modernizr is a little javascript api compatible with most modern libraries (jquery, mootools etc..), that allows you to already start using most of HTML5 tags and features, while taking care of all cross-browser compatibility issues for you! This is all over the internet, so there’s not much new I can add. However, here’s a speed guide to making a very basic cross-browser html5 page using Modernizr.

All you need is follow those steps:

  • Use the right DOCTYPE for html5
  • In your CSS it’s important to reset all the new tags’ style rules to get to a common ground on all browsers. For instance: setting their display style to ‘block’, resetting margins and paddings, etc..
  • Using an external css file, it’s not obligatory anymore to mention the type (text/css), however – don’t forget to add the rel=”stylesheet” attribute
  • Download the right modernizr package, that contains all the behaviors you actually need for you page. This is explained in details on Modernizr’s download page
  • Save the Modernizr script file and add the call to it on your page’s head. It’s important to always locate the call to it on the document’s head, right after the last call for your css, as explained in details in the Modernizr’s website.
  • Add the class “no-js” to you html tag. At page loading, this class will be replaced by modernizr to “js”, and at that, modernizr will add a class for each new (either css3 or html5) feature to the html tag, depending on the browser. For instance: It will add the class “canvas” to the html tag in firefox, but the class “no-canvas” in explorer <= 9. By that you will be able to take care of the same element differently for each of these browsers by using the right selector on your stylesheet
  • That’s it! Already at this stage – you can use most of the new html5 tags on your page and be sure that most browsers, even ie6, 7 and 8 are able to recognize them and apply your css rules on them.

If you really feel lazy – someone’s already got his hands dirty for you: The HTML5 Boilerplate is a full kit to give you the kick-start: an html5 webpage already with some basic elements and grid, together with all css reset rules, modernizr and a couple of jquery scripts. Just download it, unzip it, and you’re good to go.