2011/03/19

絶対に使いたい、modernizr 2.0

最近では、すっかりCSS3を利用する人には定着した「modernizr」当初は、CSS3の対応状況をチェックするツールと誤解をしていた人も多くいました。しかし、このツールは、CSS3やHTML5のサポート状況をclass名としてhtml要素に反映し、そのclass名を利用して「プログレッシブ・エンハンスメント」を適用するJavaScriptです。





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をサポートしていないブラウザにも別のスタイルを適用できます。

利用方法


  1. 利用するプロパティを選択します。今回は、「Flexbox」と「CSS3 3D」を選択しました。
  2. コードを生成します。「GENERATE IT!」という赤いボタンをクリックすると下記のようにコードが生成されます。
  3. head要素内にダウンロードした JavaScriptを読み込む為の記述配置します。任意のファイル名を指定しましょう。
    
    <head>
    <script type="text/javascript" href="modernizr.js"></script>
    </head>
    

「modernizr2.0」にはもっと隠された能力

「modernizr2.0beta」には、隠された機能があります。それが下記の箇条書きの2つです。


  1. IE用のHTML5修正用 RemySharpの「HTML5shim」があらかじめ記述
  2. JavaScriptのローディングを高速化する「yepnope.js」の搭載

上記の2つのJavaScriptライブラリを別々にそれぞれダウンロードするより、「modernizr」で読み込んだ方が HTTPリクエストは1つになります。

まとめ
「modernizr」 は 「プログレッシブ・エンハンスメント」を実現するためには、なくてはならないツールです。2.0ではサポートが広がりますます欠かせません。是非、2.0を利用してみよう。Flexboxを利用できるメリットを感じられます。Flexboxについては次回のasciiの連載にて取り上げる予定なので、 Ascii Web Proffessional を閲覧してみてください。