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

... And @brucechau of @WebNotWar who is no longer just a patron of #OGT14, but is bordering on sainthood! #WebNotWar

My response to @BruceChau's ALS challenge! I now nominate Fed, Prov, and Muni Open Data Leads! youtube.com/watch?v=0Bricx… #OGT14 #WebNotWar

Wondering about the next #OpenGov Tour event? @WebNotWar is keeping a list with eventbrite links! webnotwar.ca/OGT14/ #OGT14 #WebNotWar Retweeted by Alan L. Stewart

Wondering about the next #OpenGov Tour event? @WebNotWar is keeping a list with eventbrite links! webnotwar.ca/OGT14/ #OGT14 #WebNotWar Retweeted by Global Commons