22

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?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Chris
  • 2,293
  • 11
  • 48
  • 86

7 Answers7

15

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/

betamax
  • 13,431
  • 9
  • 38
  • 55
8

"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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • You will find that it is a very tiny number of features (mainly in Safari browsers and Mozilla) that have features that are not supported or have problematic support. You can find dependency checkers that show what features are supported and using an HTML5 field for example, if not supported does not throw an error, it degrades to a basic Text input field. CSS is a different animal to HTML5 support, don't confuse the two as being fully supported on the basis that a browser is or isn't HTML5 compliant. – Mark Giblin Nov 25 '16 at 10:50
  • @MarkGiblin - sure, but it was a very different picture six years ago when I actually posted this answer. – Spudley Nov 25 '16 at 21:50
  • You didn't update your answer, my response was a valid response irrespective of how old the post is, people are still finding these results in the search engines. – Mark Giblin Feb 11 '17 at 11:34
4

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.

DanBeale
  • 310
  • 4
  • 15
Raptor
  • 53,206
  • 45
  • 230
  • 366
  • @Shivan Raptor I have updated the question at the same time. I have already read that tutorial and I am curious to know other way around or sum up testing functionality. – Chris Jul 18 '11 at 10:10
2

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";
clement
  • 4,204
  • 10
  • 65
  • 133
  • Nice idea but it doesn't work on IE 11. Perhaps for performance the test element you create is not parsed, because it's never added to the document. I need a solution which doesn't use Modernizr because that's a whole load of gunk if you are already using jQuery UI to deal with backwards compatibility. Actually the only reason for seeking this answer is for a quick way to switch between jQuery 1 or 2 (sadly they have now split browser support which makes it complicated). – Tony Wall Oct 24 '13 at 11:00
1

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.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Reconnect
  • 41
  • 1
  • 6
1

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.

Tony
  • 9,672
  • 3
  • 47
  • 75
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
0

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 :-)

Tony Wall
  • 1,382
  • 20
  • 18