html 要素に CSS3のサポートされているか？されていないか？で別々の class名を記述します。
例えばブラウザが「multiple background」を
サポートしている場合
<html class="multiplebgs">
</html>
サポートしていない場合
<html class="no-multiplebgs">
</html>
CSSの記述
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
このツールは現在のバージョンは「1.7」だが、ベーターバージョンとして「2.0beta」が公開されている。
2.0Betaの大きな違い
1.7と2.0beta大きな違いは、
- 自分で利用したプロパティを選択できる
- 新しいプロパティが利用できる「
Flexbox」「3Dtransform」など
自分で利用したいプロパティを選択できることのメリット
まずは、必要なプロパティのみを選択できることで、利用しないプロパティに関わるコードを削除できます。そのことによって何よりjsの読み込みを高速化することができます。JavaScriptを読み込むスピードを高速化できることは、特にパフォーマンスを要求されるモバイルでは大きな効果をあげるでしょう。新しいプロパティが利用できることのメリット
以前は、CSS3の3D transformは「modernizr1.7」にてサポートされておらず、3D transform を利用する際には苦労をしました。今回からは、Safari以外の CSS3 3Dtransformをサポートしていないブラウザにも別のスタイルを適用できます。
利用方法
- 利用するプロパティを選択します。今回は、「Flexbox」と「CSS3 3D」を選択しました。
- コードを生成します。「GENERATE IT!」という赤いボタンをクリックすると下記のようにコードが生成されます。
- head要素内にダウンロードした JavaScriptを読み込む為の記述配置します。任意のファイル名を指定しましょう。
<head> <script type="text/javascript" href="modernizr.js"></script> </head>
「modernizr2.0」にはもっと隠された能力
「modernizr2.0beta」には、隠された機能があります。それが下記の箇条書きの２つです。
- IE用のHTML5修正用 RemySharpの「HTML5shim」があらかじめ記述
- JavaScriptのローディングを高速化する「yepnope.js」の搭載
上記の２つのJavaScriptライブラリを別々にそれぞれダウンロードするより、「modernizr」で読み込んだ方が HTTPリクエストは１つになります。
まとめ
「modernizr」 は 「プログレッシブ・エンハンスメント」を実現するためには、なくてはならないツールです。2.0ではサポートが広がりますます欠かせません。是非、2.0を利用してみよう。Flexboxを利用できるメリットを感じられます。Flexboxについては次回のasciiの連載にて取り上げる予定なので、 Ascii Web Proffessional を閲覧してみてください。
0 件のコメント:
コメントを投稿