Detecting HTML5 Features

Welcome back,

so I have finished another chapter, and here is a short summary, what you can learn in this chapter. Its title is "Detecting HTML5 Features" and it introduces 3 basic ways how to check for HTML5 support from browsers. Currently there is a pretty good support especially from mobile browsers, only pain in ass is IE, but starting from version 9+ there should be some support. Also if you would like to run your HTML5 pages in IE there is plenty of other options (Chrome frame, Gears, explorercanvas,...), but none of them is native. About these more in later articles.

So what are therse 3 ways how to detect HTML5 features? Its all about existence of some variables.

1. Property of global object. There are few global objects always available as Window or Document. So example how to detect application cache would be:

return !!window.applicationCache // !! is trick to get the result boolean value, output of operator ! is assigned to left side and it is true/false

2. Create an element and then check for a property on that element

3. Create an element and then check for a method on that element

2. and 3. ways are almost identical, because what are we checking in 3. case is actually a pointer on a function, what is also a propperty, so it would look like this:

return !!document.createElement('video').canPlayType

So this are 3 basic ways, about which is autor talking, but in fact, he is using little bit more of them. I have summarize them in small .js library mastermind.js which you can download also with examples how to use it. On this exapmle you can check, what functionality your browser supports.

---

under the line: HTML5 specification has divided into multiple groups, so there is one for DEVICE, other one for GEOLOCATION or FILES, so if you follow one of them, keep an eye on others, because they also bring some cool new stuff.