How To Check Browser For HTML 5 Support

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

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
if ($(’.thisDate’)[0].type !== ‘date’) {
// showPopMessage or redirect

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

Brillaint!! Thanks for the tip.

I found it better to use the element id rather than the class. So the jquery becomes:
if ($(’#thisDate’).type !== ‘date’) {
// showPopMessage or redirect
alert(“Browser supports HTML 5”);
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…”

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;

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

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

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.

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: to limit your download to only tests and features you need, it also comes with yepnope.js