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

@mgifford likewise! Good to meet. Look forward to making #webnotwar together!

Hellllllo Montreal! Spreading #opengov and #opensource goodness makes me "Feel So Good"! #webnotwar @… instagram.com/p/tCIfVmOJIP/

Hellllllo Montreal! Spreading #opengov and #opensource goodness makes me "Feel So Good"! #webnotwar

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Retweeted by Jacques Mailloux

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep @… instagram.com/p/tCADH_uJP9/

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep
Retweeted by Jacques Mailloux

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep @… instagram.com/p/tCADH_uJP9/

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep
Retweeted by Make Web Not War

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Retweeted by Craig Carter-Edwards

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep @… instagram.com/p/tCADH_uJP9/

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep
Retweeted by Craig Carter-Edwards

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep @… instagram.com/p/tCADH_uJP9/

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Retweeted by Laura Wesley

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Retweeted by Celeste Côté

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Retweeted by Head Start Ottawa

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Retweeted by Louisa Taylor

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Many recovering civil servants at #OGT14! #webnotwar @ Ottawa City Hall instagram.com/p/tBlqT2uJND/

Many recovering civil servants at #OGT14! #webnotwar

Hello from final stop in #OGT14 tour in #ottawa Drop by for an interview with @govcampus to share your perspective on #opengov

@fharper @WebNotWar It's only fitting that the #webnotwar mascot has the logo! Once MWNW, always MWNW :P