Beginner Recipe: Testing for HTML5 Features

Earlier you learned how to make browsers recognize the new HTML5 elements and how to use CSS to get them to display properly. But not all browsers support all the new HTML5 features such as canvas or geolocation. Although you still sometimes have to do some “browser sniffing” to get a browser to behave a certain way, this is not a recommended approach, and with the scope of HTML5 and the speed at which browsers are developing, you can instead use feature detection methods. Feature detection requires JavaScript, so you need to make sure your markup is good enough so it “degrades gracefully” and that users with older browsers and JavaScript turned off can still use the site.

In general, the features of HTML5 such as canvas and geolocation, which are part of the HTML5 elements and JavaScript APIs, can be determined to exist or not exist by checking for their presence with JavaScript. In Listing 3.3, you perform a simple check on the browser to determine whether the Geolocation API is available in the browser.