Тесты для поддержки тегов, событий и атрибутов HTML5

Question

Есть ли у кого-нибудь надежный способ проверить наличие тега, событий или атрибута HTML5?По сути, я хотел бы протестировать браузер одним или несколькими из них.Я хорошо осведомлен о таких проектах, как modernizr, но мне нужно что-то очень конкретное.

Например, Javascript, который предоставляет возможность для этих проверенных функций, был бы идеальным:

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

ОБНОВЛЕНИЕ: Некоторые хорошиессылка здесь http://diveintohtml5.ep.io/everything.html,, но ни в коем случае не полный охват тегов, таких как article, nav, header и т. д., а также событий и всех атрибутов.

Answer 1

Modernizr имеет функцию для isEventSupported, и тестирование атрибутов довольно простое (посмотрите на первый тест в function webforms() в коде modernizr).

Когда дело доходит до поддержки тегов, таких как article, nav, header и т. Д., Я сомневаюсь, что вам действительно нужно проверить это. Если мы пока оставим в стороне 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'));

Вам нужно добавить элемент в браузер для вычисления стилей, и я добавил строку currentStyle для IE, хотя мы можем быть уверены, что он не поддерживает его. Очевидно, что этот конкретный подход будет работать только для элементов, которые должны быть на уровне блоков, но вы можете расширить его, чтобы посмотреть на другое свойство для остальных. Конечно, вызов document.createElement('article') заставит IE применять пользовательские стили к последующим элементам article, а наличие article { display: block; } в вашей таблице стилей заставит все браузеры «поддерживать» элемент article.

Возможно, более интересная вещь для проверки - это соответствие алгоритму синтаксического анализа HTML5 , поскольку это может оказать некоторое влияние на дерево DOM, с которым вы работаете в скрипте, и на то, сможете ли вы это сделать такие вещи, как вставьте встроенный SVG . Взгляните на функцию testParsing в исходном коде HTML5 Test для этого.