Modernizr - ポリフィルのロード方法/カスタム検出の使用

Question

ウェブページ上にいくつかの新しいHTML5フォーム属性と入力タイプを使用したいと思います。一部のブラウザはすでにそれらをサポートしており、他のブラウザはそれをサポートしていません。私はModernizrを使いたいのですが、それは私のトラブルが始まったことです。

私の理解では、Modernizrは単独ではポリフィルではなく、ブラウザがいくつかの新しいHTML5/CSS3のことができるかどうかをテストできるスクリプトです。必要に応じて、これらの機能を「エミュレート」して、非サポート/古いブラウザで使用できるように、ポリフィルを読み込むことができます。これは正しいと思いますか？

Testing/loadingについて：Modernizrを使用してポリフィルをロードするにはどうすればいいですか？私はこの発見ドキュメントで
：

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

をしかし、いくつかのページにも、このようにそれを実行します。また

if (Modernizr.touch){ 
    // bind to touchstart, touchmove, etc and watch `event.streamId` 
} else { 
    // bind to normal click, mousemove, etc 
} 

、どのように私は実際にこれらの機能の検出が呼び出される方法を知っているのですか？すべての機能の検出には確かにModernizr.geolocationのようなものがありますか？

Modernizr GitHubリポジトリには、ユーザーが提供する多くの機能があります。 これらをModernizrの私のバージョンにどのように実装すればよいですか？それともビルダーを使うのが一番ですか？

Safariでは、HTML5フォームの検証は機能しますが、エラーメッセージを表示するためのUIはありません。基本的に、この機能は半分しか実装されていません。それで、ModernizrがSafariで誤って肯定的な結果を出すのは、ここで既に述べたように：https://github.com/Modernizr/Modernizr/issues/266 誰かがこのようなカスタムテストでこれを修正したようですが、それでも使い方は分かりません。1

Answer 1

あなたが見ている2つのテクニックはどちらも有効です。

yep/nopeバージョンの場合、これは別のファイルからインクルードするポリフィルをロードする理想的な方法です。これはJavascriptである必要はなく、CSSファイルでもかまいません。

標準JS if()ブロックの場合、この機能が利用可能かどうかによって、同じJSファイルにブロック機能依存コードを入れ替えたい場合に、この機能が役立ちます。

だから両方の変種がその場所を持っています。

ただし、yep/nopeという構文は一部の旧バージョンのModernizrでは使用できなかったため、別のJSファイルを含めるためにブロックオプションif()が使用されていることがあります。 Yepnopeは実際にはPolyfillファイルを読みやすくするための構文をわかりやすくするために、Modernizrに組み込まれた完全に別のライブラリです。

Modernizrがどのような機能を検出できるかを知る方法については、Modernizrのドキュメントを参照してください。

「Modernizrによって検出された機能」というセクションについては、文書（http://modernizr.com/docs/）を参照してください。これには、Modernizrによって与えられた名前とともに、検出されたすべての機能のリストがあります。

壊れた機能が検出されました - あなたがリンクしたチケットは、ほぼ1年前に閉鎖されたとマークされ、改善されたテスト用のコードがメインに追加されているようにModernizrコード。最新バージョンを実行していることを確認し、これが正常に機能しているかどうかを再確認してください。

Answer 2

Modernizr v3以降、YepnopeからModernizr.load（）を使用しているのはdeprecatedです。良い方法はjQueryを使うことです：

if (Modernizr.geolocation){ 
    console.log('match'); 
} else { 
    // load polyfill 
    $.getScript('path/to/script.js') 
    .done(function() { 
    console.log('script loaded'); 
    }) 
    .fail(function() { 
    console.log('script failed to load'); 
    }); 
}