</script>
</body>
</html>
When you run this example you will find out whether or not the postMessage and localStorage features are available on your browser.
This same method works to detect the new HTML5 event interfaces, such as the new device motion and orientation events. Instead of checking for the presence of the event handler (e.g., ondevicemotion) directly, check to see if the event interface is present (e.g., window.DeviceMotionEvent as shown in Listing 6-6).
Listing 6-6. Detecting Support for Event Interfaces
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
</head>
<body>
<h1>Feature Detection</h1>
<script>
if (window.DeviceMotionEvent) {
alert('This browser supports the device motion API!');
} else {
alert('This browser does not support the device motion API.');
}
</script>
</body>
</html>
Detecting Support for New HTML5 Elements
There are two main ways to detect support for the new elements:
• Create an instance of the element and then test the result for expected properties and methods. If the browser does not know how to implement the element, then the expected properties will be undefined. This test is useful for elements like canvas and video, which implement their own unique properties and methods.
• Create an instance of the element and then test the interface it implements. If the browser does not know how to implement the element, it will implement the HTMLUnknownElement interface (see hereafter for details). This test is useful for elements that do not implement unique properties and methods, such as structural elements.
Listing 6-7 demonstrates the first method.
Listing 6-7. Detecting Support for the Canvas Element
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
</head>
<body>
<h1>Feature Detection</h1>
<script>
// Test for canvas support.
var testCanvas = document.createElement('canvas');
if (testCanvas.getContext) {
alert('This browser supports the canvas element!');
} else {
alert('This browser does not support the canvas element.');
}
// We are done with the test element, so delete it.
testCanvas = null;
</script>
</body>
</html>
This example creates a canvas element and then tests for the presence of the getContext method. If the browser knows how to implement the canvas element properly, the method will be present, otherwise it will be undefined.
■Tip Creating elements for testing without attaching them to the DOM is a fairly safe thing to do. these
elements exist in memory (and thus take up physical memory space) but are not part of the DOM and will not affect the rest of your document. Because they take up memory, it’s always a good idea to remove them when they are no longer needed by setting their reference to null.
Detecting expected properties and methods only works for elements that implement properties or methods that are unique outside of basic element properties and methods. What about elements like article or aside that don’t implement unique properties or methods? The answer lies in the interface hierarchy defined by the HTML standard.
The HTML standard defines a base interface called HTMLElement with a set of properties and methods common to all HTML elements: title, lang, focus, blur, and so on. The standard also defines a set of child interfaces that inherit from it, such as HTMLDivElement, HTMLTitleElement, and the like. Most supported elements inherit from these child interfaces and so share the base properties and methods of the HTMLElement interface. The standard also defines a child interface for unsupported elements called HTMLUnknownElement. You can create any arbitrary element using document.createElement; if the element is not supported it will inherit from the HTMLUnknownElement interface.
Determining which interface a particular element implements is a simple matter of checking the element’s toString method. When you call that method on an element it will output the name of the interface that it implements, as Listing 6-8 demonstrates.
Listing 6-8. Determining the Interface That an HTML Element Implements
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
</head>
<body>
<h1>Feature Detection</h1>
<script>
// Create a div.
var myDiv = document.createElement('div');
alert(myDiv.toString());
// Create a fake element.
var myFake = document.createElement('itsafake');
alert(myFake.toString());
// Delete elements now that they are no longer needed.
myDiv = myFake = null;
</script>
</body>
</html>
This example creates two elements, a div and a fake element, and then calls each element’s toString method. As you can see, the itsafake element implements the HTMLUnknownElement interface. This gives you an easy test for unsupported elements, as shown in in Listing 6-9.
Listing 6-9. Testing for Supported Elements
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
</head>
<body>
<h1>Feature Detection</h1>
<script>
// Test for support for the article element.
var myArticle = document.createElement('article');
if (myArticle.toString().indexOf('HTMLUnknownElement') > -1) { alert ('This browser does not support the article element.');
} else {
alert('This browser supports the article element.');
}
// Create a fake element and test for support.
var myFake = document.createElement('itsafake');
if (myFake.toString().indexOf('HTMLUnknownElement') > -1) { alert('This browser does not support the itsafake element');
} else {
alert('This browser supports the itsafake element');
}
myArticle = myFake = null;
</script>
</body>
</html>
In this example you test for support for the article element as well as for the itsafake element by checking for the presence of the substring 'HTMLUnknownElement' within the value returned by each element’s toString method.