Question

有没有人有一种万无一失的方法来测试HTML5标签，事件或属性的存在？我本来想做的是浏览器测试其中一个或多个。我很清楚像modernizr这样的项目，但是我需要非常具体的东西。

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

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

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

Answer 1

Modernizr有一个isEventSupported函数，对属性的测试非常简单（请查看现代化代码中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树产生一些影响，以及您是否能够执行{{{{{{ 3}}。请查看insert inline SVG源代码中的testParsing函数。

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

1 个答案: