测试 HTML5 标签、事件和属性支持

Question

有没有人有万无一失的方法来测试 HTML5 标记、事件或属性是否存在？我基本上想做的是浏览器测试其中的一个或多个。我非常了解诸如modernizr 之类的项目，但是我需要一些非常具体的东西。

例如，为这些模拟函数提供功能的 Javascript 将是理想的：

bool IsHTML5TagSupported( tag )
bool IsHTML5EventSupported( event )
bool IsHTML5AttributeSupported( attribute );

更新：这里有一些很好的参考 http://diveintohtml5.ep.io/everything.html，但绝不是完全涵盖文章、导航、标题等标签以及事件和所有属性。

Answer 1

Modernizr 有一个isEventSupported 的函数，并且属性测试非常简单（查看modernizr 代码中function webforms() 中的第一个测试）。

当涉及到支持标签“例如文章、导航、标题等”时，我怀疑您是否真的需要对此进行测试。如果我们暂时不考虑 IE，支持article 的浏览器和不支持的浏览器之间的区别在于前者将为元素提供一些默认的 CSS。由于您可以只提供自己的 CSS（display: block; 以及您将提供的任何样式），因此很难看出您可能需要在哪里检测到支持。

如果您仍然热衷于测试对这些元素的支持，您可以只查找那些默认样式，例如：

function IsHTML5TagSupported(tag) {
    var t = document.createElement(tag);
    document.body.appendChild(t);
    var ret;
    if (window.getComputedStyle) ret = window.getComputedStyle(t, null).getPropertyValue("display") == 'block';
    if (t.currentStyle) ret = t.currentStyle.display == 'block';
    document.body.removeChild(t);
    return ret;
}

window.alert(IsHTML5TagSupported('article'));

您实际上需要为浏览器添加元素来计算样式，我已经为 IE 添加了 currentStyle 行，尽管我们可以确定它不支持它。显然，这种特殊方法仅适用于应该是块级的元素，但您可以扩展它以查看其余的不同属性。当然，调用 document.createElement('article') 会导致 IE 将用户样式应用于后续的 article 元素，并且在样式表中包含 article { display: block; } 将导致所有浏览器“支持”article 元素。

也许要测试的更有趣的事情是与HTML5 parsing algorithm 的合规性，因为这可能会对您在脚本中处理的DOM 树以及您是否能够执行insert inline SVG 之类的事情产生一些影响。看看The HTML5 Test源代码中的testParsing函数就知道了。