The HTML5 specification and related technologies include many new features that promise to make websites more like applications. This includes providing vivid graphics, better user experiences, dynamic content, and even offline functionality through easier-to-access APIs.
In fact, one could argue that HTML5's real strength is that it opens up a whole new set of APIs — like canvas, Web Workers, geolocation, or video — for developers. While most modern browsers, including Mozilla Firefox, Google Chrome, Opera, Microsoft Internet Explorer (IE) 9, and Safari all offer some form of HTML5 support, that support does differ from vendor to vendor and may even be non-existent in older browsers like IE8.
As a best practice, it is a good idea to check to make sure an HTML5 feature or API is actually available before you try to use it. Mark Pilgrim's amazing online explanation, "Dive into HTML5," includes, perhaps, the best-known discussion of HTML5 feature detection — even documenting what have become the standard JavaScript methods for identifying available features.
Pilgrim's suggestions take advantage of the document object model (DOM) and the idea that DOM objects have a known and sometimes unique set of available properties. By creating an HTML5 object — or calling one that may already exist on the page — we can test to determine if the desired HTML5 feature is one the browser supports.
Check Existing Attributes
Here is an example of testing for geolocation.
if(navigator.geolocation){
/* do something */
console.log ('geolocation is a go');
} else {
/* do try to use geolocation */
console.log ('don\'t geolocate');
}
In the example, I used a simple conditional statement (if) to learn whether or not the DOM object navigator had an attribute called geolocation. If the statement returns true, I can use geolocation. In the example, I used console.log to demonstrate.
This same test could also be written — as Pilgrim recommends — using a double negative logical operator to ensure a Boolean response.
function testGeolocation(){
return !!navigator.geolocation;
}
console.log(testGeolocation());
Calling testGeolocation would result in either a true or false response. The !! can be a little unfamiliar, since it is basically using the negation operator twice.
Create Elements in Order to Test
Some HTML5 features are not always present in the DOM. For example, if you want to know if you can use the canvas API to, say, create a page turning effect or dynamically update some graphic based on use input, you will need to attempt to create the element and then test a known attribute of the element.
Here is a function that will accomplish the task, which is again based on Pilgrim's examples. The example first creates a canvas object and looks for the getContent property of that object.
Function testCanvas(){
Return !!document.createElement('canvas').getContext;
}
If I had specific actions that were to follow my detection step, I might also test for HTML5's canvas feature using a ternary operation.
!!document.createElement('canvas').getContext? console.log('Canvas is Supported') : ('Canvas is NOT Supported');
Here you can see the result of the statement above in Google Chrome.
Taking Detection Even Further
For some HTML5 properties, it may be necessarily to go even beyond simple detection. For example, there has been something of a fight over which web video codec will be supported. In general, the web community seems to be leaning toward open source solutions, but some still want proprietary or closed solutions.
To the point, even if a browser supports HTML5 video, it may or may not support the video codec you want to use. In these situations, leading developers, including the much-referenced Pilgrim and the World Wide Web Consortium's Philippe Le Hégaret, suggest creating the element, check to learn if a method of the element exists, and then calling that method to see the return value.
Here is an example that follows this pattern. Notice the use of canPlayType method, which accepts a string representing the video codec you want to test for and returns probably if the user agent is confident that it can render the video type indicated. Finally, I am testing in this case for the open source WebM video format.
function testWebM(){
if(document.createElement('video').canPlayType){
var vid = document.createElement('video');
return vid.canPlayType('video/webm; codecs="vp8, vorbis"');
} else {
return false;
}
}
console.log('WebM support ' + testWebM());
Modernizr 1.6 and Beta 2
For testing just one or two HTML5 features, especially if you foresee a need for specified fallbacks, it often makes sense to write your own HTML5 detection scripts as outlined above. But for testing many features and enabling common fallbacks, it may make sense to use Modernizr.
Modernizr is a relatively lightweight, open-source JavaScript library from Faruk Ateş, Paul Irish, and Alex Sexton that tests for most HTML5 and CSS3 features. The solution also adds class names to various page elements allowing you a level of control over fallbacks.
As an example, using Modernizr, I could test for WebM video with the following code.
If(Modernizr.video.webm){
/* play a WebM video with HTML5 */
} else {
/* fallback to Adobe Flash player */
}
Summing Up
HTML5 offers developers a number of new and powerful APIs that are easy to access using JavaScript. As a best practice, test to ensure that the browser supports a particular HTML5 feature before trying to use it.
Related Articles
- Royalty Free WebM Codec Could Give HTML5 Video and Flash a Boost
- An Introduction to HTML5 Geolocation
- Interview with Ian Hickson on the HTML 5 Specification
