Gracefully Detect Old Browsers and Fallback from HTML5

HTML5 rocks! It even says so in this (highly recommended) great web tutorial, but there are still a lot of browsers out there, that still do not support HTML5, or some of it’s features.

First, What is HTML5?

Wikipedia defines HTM5 – HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997[1]) and as of September 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.

How do I find out which features are supported in each browser?

HTML5Rocks keeps track for each features support in each browser another cool site to check would be caniuse.

Now, the really issue is what do you do at run-time? how do you gracefully fallback when there is no support for the great feature you have implemented using HTML5.

There are two way to detect and fallback from HTML5, the right way, and the wrong way

So here they are:

WRONG WAY – On the server-side, check the User Agent header and serve different pages based on the user agent header… Not recommended – first, there a lot of  User Agents, second, this is a very buggy approach because headers change and are not deterministic (FF can easily send IE headers).

RIGHT WAY – Use JavaScript to detect when there is no support for a HTML5 feature (AKA object detection) here is an example:

 function start(){ if(supports_canvas()){ // Do funky HTML5 canvas fun }else{ // fallback to boring old HTML } } function supports_canvas() { return !!document.createElement('canvas_bogus_name').getContext; } 

 

Have fun and support HTML5:

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

1 Response

  1. web guy says:

    this wont work if they have disabled javascript and using something like the tag would fail.. if they didn’t have javascript. Using server side scripting would be better since users cant turn that off.

Leave a Reply

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