HTML and CSS Reference
In-Depth Information
Determining Capabilities, Not Browsers
It's not all doom and gloom, however. With the right approach, you can develop for both the now and the future.
The most important aspect of this approach is the idea of testing the capabilities of browsers rather than trying
to identify the browser itself.
An initial naive way to check for support (which was common in pre-HTML5 days) would be to scour the
Internet to figure out which browsers support, for example, the Canvas tag and then match versions. You might
try something like the following code:
WARNING The following code is again an example of what not to do.
var canvasSupported = (isIE() && ieVersion >= 9) ||
(isFirefox() && ffVersion >= 1.5) ||
(isOpera() && oVersion >= 9) ||
... And so on ..
As you probably figured out, this is a bad idea. It suffers from needing to keep up-to-date on all the different
types of browsers that people use and knowing what's supported in which. It's a recipe for disaster. Life would
be good if you could just write
function isCanvasSupported() {
// Directly check if the browser knows about the canvas element
Actually you can do just that, and you can do that for just about every feature you care about in HTML5.
The most common method is to try to create an element and check if it supports a certain method. Or if the
functionality is not per DOM-element, you can just check if the browser has a necessary method. Following is
an example of each:
function isCanvasSupported(){
// First create a <canvas> element
var elem = document.createElement('canvas');
// Next make sure it supports getContext and can return a 2D context
return !!(elem.getContext && elem.getContext('2d'));
function isGeolocationSupported() {
// Check if the geolocation object is defined
return navigator.geolocation;
Now, before you go off and check the spec and write functions for each of the features you want to support,
the good people behind Modernizr ( have done all the hard work for you, all for the cost of
loading one script that is less than 7 kb when served compressed. If you want to pull the file size down further,
you can add only the checks you need to your custom download.
Modernizr enables you to reduce feature detection checks to the following:
Search WWH ::

Custom Search