HTML5: Up and Running

Detection Techniques

When your browser renders a web page, it constructs a Document Object Model (DOM), a collection of objects that represent the HTML elements on the page. Every element—every <p>, every <div>, every <span>—is represented in the DOM by a different object. (There are also global objects, like window and document, that aren’t tied to specific elements.)

All DOM objects share a set of common properties, but some objects have more than others. In browsers that support HTML5 features, certain objects will have unique properties. A quick peek at the DOM will tell you which features are supported.

There are four basic techniques for detecting whether a browser supports a particular feature. From simplest to most complex:

1. Check if a certain property exists on a global object (such as window or navigator).

   For an example of testing for geolocation support, see Geolocation.

2. Create an element, then check if a certain property exists on that element.

   For an example of testing for canvas support, see Canvas.

3. Create an element, check if a certain method exists on that element, then call the method and check the value it returns.

   For an example of testing which video formats are supported, see Video Formats.

4. Create an element, set a property to a certain value, then check if the property has retained its value.

   For an example of testing which <input> types are supported, see Input Types.