hagiwara

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 イベントにイベントハンドラをバインドする、等
}

以上です。

おわりに

以上、ごくごく簡単ではありますが Modernizr を使った CSS と JS の書き方をご紹介しました。

他にも、対応状況に合わせて別途 CSS, JS を読み込む機能や、独自のテストを追加するといった機能もありますので、詳しくは 公式のドキュメント を参照の上、活用して下さい。

Modernizr を使って、ブラウザに振り回されることなく、きちんと動作・表示する Webサイト・Webアプリケーションを作っていきましょう。

それでは。

お問い合わせはこちら