Detecting HTML5 Features

How can I know that my browser support HTML5?

HTML5 is not one big thing; it is a collection of individual features like canvas, video or …ects
Detection Techniques
There are four basic techniques for detecting whether a browser supports a particular feature. From simplest to most complex:
#1:Check if a certain property exists on a global object (such as window or navigator).For an example of testing for geolocation support.
#2:Create an element, then check if a certain property exists on that element.For an example of testing for canvas support.
#3:Create an element, check if a certain method exists on that element, then call themethod and check the value it returns.For an example of testing which video formats are supported.
#4:Create an element, set a property to a certain value, then check if the property hasretained its value.For an example of testing which <input> types are supported.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
Why use Modernizr?
Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers.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 (Modernizr.feature) {
// return true if your browser support feature like canvas, video
} else {
// return false if your browser dosent support feature
}

Canvas
HTML5 defines the<canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”.and defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations You can check for canvas support using this function:
function supports_canvas() {
return !!document.createElement(‘canvas’).getContext;
}

or we can use Modernizr for check if your browser support canvas.
if (Modernizr.canvas) {
// let’s draw some shapes!
} else {
// no native canvas support available 😦
}

Video
HTML5 defines a new element called for embedding video in your web pages.Checking for video support uses detection technique #2.if your browser dosent support video there is a solution called Video for Everybody!
This solution uses no JavaScript whatsoever, and it works in
virtually every browser, including mobile browsers.
You can check for video support using this function:
function supports_video() {
return !!document.createElement(‘video’).canPlayType;
}

or we can use Modernizr for check if your browser support Video.
Video Formats
Video formats are like languages.The “language” of a video is called a “codec”.Checking for video format support uses detection technique #3.
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement(“video”);
return v.canPlayType(‘video/mp4,ogg or webm; codecs=”avc1.42E01E, mp4a.40.2″,”theora, vorbis”or”vp8, vorbis”‘);
}

The canPlayType() function doesn’t return true or false. In recognition of how com-
plex video formats are, the function returns a string:
“probably”
If the browser is fairly confident it can play this format.
“maybe”
If the browser thinks it might be able to play this format.
“” (an empty string)
If the browser is certain it can’t play this format.
or we can use Modernizr for check if your browser support Video Formats
Local Storage
HTML5 Storageprovides a way for websites to store information on your computer
and retrieve it later.
Checking for HTML5 Storage support uses detection technique #1.You can check for local
storage support using this function
:
function supports_local_storage() {
return (‘localStorage’ in window) && window[‘localStorage’] !== null;
}

Instead of writing this function yourself, you can use Modernizr.
Web Workers
Web workers provide a standard way for browsers to run JavaScript in the background.
With web workers, you can spawn multiple “threads” that all run at the same time,more or less.Checking for web workers uses detection technique #1.This function checks for web
worker support
:
function supports_web_workers() {
return !!window.Worker;
}

Instead of writing this function yourself, you can use Modernizr.
Geolocation
Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust.
Checking for geolocation support uses detection technique #1 Here’s how to checkfor geolocation support:
function supports_geolocation() {
return !!navigator.geolocation;
}

Instead of writing this function yourself, you can use Modernizr
Input Types
Checking for HTML5 input types uses detection technique #4.
function supports_Input_Type() {
if (!supports_Input_Type()) { return false; }
var i = document.createElement(“input”);
i.setAttribute(“type”, “color”);
return i.type !== “color”;
}

Instead of writing this function yourself, you can use Modernizr.
Placeholder Text
Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.
Checking for placeholder support uses detection technique #2.Here’s how to check for placeholder support:
function supports_input_placeholder() {
var i = document.createElement(‘input’);
return ‘placeholder’ in i;
}

Instead of writing this function yourself, you can use Modernizr.
Form Autofocus
use to focus the first input field of a web form automatically.
Checking for autofocus support uses detection technique #2.
You can detect autofocus support with this function:
function supports_input_autofocus() {
var i = document.createElement(‘input’);
return ‘autofocus’ in i;
}

Instead of writing this function yourself, you can use Modernizr.

DevMix Team 😉


by:MohamedIbrahim

,

  1. #1 by AhmedYousef on August 26, 2011 - 11:30 pm

    as you want to test new features of HTML5 you can also use
    http://www.html5test.com

  1. 10 Articles Introduction to HTML5 is Done ! « DevelopersMix's Blog

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: