Friday, May 14th, 2010
Mark helps you detect everything in HTML5
Category: HTML
Mark Pilgrim has a new appendix to his awesome HTML5 book, which collects all of the ways in which you can do feature detection for HTML5.
For example:
- <audio>: return !!document.createElement(‘audio’).canPlayType;
- <device>: return ‘type’ in document.createElement(‘device’);
- <iframe sandbox>: return ‘sandbox’ in document.createElement(‘iframe’);
This also highlights how it would be nice to have a way to do CSS feature detection. In theory CSS is declarative, but in practice we are using it to do things like animations now, and we need a way to nicely degrade gracefully.
Anyway, thanks for yet another great resource, Mark.
Make sure to check out Modernizr as a tool that does this checking for you… as well as some CSS tests.
Related Content:
5 rating from 1 votes
WTH
!!string.replace(/no/, ''). Why not just usestring !== "no"?Some of these are non-obvious. Why not write a jQuery plugin to do all the heavy lifting? Detection mechanisms may change in the future, as well, so it would be nice to reference a library which could track changes on its own.
EliGrey,
The actual spec expects the return value to be an empty string (”); my suspicion is that some browsers actually return ‘no’. Replacing ‘no’ with ” targets both possible return values with much shorter code. What it doesn’t do is address false positives with the return value ‘maybe’.
Ultimately, I think detecting audio and video programmatically is foolish and unnecessary: both elements were designed to properly fall back to alternative content if they aren’t supported. There is nothing that can be accomplished with such detection that can’t be accomplished with plain HTML.
@Dion — Modernizr indeed does do feature detection for many of the newer CSS features, including transitions and transforms: http://www.modernizr.com/
But I dig what Pilgrim is doing here, as always.
I believe Ajaxian has covered Modernizr before, but in case everyone forgot about it, it’s lovely. http://www.modernizr.com/ – It’s an entire feature detection library that does all/most of this stuff already (I didn’t actually do a feature by feature check, but it’s certainly close).
Modernizr is great — it’s the first code I turn to if I need to feature detect just one or two capabilities — but remember not to trust it blindly. It usually takes a uniform approach (vendor extension + feature name or feature’s feature name), which can fail if a browser is lying or is queryable in a different way than others.
As an example (and hopefully I’m not out of date here), Modernizr will report that Windows Webkit has full support for 3D transforms because the WebkitPerspective style property exists. The property does exist and can be set, but is always ignored.
Really hard to work around problems like that, just something to keep in mind.
@bckenny,
Yeah we had a false positive with 3D transforms but it’s fixed now. :)
There are some problems with the tests that Mark published (like when cookies are disabled that localStorage test will break), but we’ll work that out. I’m really glad he published this.
Modernizr is great. I was one of its earliest boosters. I wrote an entire chapter about it ( http://diveintohtml5.org/detect.html ), and I’ve helped the developers expand their detections. Meanwhile, some of these snippets are taken directly from Modernizr. There are things in this guide that aren’t (yet) in Modernizr, and several things in Modernizr (like detecting @font-face support) that are too complicated to include in my book.
Bottom line: you can’t go wrong with Modernizr, but some people can’t or don’t want to include an entire library, and they may have difficulty picking out the one test they need from Modernizr’s source code. It’s all good.
@Paul: I’ve updated the localStorage and sessionStorage tests from Modernizr trunk. Thanks!