ModernizrとPolyfill
3085 ワード
前述したようにModernizrHTML 5とCSS 3の特性検出ツールですが、ここではその使い方を簡単にご紹介します.最も簡単な使い方は、ページのにModernizrのJavaScriptファイルを追加することです.
Modernizrスクリプトを実行すると、次のようなページが表示されます(IE 9の例).
Modernizrが数十個のHTML 5とCSS 3の特性を検出した後、結果をhtmlタグのclass属性に記録し、no接頭辞付き表示ブラウザはその特性をサポートせず、no接頭辞なし表示ブラウザはこの特性をサポートしていることがわかる.これにより、htmlタグのこれらのclass属性に基づいて、CSSファイルに異なる特性に対して異なるスタイルを適用することができます.例えば.no-touch #someid:hover #menu {display: block;}.
Modernizrスクリプトが実行されると、Modernizrオブジェクトも生成され、これらのすべてのプロパティがブール値で記録されます.そのため、JavaScriptでif(Modernizr.touch){...}のような簡単な利用ができます.このようなコードは、タッチスクリーンデバイスに対して最適化される.
しかし、CSSのスタイル制限とJavaScriptを使用する条件判断には、CSSやJavaScriptファイルに様々な可能性に対応するコードを含める必要があり、ファイルが肥大化してしまうという欠点があります.この問題に対してModernizrにはYepNopeが含まれている.jsという条件ローダは,異なる特性に対して異なるCSSとJavaScriptファイルをロードすることができる.例:
または、機能がないブラウザに対してPolyfill(埋め込み)ライブラリをロードします.
参考資料:[1]Modernizr: the feature detection library for HTML5/CSS3[2]yepnope.js | A Conditional Loader For Your Polyfills![3]HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki[4]What is a Polyfill? - remy sharp’s b:log[5]The Developer’s Guide To Writing Cross-Browser JavaScript Polyfills[6]図霊コミュニティ:読書:HTML 5の逸話:一袋の「パテ粉」の物語
<!doctype html>
<html>
<head>
<script src="modernizr-2.6.2.js"></script>
</head>
<body>
</body>
</html>
Modernizrスクリプトを実行すると、次のようなページが表示されます(IE 9の例).
<!doctype html>
<html class=" js no-flexbox no-flexboxlegacy canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage no-webworkers no-applicationcache svg inlinesvg no-smil svgclippaths">
<head>
<script src="modernizr-2.6.2.js"></script>
</head>
<body>
</body>
</html>
Modernizrが数十個のHTML 5とCSS 3の特性を検出した後、結果をhtmlタグのclass属性に記録し、no接頭辞付き表示ブラウザはその特性をサポートせず、no接頭辞なし表示ブラウザはこの特性をサポートしていることがわかる.これにより、htmlタグのこれらのclass属性に基づいて、CSSファイルに異なる特性に対して異なるスタイルを適用することができます.例えば.no-touch #someid:hover #menu {display: block;}.
Modernizrスクリプトが実行されると、Modernizrオブジェクトも生成され、これらのすべてのプロパティがブール値で記録されます.そのため、JavaScriptでif(Modernizr.touch){...}のような簡単な利用ができます.このようなコードは、タッチスクリーンデバイスに対して最適化される.
しかし、CSSのスタイル制限とJavaScriptを使用する条件判断には、CSSやJavaScriptファイルに様々な可能性に対応するコードを含める必要があり、ファイルが肥大化してしまうという欠点があります.この問題に対してModernizrにはYepNopeが含まれている.jsという条件ローダは,異なる特性に対して異なるCSSとJavaScriptファイルをロードすることができる.例:
Modernizr.load({
test: Modernizr.touch,
yep : ['touch.css', 'touch.js'],
nope: ['mouse.css', 'mouse.js'],
complete: function() {
doSomeThing();
}
});
または、機能がないブラウザに対してPolyfill(埋め込み)ライブラリをロードします.
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});参考資料:[1]Modernizr: the feature detection library for HTML5/CSS3[2]yepnope.js | A Conditional Loader For Your Polyfills![3]HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki[4]What is a Polyfill? - remy sharp’s b:log[5]The Developer’s Guide To Writing Cross-Browser JavaScript Polyfills[6]図霊コミュニティ:読書:HTML 5の逸話:一袋の「パテ粉」の物語