检测浏览器对 HTML 5 语法的兼容性的最佳方法是什么？如果浏览器不兼容并提示用户？
我了解the tutorial which shows how to test browser compatibility for HTML5。但我很想知道这是否是唯一的方法？我需要检查每个元素吗？
【问题讨论】：
标签： html cross-browser
看看Modernizr:
利用 HTML5 和 CSS3 的新功能意味着 牺牲对旧浏览器体验的控制。现代化 2 是您制作最佳网站和应用程序的起点 无论您的访问者使用什么浏览器或设备，它都能正常工作 使用。
感谢新的媒体查询测试和内置的 YepNope.js 微库作为 Modernizr.load()，您现在可以组合功能 使用媒体查询和条件资源加载进行检测。那 为您提供优化的能力和灵活性 情况。
它有很多内置的方法来测试浏览器功能，并提供了一种有用的方法来在不支持您想要使用的功能时提供回退代码。
【讨论】：
“HTML5 兼容性”是一个很模糊的东西。
当人们询问 HTML5 兼容性时，他们通常的意思是“哪些浏览器支持我想使用的这些新的浏览器功能 X、Y 和 Z？”
在过去几年中，浏览器添加了大量功能，现在通常称为“HTML5”。
事实上，没有任何个浏览器支持每一个新功能。
您需要做的是确定哪些功能具有足够广泛的支持以使其值得使用，哪些功能您想使用但如果您遇到不支持它们的浏览器很乐意解决，以及您绝对必须使用哪些功能来实现您想做的事情。
在http://caniuse.com/ 上提供了相当全面的新浏览器功能列表以及它们的浏览器支持图表（如果您滚动到底部，您会在整体兼容性表中看到只有当前最好的浏览器支持他们测试过的 89% 的功能。随着新版本的发布，这将随着时间的推移而改进......但当然，也会引入新功能）
要在运行时确定用户的浏览器是否支持给定功能，您可以使用Modernizr。这是一个基于 Javascript 的工具，它将为您提供一组 CSS 类和 Javascript 标志，告诉您支持哪些功能。如果浏览器不支持您想要的功能，您可以使用它来触发站点中的替代行为。 （Modernizr 还包括 HTML5Shim 功能，它允许 IE 至少处理包含新 HTML5 元素的 HTML 页面）。
为了获得更多的跨浏览器兼容性，已经编写了一系列的 hack，以允许旧浏览器（主要是 IE 公平地说）支持一系列新功能。你可以在这里看到一个相当全面的列表：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
显然，尝试在 IE 中同时运行多个这些功能会严重影响您网站的性能，但如果您需要支持一两个功能，它会很方便。目前我最喜欢的是CSS3Pie，它使 IE6/7/8 支持 CSS 圆角、阴影和渐变。
希望对您有所帮助。
【讨论】：
这里是检测 HTML5 兼容性和功能的教程：
http://diveintohtml5.ep.io/detect.html
有使用类似技术的替代 HTML5 检测器，但我建议使用 Modernizr。
总结HTML5的“分数”，你可以设计自己的“标记方案”。总结加权分数为您提供总分。
【讨论】：
最简单的方法：在 JS 中创建一个新元素，并在 JS 中将属性设置为颜色选择器（HTML5），并返回元素的类型（仅当浏览器 ic HTML5 兼容时才为选择器）：
var element = document.createElement("input");
element.setAttribute("type", "color");
return element.type !== "text";
【讨论】：
【讨论】：
我建议您可以尝试使用<audio>Anything within Audio tag here</audio>。
在<audio> 和</audio> 之间写入的任何文本都将在不支持<audio> 标签的浏览器中显示。
由于音频标签是 HTML5 中新添加的。
【讨论】：
这适用于 IE 11（希望也适用于其他浏览器）。
// Detect HTML v5 compatibility
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
取自 Clement 的回答和 Shivan (http://diveintohtml5.info/detect.html) 的链接。 Clement 的回答在 IE 11 中不起作用。
在我的例子中，我对所有东西都使用 jQuery UI，所以不需要 Modernizr（而且它似乎更慢）。阅读相当负面的“如何使用 Modernizr”博客 cmets 支持这一假设。
但是现在 jQuery 在 v1 和 v2 开发流之间分离了浏览器兼容性，对于想要支持非 HTML v5 浏览器的人来说，必须在开始时加载 v1 或 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 的答案 :-)
【讨论】：