<< Back to the blog

Detecting HTML5 Features




By @islamzatary

FEATURES DETECTING

How can I start using HTML5 if older browsers don’t support it?
HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,”.
But you can detect support for individual features, like canvas, video, or geolocation.

DETECTION TECHNIQUES

When your browser renders a web page, it constructs DOM.
a collection of objects that represent the HTML elements on the page, Every element is represented in the DOM by a different object.
And there are also global objects, like window and document.
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.

DETECTION TECHNIQUES

There are four basic techniques for detecting whether a browser supports a particular feature: 1. Check if a certain property exists on a global object (such as window or navigator).
2. Create an element, then check if a certain property exists on that element.(document.createElement('canvas').getContext;)
3. Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
4. Create an element, set a property to a certain value, then check if the property has retained its value.

HTML5 Shiv

HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript.

MODERNIZR LIBRARY

Modernizr is an open source library that detects support for many HTML5 & CSS3 features, so its aims to provide this feature detection in a complete and standardized manner.
Modernizr runs automatically.
When it runs, it creates a global object called Modernizr, that contains a set of Boolean properties for each feature it can detect.
Modernizr.canvas

Start Test (Normal vs Modernizr)

CANVAS
function supports_canvas_text() { if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function'; }

Modernizr.canvastext

VIDEO

function supports_video() {
return !!document.createElement('video').canPlayType;
}

Modernizr.video

VIDEO FORMATS

function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); }
ogg => theora, webm => vp8

if (Modernizr.video) {
if (Modernizr.video.webm) {
} else if (Modernizr.video.ogg) {
} else if (Modernizr.video.h264){}
}

LOCAL STORAGE

function supports_local_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch(e){
return false;
} }

Modernizr.localstorage
Be careful Modernizr attribute is called localstorage (all lowercase), while JS called localStorage

WEB WORKERS

function supports_web_workers() {
return !!window.Worker;
}

Modernizr.webworkers

OFFLINE WEB APPLICATIONS

function supports_offline() {
return !!window.applicationCache;
}

Modernizr.applicationcache

GEOLOCATION

function supports_geolocation() {
return 'geolocation' in navigator;
}

Modernizr.geolocation

INPUT TYPES

var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";


Modernizr.inputtypes.date
Modernizr.input.autofocus

PLACEHOLDER TEXT

function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}

Modernizr.input.placeholder

Modernizr Test & Statistic


http://modernizr.github.io/Modernizr/test/

http://trends.builtwith.com/javascript/Modernizr

HTML5 Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites.

http://html5boilerplate.com/

Paul Irish

HTML5 Boilerplate Demos



https://habita.la/

http://leonardomaia.com.br/

Polyfills in HTML5

A polyfill is a browser fallback, made in javascript, that allows functionality you expect to work in modern browsers to work in older browsers.

HTML5 Cross Browser Polyfills

DETECTING HTML5 FEATURES




Practical



Wrapping up








<< Back to the blog

by @islamzatary