All Your Detection Belongs to Modernizr
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.
Load it like this:
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:
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.