How to detect HTML 5 compatibility in browser

What is the best way to detect browser compatibility for HTML 5 syntax? And prompt the user if the browser is not compatible?

I understand the tutorial which shows how to test browser compatibility for HTML5. But I am curious to know if that is the only way? Do I need to inspect each and every element?

Check Browser HTML5 Compatibility with PHP

I want to use input types or other features on based HTML5. But mostly browser not compatibility. How can i check user browser is html5 compatibility with only PHP code?. By the way, i didnt like mode

HTML 5 Browser Compatibility Chart – HTML 5 in Old Browsers?

I have just started considering using the HTML 5 api for a Rails/JQuery project, so I can use that great data- attribute to store values. I am worried though about browser compatibility issues. I have

Detect compatibility of the new Html5 tag

How can I detect the compatibility of the new tag .I’m using a method like this (with jQuery): var $mark = $(‘<mark>’); $mark.appendTo(‘html’); var bg = $mark.css(‘background’); if (/rgb/(255/,

How to detect browser supports this HTML5 feature

I want to detect (using javascript/jQuery) whether the user’s browser supports multiple attribute to input type=’file’ tag. A feature of HTML5 to add multiple images. <input type=file name=images

HTML5 sessionStorage compatibility with mobile browser

I want to know the compatibility of HTML5 or more specific sessionStorage in different mobile Browser. I want to know about below browsers: 1. iOS 3.2 onwards 2. Android 2.1 – 2.3 3. Windows phone 7 –

Code to detect mobile browser support for HTML5

I want the code (C# / JavaScript) to detect which mobile browsers are support HTML5. I have the code to detect the HTML5(canvas) compatibility for desktop browsers. But this code is not working for mo

how to detect browser supports HTML5 microdata API

I use the following code to check for HTML5 microdata API support function supports_microdata_api() { return !!document.getItems; } but this is not working properly. How can I solve this problem?

how to detect HTML5 and CSS3 support in IE browser?

currently I am working on project where I have to detect does clients browser supports HTML5 or not, I am using following script to detect HTML5 support it works fine in all browsers except IE. funct

How can I consistently detect browser support for HTML5 search inputs?

I have a search input on an HTML 5 page that I need to work in multiple browsers: <input type=search placeholder=type here… /> I detect whether the browser supports search by seeing wheth

HTML5 Video with full cross browser compatibility

I would like some guidance on the best proven method of creating a HTML5 video section on my website that is fully cross browser compatible, works in a responsive layout ( so not fixed dimensions ) an

Answers

Here is a tutorial of detecting HTML5 compatibility & capabilities :

http://diveintohtml5.ep.io/detect.html

There are alternative HTML5 detectors using similar techniques, but I would suggest to use Modernizr.

To sum up the “score” of HTML5, you can design your own “marking scheme”. Sum up weighted score gives you the total score.

Have a look at Modernizr:

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

Thanks to the new Media Query tests and built-in YepNope.js micro-library as Modernizr.load(), you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance.

It has a lot of built in methods to test for browser features and provides a useful way of providing fallback code for when features you want to use are not supported.

More info: http://www.modernizr.com/

do I need to inspect each and every element?

Nope. Only the parts you want to use that aren’t backwards-compatible.

See Five Things You Should Know About HTML5, especially points 1 and 4.

“HTML5 compatibility” is a very vague thing.

When people ask about HTML5 compatibility, they generally mean “what browsers support these new-ish browser features X, Y and Z which I want to use?”

There are a whole raft of features which have been added to browsers in the last couple of years, and which are now commonly referred to as “HTML5”.

In fact, there aren’t any browsers which support every new feature out there.

What you need to do is work out which features have wide enough support to make them worth using, which features you’d like to use but are happy to work around if you encounter a browser that doesn’t support them, and which features you absolutely have to use to achieve what you want to do.

A fairly comprehensive list of new browser features, along with browser support charts for them all is available at http://caniuse.com/ (if you scroll to the bottom, you’ll see in the overall compatibility table that the very best current browsers only support 89% of features they’ve tested. This will improve over time as new versions are released… but of course, also new features will be introduced too)

For determining at run-time whether the user’s browser supports a given feature, you can use Modernizr. This is a Javascript-based tool which will give you a set of CSS classes and Javascript flags which tell you what features are supported. You can use this to trigger alternate behaviour in your site if the browser doesn’t support a feature you want. (Modernizr also includes the HTML5Shim functionality, which allows IE to at least cope with HTML pages containing new HTML5 elements).

For more cross-browser compatibility, there are a whole range of hacks which have been written to allow older browsers (mainly IE to be fair) to support a range of newer features. You can see a fairly comprehensive list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Obviously, trying to run more than a few of these at once in IE will severely impare your site’s performance, but it can be handy if you need to support one or two features. My favourite at the moment is CSS3Pie, which gives IE6/7/8 support for CSS rounded corners, shadows and gradients.

Hope that helps.

The simplest method : in JS you create a new element, and set the attributes to be a colorpicker (HTML5) in JS, and return the type of the element (it is a picker only if the browser ic HTML5 compatible) :

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

This works on IE 11 (and hopefully other browsers too).

// Detect HTML v5 compatibility
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;

It’s a take from Clement’s answer and the link from Shivan (http://diveintohtml5.info/detect.html). Clement’s answer didn’t work in IE 11.

In my case I use jQuery UI for everything so don’t need Modernizr (also it seemed slower). Reading the rather negative “How to use Modernizr” blog comments supports this assumption.

But now jQuery have split browser compatibility between v1 and v2 development streams, its necessary for people wanting to support non-HTML v5 browsers to load EITHER the v1 or v2 jQuery core script at the start. So this “one liner” HTML v5 detection is perfect. Here’s how I load jQuery properly using the result:

// Use jQuery v2 for HTML v5 browsers else v1 to support old browsers
var jQueryScriptPath = (isHtml5Compatible)
    ? "/Scripts/jquery-2.0.3.js"
    : "/Scripts/jquery-1.10.2.js";
document.writeln("<script src=/"" + jQueryScriptPath + "/" type=/"text/javascript/"><//script>");

If you vote this answer up please also vote clement and Shivan’s answers too 🙂

I would suggest you can try using <audio>Anything within Audio tag here</audio>.
Any text written inside the between <audio> and </audio> will be displayed in browsers that do not support the <audio> tag.
Since the audio tag is newly added in HTML5.