You are here: Home ‣ Dive Into HTML5 ‣
DETECTING HTML5 FEATURES
Show table of contents
DIVING IN
Ou may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation.
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, every, every – 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:
Check if a certain property exists on a global object (such as window or navigator).
Example: testing for geolocation support
Create an element, then check if a certain property exists on that element.
Example: testing for canvas support
Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
Example: testing which video formats are supported
Create an element, set a property to a certain value, then check if the property has retained its value.
Example: testing which types are supported
MODERNIZR, AN HTML5 DETECTION LIBRARY
Modernizr is an open source, MIT-licensed
JavaScript library that detects support for many HTML5 & CSS3 features. You should always use the latest version. To use it, include the following element at the top of your page.
Dive Into HTML5
…
↜ It goes to your
Modernizr runs automatically. There is no modernizr_init() function to call. When it runs, it creates a global object called Modernizr, that contains a set of Boolean properties for each feature it can detect. For example, if your browser supports the canvas API, the Modernizr. canvas property will be true. If your browser does not support the canvas API, the Modernizr. canvas property will be false.
If (Modernizr. canvas) {
// let’s draw some shapes!
} else {
// no native canvas support available 🙁
}
❧
CANVAS
Your browser supports the canvas API.
HTML5 defines the element as “a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. HTML5 defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations.
Checking for the canvas API uses detection technique #2. If your browser supports the canvas API, the DOM object it creates to represent a element will have a getContext() method. If your browser doesn’t support the canvas API, the DOM object it creates for a element will only have the set of common properties, but not anything canvas-specific.
Function supports_canvas() {
return!!document. createElement(‘canvas’).
(No Ratings Yet)