jquery - jQuery による特定の HTML 5 機能のサポートの検出

Question

次のようなものを含む、いくつかの HTML5 デモコードに取り組んでいます。<input type="date" />

これは現在、Opera 10 でそのまま正しく機能しますが、他のすべてのブラウザーでは通常のテキスト入力が表示されます。次に、jQuery.date-input プラグインを使用して、サポートしていないブラウザーでこの動作をオーバーライドしています。

問題は-jQueryがOperaでも実行されているため、Operaでは2つのカレンダー日付ピッカーを取得しています(1つはブラウザから、もう1つはjQueryから)

今のところこれを回避できますがif (window.opera)、たとえばjQuery.supportを使用して、現在のブラウザが特定のHTML5機能をサポートしているかどうかを確実に検出できる方法はありますか?

score 17 · Accepted Answer

Modernizrを見てみましょう。これはオープンソースの MIT ライセンスの Javascript ライブラリであり、多くの HTML5/CSS3 機能のサポートを検出し、非常に小さい (7kb 圧縮) です。使用するには、次のようにします。

<script src="modernizr.min.js"></script>

<head>ドキュメント内。その後、必要なものを確認するためのさまざまな機能があります。例：

if (Modernizr.canvas) { 
     // do stuff
}

必要な特定の HTML5/CSS3 機能を確認する方法は他にもたくさんあります。ウェブサイトをチェックして入手し、ドキュメントを参照してください。

score 11 · Accepted Answer

ええ、特定のブラウザをチェックすることは、あなたが望んでいることではありません。ブラウザーのバグ (通常は IE で) の回避策を適用する必要がある場合を検出するのに役立つ場合がありますが、ブラウザーが機能をサポートしているかどうかを知りたい場合は、それを嗅ぐだけです。

他のものよりも嗅ぎやすいものがあります。date-input-support の例では、非常に簡単です。このinput.typeプロパティは、ブラウザーが認識しているコントロールの種類を示します。日付入力がサポートされていない場合は、'text'.

<input type="date" class="dateinput" />

if ($('.dateinput')[0].type!=='date') {
     $('.dateinput').addSomeDateScriptingPluginThing();
}

2 に答える 2