Tutorial: Get Your HTML5 Working Everywhere: Browser and Feature Detection

During the ancient dyadic browser wars, when IE and Netscape were the USA and USSR of the web (but which was which?), and IE grew (for a while) closer and closer to Windows, web developers could ask just one question: which browser is rendering my pages?

Now, as the browser theater has expanded, and the rendering machines are multiform, and the differences among the browers are no longer so clear-cut -- the web developer's old browser worry has mutated into a problem potentially much bigger and more complex.

But there's another way: worry about the features, not the browser.

The reason is simple. Since no browser today is seeking dominance quite like fifteen years ago, all the browsers are more or less trying to conform to, if also shape, the new, universal HTML5 standard.

Of course, not all browsers quite agree on what HTML5 is. But they differ only in the details -- not in their basic happiness with HTML5 (whatever that may be/come).

In this spirit, Sascha Corti has written a great little tutorial on browser and feature detection. You'll learn how to detect browsers in JavaScript, if you like (more useful for the really antiquated browsers), or specific features, which (for any non-geezer browser) might be a better idea.

For example, here's how easy it is to detect whether HTML5 Canvas is supported:

<script type="text/javascript">
  functionisCanvasSupported()
  {
    var elem = document.createElement('canvas');
    return!!(elem.getContext && elem.getContext('2d');
  }
</script>

The function just returns true or false.

Or, if you'd rather write directly for elegant degradation, here's how to use the HTML5 <video> element with a Silverlight fallback:

<video>
    <source src="video.mp4" type='video/mp4' />
    <source src="video.webm" type='video/webm' />
    <object type="application/x-silverlight-2">
        <param name="source" value="http://url/player.xap">
        <param name="initParams" value="m=http://url/video.mp4">
    </object>
    Download the video <a href="video.mp4">here</a>.
</video>

Sascha's article is full of great snippets and explanations like this. He even walks you through every step of debugging and testing (something tutorials often leave up to the reader), using in-browser developer tools.

If you want to ride the HTML5 wave but are careful enough to look for the sandbars that will hold you back, check out the article and maybe save some of the snippets for later use and re-use.