3

この質問は、とのplaceholderテキストのベスト プラクティスに関する別の質問に答えようとしていたときに発生しました。inputstextareas

HTML5 を使用することplaceholderは確かに最適ですが、現時点では、古いブラウザー用に (javascript を使用して) 劣化したソリューションを追加する必要があるようです。

JsFiddleはこちら：http ://jsfiddle.net/leifparker/DvqYU/16/

問題は、どちらもほぼ同じことを達成しているのに、なぜわざわざ両方を含める必要があるのか​​ということです。javascript のみのソリューションを利用して、(ほぼ) 広く受け入れられるまで HTML5 の実装を放棄しないのはなぜですか?

確かに、この特定の例では、HTML5placeholder属性とhasPlaceholderSupport()関数を追加することはかなり最小限の行 (4) の追加です。

双方に理由があると確信しており、それを聞いてみたいと思っています。

前もって感謝します！

4

2 に答える 2

3

悩むには理由があります。時間が経つにつれて、すべてのブラウザーがプレースホルダー属性をサポートすることが期待されます。現在、これをサポートしていないブラウザーはごくわずかです(最も重要なのは、IE 9 以下、および Android ブラウザーです)。したがって、最終的には、プレースホルダー フォールバック コードは不要になります。すべてのブラウザーにスクリプトを使用して Web サイトを出荷すると、数年後には完全に不要になります。

代わりに、必要な場合にのみ JavaScript ソリューションにフォールバックする機能検出を使用します。

  1. プレースホルダー属性をすでにサポートしているブラウザーで、JavaScript コードを不必要に実行することはありません。
  2. 必要な場合にのみフォールバック スクリプトをロードして、数バイトを節約できます。

これは、Modernizr や yepnope.js (Modernizr に含まれる) などのライブラリが既に行っていることです。Modernizr を使用し、プレースホルダーポリフィルをファイルに抽出することをお勧めしplaceholder-polyfill.jsます。これにより、コードは次のようになります。

Modernizr.load({
  test: Modernizr.placeholder,
  nope: 'placeholder-polyfill.js'
});

yepnope.js だけが必要で、独自の機能検出関数を実行する場合:

yepnope({
  test: hasPlaceholderSupport(),
  nope: 'placeholder-polyfill.js'
});

このようにして、リソースの読み込みを節約し、ほとんどのブラウザーのパフォーマンスを向上させます。将来的には、すべてのブラウザーが単純にテストに合格し、パフォーマンスが向上します。次に、yepnope.js/Modernizr 呼び出しを削除するだけです。

私にとっては、最新のブラウザーの機能を既に活用しながら、コードの将来性を保証することについての考え方です。

于 2012-01-31T12:17:51.653 に答える
0

私が見た利点は、必要なときにのみ jsFiddle をロードできることです。これにより、余分なコードの読み込み、解析、および実行に必要な時間が節約されます。ページの読み込みが速くなり、ネイティブの html5 サポートは JavaScript でエミュレートするよりもおそらく高速です。

于 2011-10-05T00:00:44.870 に答える