javascript - 测试 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 行，尽管我们可以确定它不支持它。显然，这种特殊方法仅适用于应该是 block 级的元素，但您可以扩展它以查看其余元素的不同属性。当然，调用 document.createElement('article') 将导致 IE 将用户样式应用到后续的 article 元素并具有 article { display: block; 在您的样式表中将导致所有浏览器“支持”article 元素。

也许更有趣的测试是遵守 HTML5 parsing algorithm ，因为这可能会对您在脚本中处理的 DOM 树产生一些影响，以及您是否能够执行类似 insert inline SVG 的操作。 .查看The HTML5 Test 源代码中的testParsing 函数为此。