yep/nope / modernizr.load() を使用してリソースをロードする前に、2 つの項目のサポートを確認する必要があります。これを行うにはどうすればよいでしょうか?
そして、両方のテストに合格すると、どちらか一方ではなく、両方になります。
1 つは既に追加したカスタム テストで、もう 1 つは既存のテストです。
yep/nope / modernizr.load() を使用してリソースをロードする前に、2 つの項目のサポートを確認する必要があります。これを行うにはどうすればよいでしょうか?
そして、両方のテストに合格すると、どちらか一方ではなく、両方になります。
1 つは既に追加したカスタム テストで、もう 1 つは既存のテストです。
Modernizrのドキュメントには、次のような答えがあります。
ドキュメントから取得...
Modernizr.loadは小さくてシンプルですが、かなりの負担がかかる可能性があります。スクリプトが複数のModernizr機能テストに依存している場合にModernizr.loadを使用する少し複雑な例を次に示します。良いテクニックは、複数のポリフィルスクリプトを単一の「oldbrowser」タイプのスクリプトにまとめることです。そうすれば、一度に多くのスクリプトをロードすることになりません。これがどのように機能するかを示します。
Modernizr.load([
{
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
nope : ['presentational-polyfill.js', 'presentational.css']
}
]);
ご覧のとおり、答えは、必要なすべてのテストをブール式にまとめることです。
ドキュメントの例を簡略化しました。実際、ドキュメントに記載されている例はさらに詳細に説明されているので、読んでみてください。また、目的の方法をさらに改善できる可能性があります。
お役に立てば幸いです。
@Spudleyの回答は素晴らしいですが、場合によってはもっと役立つかもしれません
Modernizr.load([
{
test: Modernizr.input.autofocus || Modernizr.cssanimations,
nope: 'jquery.js'
},
{
test: Modernizr.input.autofocus,
nope: 'autofocus.js'
},
{
test: Modernizr.cssanimations,
nope: 'animations.js'
}
]);