Detect HTML5 Features

  • Avinash
  • 1
  • Aug 08, 2014
  • Tips & Tricks

HTML5 is taking major market share nowadays, there are number of good features released with HTML5 which can help us to make the web better place. Most of the features are available in all major latest browsers so we can use most of the features. But the fact is we should not forget old browsers (atleast for sometime) when we have new version or latest browsers are available.

HTML5 Feature Detection

Now another fact is client will always want new things but still want to support old ones. So to build such product which works cross browser, only thing we can do is feature detection of HTML5. So certain code should only execute when particular feature is available in browser.

We have Modernizr available which is very good JS library to perform feature detection of HTML5 and CSS3. This library will perform detection for all features by default (you can customize ofcourse), but if you are looking to perform detection of any particular feature and not want to include whole library you are at right place. Yes in this article we will see how we can detect HTML5 features with pure vanila JS and with Modernizr as well.

Canvas

// JS return !!document.createElement('canvas').getContext; // Modernizr if (Modernizr.canvas) { }
// JS
return !!document.createElement('canvas').getContext;
   
// Modernizr
if (Modernizr.canvas) {

}

Video

// JS return !!document.createElement('video').canPlayType; // Modernizr if (Modernizr.video) { }
// JS
return !!document.createElement('video').canPlayType;
   
// Modernizr
if (Modernizr.video) {
     
}

Local Storage

// JS return 'localStorage' in window && window['localStorage'] !== null; // Modernizr if (Modernizr.localstorage) { }
// JS
return 'localStorage' in window && window['localStorage'] !== null;
   
// Modernizr
if (Modernizr.localstorage) {
     
}

Web Workers

// JS return !!window.Worker; // Modernizr if (Modernizr.webworkers) { }
// JS
return !!window.Worker;
   
// Modernizr
if (Modernizr.webworkers) {
     
}

Offline Web Application

// JS return !!window.applicationCache; // Modernizr if (Modernizr.applicationcache) { }
// JS
return !!window.applicationCache;
   
// Modernizr
if (Modernizr.applicationcache) {
     
}

Geolocation

// JS return 'geolocation' in navigator; // Modernizr if (Modernizr.geolocation) { }
// JS
return 'geolocation' in navigator;
   
// Modernizr
if (Modernizr.geolocation) {
     
}

Placeholder Text

// JS var i = document.createElement('input'); return 'placeholder' in i; // Modernizr if (Modernizr.input.placeholder) { }
// JS
var i = document.createElement('input');
return 'placeholder' in i;
   
// Modernizr
if (Modernizr.input.placeholder) {
     
}

Form Autofocus

// JS var i = document.createElement('input'); return 'autofocus' in i; // Modernizr if (Modernizr.input.autofocus) { }
// JS
var i = document.createElement('input');
return 'autofocus' in i;
   
// Modernizr
if (Modernizr.input.autofocus) {
     
}

Microdata

// JS return !!document.getItems; // Modernizr does not provide support to detect Microdata
// JS
return !!document.getItems;
   
// Modernizr does not provide support to detect Microdata

History API

// JS return !!(window.history && history.pushState); // Modernizr if (Modernizr.history) { }
// JS
return !!(window.history && history.pushState);
   
// Modernizr
if (Modernizr.history) {
     
}

So this was the feature list I have collected so far, let me know if you have any more feature detection to share in this list?

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • John D

    Nice Collection dude, will make handy :)