Question

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

我理解the tutorial which shows how to test browser compatibility for HTML5。但我很想知道这是否是唯一的方法？我是否需要检查每一个元素？

Answer 1

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

感谢新的Media Query测试和内置的YepNope.js   微库作为Modernizr.load（），您现在可以组合功能   使用媒体查询和条件资源加载进行检测。那   为您提供优化功能和灵活性   情况。

它有许多内置的方法来测试浏览器功能，并提供了一种有用的方法，可以在不支持您要使用的功能时提供回退代码。

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

Answer 2

“HTML5兼容性”是一件非常模糊的事情。

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

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

事实上，没有任何浏览器支持每个新功能。

您需要做的是确定哪些功能具有足够的支持以使其值得使用，您希望使用哪些功能，但如果您遇到不支持它们的浏览器，则很乐意解决这些问题，以及您必须使用哪些功能来实现您想要的功能。

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

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

为了获得更多的跨浏览器兼容性，已经编写了一系列黑客，以允许旧浏览器（主要是IE公平）支持一系列新功能。您可以在此处查看相当全面的列表：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

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

希望有所帮助。

Answer 3

这是一个检测HTML5兼容性的教程。能力：

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

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

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

Answer 4

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

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

Answer 5

我需要检查每个元素吗？

不。只有您想要使用的部件不向后兼容。

请参阅Five Things You Should Know About HTML5，尤其是第1和第4点。

Answer 6

我建议您尝试使用<audio>Anything within Audio tag here</audio> 在<audio>和</audio>之间写入的任何文字都将显示在不支持<audio>标记的浏览器中。
由于音频标签是在HTML5中新添加的。

Answer 7

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

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

这是克莱门特的答案和Shivan（http://diveintohtml5.info/detect.html）的链接。克莱门特的答案在IE 11中无效。

在我的情况下，我使用jQuery UI，所以不需要Modernizr（也似乎更慢）。阅读相当消极的“如何使用Modernizr”博客评论支持这一假设。

但是现在jQuery已经在v1和v2开发流之间分离了浏览器兼容性，这对于那些希望支持非HTML v5浏览器的用户来说，必须在开始时加载vite或v2 jQuery核心脚本。所以这个“单线”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>");

如果您对此答案投票，请同时投票给Clement和Shivan的答案： - ）

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

7 个答案: