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.

Posted by Dion Almaer at 11:19 am

3.7 rating from 3 votes


Comments feed TrackBack URI

WTH !!string.replace(/no/, ''). Why not just use string !== "no"?

Comment by EliGrey — May 14, 2010

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.

Comment by stefankendall — May 14, 2010


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.

Comment by eyelidlessness — May 14, 2010

@Dion — Modernizr indeed does do feature detection for many of the newer CSS features, including transitions and transforms:

But I dig what Pilgrim is doing here, as always.

Comment by miketaylr — May 14, 2010

I believe Ajaxian has covered Modernizr before, but in case everyone forgot about it, it’s lovely. – 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).

Comment by SlexAxton — May 14, 2010

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.

Comment by bckenny — May 14, 2010


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.

Comment by PaulIrish — May 14, 2010

Modernizr is great. I was one of its earliest boosters. I wrote an entire chapter about it ( ), 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.

Comment by MarkPilgrim — May 14, 2010

@Paul: I’ve updated the localStorage and sessionStorage tests from Modernizr trunk. Thanks!

Comment by MarkPilgrim — May 14, 2010

Leave a comment

You must be logged in to post a comment.