3

重複の可能性：
ブラウザの検出と機能の検出

私は（Google / Wikipedia / Docsを使用して）機能検出について読んでいますが、それを完全には理解していません。いくつかの質問がポップアップします

  1. 機能検出が必要なのはなぜですか。ブラウザを検出してコードを書くだけではいけませんか？
  2. 機能検出を行うためのさまざまな方法。それらすべてのベスト？
  3. 機能検出が機能する実際の実例を教えてください。古いブラウザをどのように処理し、同じ機能をそれらに複製する方法>
4

3 に答える 3

4

機能検出が必要なのはなぜですか。ブラウザを検出してコードを書くだけではいけませんか？

いいえ、各ブラウザの機能のリストはすぐに古くなり、その性質上不完全になります。（3年前のブラックベリーブラウザは入力のプレースホルダーテキストをサポートしていますか？私にはわかりませんし、気にする必要もありません。）たとえば、IEにはがありませんでしたaddEventListener。今ではそうです。ブラウザのバージョンレベルまで検出を開始した場合、新しいバージョンがリリースされたらどうしますか？それはメンテナンスの悪夢です。

機能検出を行うためのさまざまな方法。それらすべてのベスト？

単一の機能の検出はありません。機能によって異なります。このページで機能検出の優れたリストを見つけることができます。機能検出を行うModernizrのようなライブラリもあります。

機能検出が機能する実際の実例を教えてください。古いブラウザをどのように処理し、同じ機能をそれらに複製する方法>

もちろん。上記の2つを紹介しましたが、少し掘り下げてみましょう（逆の順序で）。

addEventListener：これは、jQueryやYUIなどのライブラリを使用しないコードでよく見られることです。

if (elm.addEventListener) {
    // Standard
    elm.addEventListener("click", myClickHandler, false);
}
else if (elm.attachEvent) {
    // IE fallback
    elm.attachEvent("onclick", myClickHandler);
}

上記のコードの優れている点は、IE9がリリースされてaddEventListener（標準モードで）使用されたときに、コードが機能したことです。「IE9は今それを持っている」と言うためにデータベースを更新する必要はありません。

または、入力フィールドにプレースホルダーテキストがあります。例：

<input type="text" name="firstName" placeholder="First name">

ブラウザがプレースホルダーテキストをサポートしていない場合、ブラウザにはplaceholder要素のプロパティがありません。彼らがそうするとき、彼らはそうします。したがって、この機能は、ブラウザがプレースホルダーをサポートしているかどうかを検出します。

if ('placeholder' in document.createElement('input')) {
    // Supports the placeholders
}
else {
    // Doesn't, need to do something
}

そうでない場合は、コードを接続して自分で行うことができます。これは、この機能のポリフィルであるplace5プラグインで行います。

于 2012-11-06T16:28:07.920 に答える
0
  1. ブラウザは自分の身元を偽造する可能性があるためです。また、考えられるすべてのブラウザの機能について知ることはできないためです。
  2. 機能によって異なります。JavaScriptメソッドの場合、通常は次のようにチェックしますif (window.XMLHttpRequest) { alert('it supports the XML HTTP requests!'); }。機能が異なれば、それらをチェックする方法も異なる場合があります。
  3. 以前と同じ例で、チェックが返された場合は、falseActiveXオブジェクトの作成にフォールバックします（サポートされている場合は、古いIEバージョンにあります）。または、アプリケーションで特定のことを実行できないことを説明するメッセージをユーザーに表示することもできます。
于 2012-11-06T16:30:09.583 に答える
0

いくつかの答えがありますが、いつものように議論のために開いています:)

1）これに答えるには、実際に使用しているさまざまなブラウザとそのバージョンについて考えてみてください。可能な限り多くのブラウザをサポートしたい場合は、それぞれに異なるコードを記述する必要があります。モバイルブラウジングでは、数字が合計されます。機能を「検出」する機能を使用すると、2つのコードのみを記述できます。1つはその機能が有効になっているブラウザー用で、もう1つは他のブラウザー用です。

2）もちろんこれは主観的です。Modernizrを使用しています

3）Modernizrが検出できる機能を確認すると、表示されます。たとえば、ジオロケーションクライアント側を有効にする場合、ブラウザ固有のコードの独自のデータベースを保持するのではなく、機能検出ライブラリを使用するのが最善の方法です（これは質問1と関係があります）。通常、実装されていない機能をカバーするために、if-then-elseで独自のコードを記述したり、いわゆるポリフィルを使用したりできます。ここでそれについて読むことができます。基本的に、これらは古いブラウザにはない機能を実装するコードの一部です。美しさは、それらが完全に透過的であるということです。それらを使用するだけで、実際の実装を使用するか、回避策にフォールバックするかは関係ありません。sessionStorageの例は一読の価値があります。

于 2012-11-06T16:35:14.983 に答える