Modernizr love – lets me use HTML5 on any browser

HTML5 is so awesome, but doesn’t work on all browsers, modernizr is the first step to supporting old browsers when you write HTML5 code

HTML5 really does rock, with so many great features like the <video> tag, <Audio> tag, new elements like <header>, <footer> and attributes to do cool validation on <input>. But Internet Explorer doesn’t support the same HTML5 features as Firefox. IE10 doesn’t support the same features as IE9. Older browsers don’t support HTML5 at all! Ironic that we have all these hassles with a language that is supposed to make coding for multiple browsers easier.

So where does that leave us, well in familiar territory really. You have to do feature detection so you can run different code for different browsers.

Feature, not browser detection! If you are still doing that, please stop now!!! More and more browsers keep coming out with more and more versions and variations, you are better off doing feature detection so you can just say “hey I want to use this feature, and if this browser doesn’t support it, here is a backup plan.” Okay I’ll get off my anti-browser detection soapbox now.

You can write little JavaScript functions to check if a feature is supported, say for example you decide you want to check if canvas is supported, this would work:

This little function will create a dummy canvas, then uses a getContext to see if it was created (which it wouldn’t be if the browser doesn’t support HTML5), so basically it returns True if the browser can create a canvas, and False if it can’t. Voila! You now have feature detection for canvas.

But I am wayyyyy to lazy to write a function like that for every single HTML5 feature I want to use, which is why I LOVE modernizr. They basically wrote an entire library of functions like that for me (thank you! thank you! thank you!)

Modernizr creates a global object called ..you guessed it… Modernizr that contains a set of boolean properties for each feature it can detect. So if we want to check if canvas is supported instead of writing our own function, we just check the boolean property