How To Check Browser For HTML 5 Support

Client-Side Development HTML
1

I wrote a brief article on how to check for HTML 5 on client browser and I thought I should share. You can read the full article on http://blog.silasolatayo.com/check-browser-for-html-5-support/

It’s very simple; Add a simple HTML 5 element to your page and hide it the style=”display:none;”
< input class=“thisDate” style=“display: none;” type=“date” />

Just do a simple jquery ‘input type’ validation on the hidden field
$(function(){
if ($(’.thisDate’)[0].type !== ‘date’) {
// showPopMessage or redirect
}
});

This is just one of the simple methods.
I hope it help someone.

2

Brillaint!! Thanks for the tip.

3

I found it better to use the element id rather than the class. So the jquery becomes:
$(function(){
if ($(’#thisDate’).type !== ‘date’) {
// showPopMessage or redirect
alert(“Browser supports HTML 5”);
}
else
{
alert(“No HTML5 support, videos won’t play”);
}
});

The HTML then becomes:
< input class=“thisDate” style=“display: none;” type=“date” />

Otherwise, browsers like Chrome and Safari, which I KNOW support HTML5, will keep saying “No HTML5 support…”

4

You won’t get any alert if the browser support input type ‘date’, which is only available in HTML5. To test for video tag, why not use


   var canPlay = false;
   var v = document.createElement('video');
   if(v.canPlayType && v.canPlayType('video/mp4').replace(/no/, '')) {
       canPlay = true;
   }
   alert(canPlay);

http://diveintohtml5.org/detect.html#video-formats

5

Cool, I’ll try it now. You’re a star!

6

Why don’t you try Modernizr. It can check for various HTML5 features like Canvas, Video, Local Storage in a fine grained manner.

http://www.modernizr.com/

7

@damilare
I know about it; but i usually think of a quick & simple way of doing something. and also what if there is no framework for that…
All i needed was to check if the browser support one HTML5 tag … in a simple way.

8

I think i go with damilare, Modernizr seems to be the smart way to go, plus you can use yepnope.js to create a fallback when some features are not supported.

PS: you can configure your Modernizr download here: http://modernizr.github.com/Modernizr/2.0-beta to limit your download to only tests and features you need, it also comes with yepnope.js