如何检测浏览器中的 HTML 5 兼容性

How to detect HTML 5 compatibility in browser

提问by Chris

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

检测 HTML 5 语法的浏览器兼容性的最佳方法是什么？并提示用户浏览器不兼容？

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?

我了解显示如何测试 HTML5 的浏览器兼容性的教程。但我很想知道这是否是唯一的方法？我需要检查每个元素吗？

采纳答案by betamax

Have a look at Modernizr:

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

利用 HTML5 和 CSS3 的新功能可能意味着牺牲对旧浏览器体验的控制。Modernizr 2 是您制作最佳网站和应用程序的起点，无论您的访问者使用什么浏览器或设备，它们都能正常运行。

由于新的媒体查询测试和内置的 YepNope.js 微库作为 Modernizr.load()，您现在可以将特征检测与媒体查询和条件资源加载相结合。这为您提供了针对每种情况进行优化的能力和灵活性。

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/

更多信息：http: //www.modernizr.com/

回答by Spudley

"HTML5 compatibility" is a very vague thing.

“HTML5 兼容性”是一个非常模糊的东西。

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

当人们询问 HTML5 兼容性时，他们通常的意思是“哪些浏览器支持我想使用的这些新的浏览器功能 X、Y 和 Z？”

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

在过去几年中，浏览器中添加了大量功能，现在通常称为“HTML5”。

In fact, there aren't anybrowsers which support everynew 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)

http://caniuse.com/提供了相当全面的新浏览器功能列表以及所有这些功能的浏览器支持图表（如果您滚动到底部，您将在整体兼容性表中看到当前最好的浏览器只支持他们测试过的 89% 的功能。随着新版本的发布，这会随着时间的推移而改进......当然，也会引入新功能）

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

要在运行时确定用户的浏览器是否支持给定功能，您可以使用Modernizr。这是一个基于 Javascript 的工具，它将为您提供一组 CSS 类和 Javascript 标志，告诉您支持哪些功能。如果浏览器不支持您想要的功能，您可以使用它来触发站点中的替代行为。（Modernizr 还包括 HTML5Shim 功能，它允许 IE 至少处理包含新 HTML5 元素的 HTML 页面）。

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

为了获得更多的跨浏览器兼容性，已经编写了一系列的 hack 来允许旧浏览器（主要是 IE 公平）支持一系列较新的功能。你可以在这里看到一个相当全面的列表：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.

显然，尝试在 IE 中同时运行多个这些将严重损害您网站的性能，但如果您需要支持一两个功能，它会很方便。目前我最喜欢的是CSS3Pie，它为 IE6/7/8 提供了对 CSS 圆角、阴影和渐变的支持。

Hope that helps.

希望有帮助。

回答by Raptor

Here is a tutorial of detecting HTML5 compatibility & capabilities :

这是检测 HTML5 兼容性和功能的教程：

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

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

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

有使用类似技术的替代 HTML5 检测器，但我建议使用 Modernizr。

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

总结HTML5的“分数”，可以设计自己的“标记方案”。总结加权分数为您提供总分。

回答by clement

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

最简单的方法：在JS中新建一个元素，在JS中设置属性为colorpicker（HTML5），返回元素的类型（仅当浏览器ic HTML5兼容时才为picker）：

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

回答by Reconnect

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.

我建议您可以尝试使用<audio>Anything within Audio tag here</audio>.
任何文本之间的内部书面<audio>和</audio>将被显示在不支持的浏览器<audio>标签。
由于音频标签是在 HTML5 中新添加的。

回答by Paul D. Waite

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 的五件事，尤其是第 1 点和第 4 点。

回答by Tony Wall

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

这适用于 IE 11（希望也适用于其他浏览器）。

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

这是 Clement 的回答和 Shivan 的链接（http://diveintohtml5.info/detect.html）。克莱门特的回答在 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.

就我而言，我对所有内容都使用 jQuery UI，因此不需要 Modernizr（它似乎也较慢）。阅读相当负面的“如何使用 Modernizr”博客评论支持这一假设。

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:

但是现在 jQuery 在 v1 和 v2 开发流之间拆分了浏览器兼容性，这对于想要支持非 HTML v5 浏览器的人们在开始时加载 v1 或 v2 jQuery 核心脚本是必要的。所以这个“one liner” HTML v5 检测是完美的。以下是我如何使用结果正确加载 jQuery：

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

如果您投票给这个答案，请也投票给 clement 和 Shivan 的答案:-)