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

Question

Does anyone have a foolproof way to test for the existence of an HTML5 tag, events, or attribute? What I would essentially like to do is browser test one or more of these. I am well aware of projects like modernizr, however I need something very specific.

For example, Javascript which provided capability for these mocked functions would be ideal:

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

UPDATE: Some good reference here http://diveintohtml5.ep.io/everything.html , but by no means complete coverage of tags such as article, nav, header, etc. as well as events and all attributes.

Answer 1

Modernizr has a function for isEventSupported and testing for attributes is quite straightforward (have a look at the first test in function webforms() in the modernizr code).

When it comes to supporting tags 'such as article, nav, header, etc' I doubt you really need to test for that. If we leave aside IE for the moment, the difference between a browser which supports article and a browser which doesn't is that the former will provide some default CSS for the element. Since you can just provide your own CSS ( display: block; plus whatever styles you were going to provide anyway) it's hard to see where you might need to detect the support.

If you're still keen to test for support for these elements you can just look for those default styles, for example:

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'));

You need to actually append the element for the browser to compute the styles, and I've added the currentStyle line for IE even though we can be sure it doesn't support it. Obviously this particular approach is only going to work for elements that are supposed to be block level, but you could extend it to look at a different property for the rest. Of course, calling document.createElement('article') will cause IE to apply user styles to subsequent article elements and having article { display: block; } article { display: block; } in your stylesheet will cause all browsers to 'support' the article element.

Perhaps a more interesting thing to test for is compliance with the HTML5 parsing algorithm , as that may have some impact on the DOM tree you are dealing with in script and whether you'll be able to do things like insert inline SVG . Have a look at the testParsing function in the source code of The HTML5 Test for that.