次のhtml5またはcss3機能がブラウザで利用できる場合、javascriptで検出する方法はありますか？
たとえば、私は属性を持っています：プレースホルダー、
<input type="text" placeholder="type your email address" />
プレースホルダー属性がブラウザーでサポートされていない場合、手動プレースホルダーを設定するjavascript関数を設定します
Modernizrを使用する場合、これは次のようになりますか？
if ( Modernizr.testProp('placeholder') )
// add attribute placeholder
else
// assign a keypress event as placefolder
このような単純なケースでは、Modernizrを使用せずに直接物事を行うことができます。
<input type="text" placeholder="type your email address"
id="email">
<script>
var email = document.getElementById('email');
if(!('placeholder' in email)) {
email.value = email.getAttribute('placeholder');
email.onfocus = function () { this.value = ''; };
}
</script>
このアプローチでは、placeholder属性は静的HTMLマークアップに表示されます。サポートされていなくても害はありません。実際、サポートされていない場合でも便利です。
重要なのは、placeholderがサポートされている場合、その名前のプロパティが要素ノードに存在するということです。サポートされていない場合でも、ブラウザはそれを解析して保存しているためgetAttribute()、プロパティで値を取得して割り当て、value初期コンテンツとして表示することができます。
フォーカスされると、コードはフィールドをクリアします。これは、ユーザーがデータの一部を入力した後にいくつかの理由でフィールドをクリックする可能性があるため、クリックするたびにクリアするよりも適切に聞こえます。
PS使いやすさ、アクセシビリティ、および単純さのために、プレースホルダーを使用するのではなく、すべての入力フィールドに表示可能なラベルを使用することをお勧めします。したがって、これは良いユースケースではありません。ただし、同じ手法を使用することもできます。たとえば、サイト全体のナビゲーションシステムの一部としてサイトによくある非常に単純な検索フォームの場合です。そこでは、ラベルを省略して、フォームを非常に小さいサイズに絞ることが理にかなっています。
すべての機能検出のニーズにModernizrを使用します