2010-12-29 16 views
1

誰かがHTML5タグ、イベント、または属性の存在をテストする完全な方法はありますか?私が本質的にやりたいことは、これらのうちの1つ以上のブラウザテストです。私はmodernizrのようなプロジェクトをよく知っていますが、私は非常に具体的なものが必要です。HTML5タグ、イベント、属性のテストのサポート

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

UPDATE:これらのモック機能のための機能を提供例えば

、Javascriptが理想的であるいくつかの良い基準ここでhttp://diveintohtml5.ep.io/everything.htmlが、決してそのような物品のようなタグの完全な被覆、NAV、ヘッダ、イベント、すべての属性などが含まれます。

+5

なぜmodernizrが検出を行うのか見てみませんか? :) –

+0

これらの関数はJavaのように見えます...私は理想的ではないと考えています;)そうでなければ+1。 –

+0

@Ivo:いいえ、そうではありません。 Javaには 'bool'キーワードや' '文字列がありません。 'isHTML5 ...'、または 'html5.supportsAttribute(...) 'でなければならないと言うことを意味します。 – SLaks

答えて

2

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関数を見てください。

+0

偉大なフィードバック。私はこれを深く掘り下げようとしています。 –

関連する問題