I'll hopefully be doing some HTML5 work soon and I came across the Modernizr project, which is very cool for doing feature detection as opposed to browser detection. It does all the heavy (well, not so heavy but tedious) lifting when it comes to detecting if the browser visiting your site supports all the fancy schmancy new features from HTML5 and CSS3. Like websockets, CSS 2D and 3D transforms, web workers, canvas, offline storage, browser databases, video and audio elements and much more awesomeness. Check the link for the complete list. And it's really easy to use too. The nice thing about it is that it does not accomplish this through browser detection, which is very unreliable, but rather through checking for the feature directly by trying to call API functions or creating stuff.

Let's detect!

Load it like this:
<script src="modernizr-1.5.min.js" type="text/javascript" charset="utf-8"></script>
and the next time you need to know it some feature is supported, check the automagically created Modernizr object and see if that property is true or false:
if (Modernizr.canvas) {
   var c = document.createElement('canvas');
}
As a nice bonus it assigns css classes to the html element so you can do different styling based on whether a feature is available or not.
/* In your CSS: */
.no-audio #audio {
   display: none; /* Don't show Audio options */
}
.audio #audio button {
   /* Style the Play and Pause buttons nicely */
}
blog comments powered by Disqus

Published

22 September 2010

Tags