Modernizr を使ってブラウザの機能にあわせた CSS, JS を書く

今回は、HTML5, CSS3 を使ってウェブサイトをつくる際の助けになる JavaScript ライブラリ Modernizr をご紹介します。

HTML5, CSS3 では便利な機能が多数追加されましたが、ブラウザによって対応状況はまちまちです。

Modernizr を使うとブラウザの HTML5, CSS3 対応状況を簡単に調べることができるので、個々の状況にあわせたコードを比較的容易に書けるようになります。

バージョンの古い Internet Explorer 等に対応する際、コンディショナルコメントやいわゆる CSS セレクターハックを使用することがありますが、それらと同様のものと考えると分かりやすいかもしれません。

それではごくごく簡単ではありますが、以下に基本的な使い方をご紹介します。（バージョン等は記事執筆時点のものです。変更になっている場合があります。）

1. modernizr.js をダウンロードする

公式サイトからひとまず Development バージョンをダウンロードします。

（Modernizr Download Builder を使って、必要な機能だけで構成したスクリプトをダウンロードすることも可能です。公開環境で使用する場合等にどうぞ。）

2. HTML で modernizr.js を読み込む（バージョン 2.5.3）

<!DOCTYPE html>
<html lang="ja" class="no-js">
    <head>
        <meta charset="UTF-8">
        <title>modernizr.js 使用例</title>
        <script src="modernizr-2.5.3.js"></script>
    </head>
    <body>
    </body>
</html>

これをブラウザ（Google Chrome 18.0.1025.152）で開き、開発者ツールで表示した状態が下の画像です。ご覧のとおり、html 要素の class 属性値 no-js の代わりに、js, flexbox 等の値がずらずらっと沢山並んでいます。

js
flexbox
flexbox-legacy
canvas
canvastext
webgl
no-touch
geolocation
postmessage
websqldatabase
indexeddb
hashchange
history
draganddrop
websockets
rgba
hsla
multiplebgs
backgroundsize
borderimage
borderradius
boxshadow
textshadow
opacity
cssanimations
csscolumns
cssgradients
cssreflections
csstransforms
no-csstransforms3d
csstransitions
fontface
generatedcontent
video
audio
localstorage
sessionstorage
webworkers
applicationcache
svg
inlinesvg
smil
svgclippaths

一通り並べてみましたが、この内の no- から始まるものが、そのブラウザが対応していない機能です。上記の例では、touch イベントに非対応（no-touch）、CSS 3D Transforms（no-csstransforms3d）に非対応なことが分かります。

3. CSS を書く

ブラウザの対応している機能が分かったところで、それに合わせたコードを書いていきましょう。まずは CSS から。

/*
 例：box-shadow が有効な場合はドロップシャドウをつけ、
 　　無効な場合は枠線（border）をつける
*/

/* 有効な場合 */
.boxshadow div {
  -moz-box-shadow: 0 1px 2px #969696;
  -webkit-box-shadow: 0 1px 2px #969696;
  box-shadow: 0 1px 2px #969696;
}

/* 無効な場合 */
.no-boxshadow div {
  border: 1px solid #969696;
}

簡単ですね。

4. JavaScript を書く

続いて JavaScript です。JavaScript の場合、Selector API や jQuery selectors 等で CSS と同じようにセレクタを使用する方法の他に、スクリプト中で機能を評価して処理を振り分ける方法があります。

// 例：touch イベント
if (Modernizr.touch) {
  // 有効な場合
  // touchstart, touchmove イベントにイベントハンドラをバインドする、等
} else {
  // 無効な場合
  // click, mousemove イベントにイベントハンドラをバインドする、等
}

以上です。