Modernizer は JavaScript を使用して、ページ読み込み時にページの HTML 要素に一連のクラスを追加します。例えば
<HTML class="backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg">
これらのクラスは、ページが表示されているブラウザーで HTML5/CSS3 機能を使用できるかどうかを示します。
これにより、ブラウザーが処理できる場合にのみ CSS3 スタイルを適用することで、より効率的な CSS を使用できます (プログレッシブ エンハンスメント)。
例えば
.no-audio .music-player {
display: none
}
.audio .music-player {
/* styles for music player */
}
また、Modernizer では、これらの要素が JavaScript API で利用可能かどうかをテストできます。これは、古いブラウザー (ポリフィル) のフォールバックを提供するのに役立ちます。したがって、角を丸くするには、次のようにします。
Modernizr.load({
test: Modernizr.borderradius,
yep : /* do nothing */
nope: 'borderradius.js' /* css3 pie for example */
});
または代わりに:
if (Modernizr.borderradius) {
// do nothing
}else{
/* script for making rounded corners e.g css3 pie */
}
または CSS では、利用可能な場合は borderradius のみを使用します。
.box {
border: 1px solid #000; /* all browsers, no rounded corners */
}
.borderradius .box{
border-radius: 15px; /* only CSS3 compliant browsers get this style */
}
古い (IE <9) ブラウザーのメディア クエリには、repond.js などの別のプラグインが必要です。