Modernizr love – lets me use HTML5 on any browser

By: Susan Ibach, December 20, 2011

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:

function supports_canvas() {

return !!document.createElement(‘canvas’).getContext;

}

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

if (Modernizr.canvas) {

   //…do the cool canvas stuff

} else {

   //…do something else ‘cuz canvas won’t work

}

So if you are thinking of playing around in HTML5, step 1: go get Modernizr!

Tagged with: , , ,
Posted in Training & Webcasts

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Avatar of Susan Ibach

Susan Ibach

What people are saying about #webnotwar

.@trishgarner thanks! How can one thing be so awesome and stupid at the same time? Lol #OGT14 #webnotwar

It's official. I've bought my new bike for the Open Government Tour! I pick it up next week :-) 3.bp.blogspot.com/-LiV9zIcK4wk/U… #OGT14 #webnotwar

The Genesis of the Open Government Tour: webnotwar.ca/genesis-open-g… - An introspective look at how @richardpietro is making #webnotwar Retweeted by Make Web Not War

The Genesis of the Open Government Tour: webnotwar.ca/genesis-open-g… - An introspective look at how @richardpietro is making #webnotwar

I submitted my @GTEC speaker application yesterday and in the spirit of being Open, here it is myeinsteinjob.blogspot.ca/2014/04/my-gte… #OGT14 #WebNotWar Retweeted by GTEC

I submitted my @GTEC speaker application yesterday and in the spirit of being Open, here it is myeinsteinjob.blogspot.ca/2014/04/my-gte… #OGT14 #WebNotWar

As part of #OGT14, I will be hosting 2-3 "practice events" in June in Southwestern Ontario...here is why: youtube.com/watch?v=OT4y2N… #webnotwar

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar Retweeted by Susan Holt

Here's a scary #OGT14 reality check: for a period of three months, I will be "Richard Pietro of no-fixed address" #webnotwar

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar Retweeted by Nick Scott

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar

The new #webnotwar community camera has arrived. I had no idea gopro was that small... It's like a pygmy camera lol pic.twitter.com/ecYz6CH48X

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Alexis Smirnov

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Victor Stinner

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Montréal-Python

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

I'm happy to say that we have one more confirmed City Champion for #OGT14 ...@_Chris_Moore for #YEG! Thanks Chris! #WebNotWar Retweeted by Chris Moore 