[HTML5] Detecting HTML5 Features

HTML5 consists of many features and browsers will support them gradually. Therefore it is important to understand how to detect whether the browser supports HTML5 features. The best way is to use JavaScript Libraries such as “Modernizr“.

 

1. Techniques of Detection

There are well known techniques to check whether a browser supports a particular feature.

  • Check if a certain property exists on a global object
  • Create an element and check if a certain property or method exists (and works) on that element

When you check the existence of a property or method, you can use the following 2 techniques:

  • double-negative trick : null or undefined values are converted to “false”. By applying the “!” operator 2 times, you can safely convert the property or method to a boolean value.
  • in operator : The “in” operator returns true if the specified property is in the specified object.
alert( !!navigator.geolocation );
alert( 'geolocation' in navigator );

I will mix these techniques in the following examples in turns to show both methods are valid.

 

2. Checking HTML5 APIs

Many of the HTML5 features are accessed using the objects defined in the global objects.

  • Geolocation : navigator.geolocation
  • Local Storage : window.localStorage
  • Web Workers : window.Worker 
  • Offline Web Applications : window.applicationCache
function support_geolocation() {
  return 'geolocation' in navigator;
}
function support_localStorage() {
  return !!window.localStorage;
}
function support_webWorker() {
  return 'Worker' in window;
}
function support_offlineApp() {
  return !!window.applicationCache;
}

 

3. Canvas

You can check whether the “getContext()” method exists to test the canvas feature.

function support_canvas() {
  return !!document.createElement('canvas').getContext;
}

Canvas Text API was added some time after the canvas was introduced. Therefore it needs to be checked separately.

function support_canvas_text() {
  if (!support_canvas()) return false;
  var context = document.createElement('canvas').getContext('2d');
  return typeof (context.fillText) === 'function';
}

 

4. Video

You can check whether the <video> element has the “canPlayType()” method.

function support_video() {
  return 'canPlayType' in document.createElement('video');
}

 

5. Input Types

HTML5 adds 13 new types (using the “type” attribute). To test whether these types exist or not requires some more efforts.

  • Create an “input” element
  • Set the “type” attribute to check
  • Read the value of the “type” attribute again. If the browser does not support the type, the type still remains as a default value “text”.
function support_input_color() {
  var inputElement = document.createElement('input');
  inputElement.setAttribute('type', 'color');
  return (inputElement.type != 'text');
}
function support_input_range() {
  var inputElement = document.createElement('input');
  inputElement.setAttribute('type', 'range');
  return (inputElement.type != 'text');
}

 

6. Modernizr

Modernizr is a JavaScript library that detects the availability of web technologies such as HTML5 and CSS3.

You can easily access the availability of features through the central object “Modernizr“. Note that the properties are all lower-case.

alert(Modernizr.geolocation);
alert(Modernizr.localstorage);
alert(Modernizr.sessionstorage);
alert(Modernizr.webworkers);
alert(Modernizr.websockets);
alert(Modernizr.applicationcache);
alert(Modernizr.draganddrop);

alert(Modernizr.canvas);
alert(Modernizr.canvastext);

alert(Modernizr.video);
alert(Modernizr.audio);

alert(Modernizr.inputtypes.color);
alert(Modernizr.inputtypes.range);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s