『Modernizr』を使ってブラウザーの機能を調べCSS、JSそれぞれ対応して書いていこう -まとめ

2013.07.21 Category:jQuery Tag:tool

HTML5, CSS3 を使ってウェブサイトをつくる際の助けになる JavaScript ライブラリとしてとても話題になったことは覚えているのですが、少し触っただけで終わってしまった記憶が。あれは確か。。（回想中）去年の。。。

で、また最近この『Modernizr』を目にし、これは書き留めておこうと思った次第です。

Modernizrとは

読み方は、モダナイザーです。

どういう事ができるのかというと、現在のHTML5・CSS3機能の実装状況はブラウザーごと、バージョンごとに異なっているのですが、この実装の差異に対応することが出来ます。

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

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

Modernizrの使い方

ごくごく簡単ではありますが、以下に基本的な使い方をご紹介します。

1.　ダウンロードする

まず、公式サイトからダウンロードするのですが、必要な機能だけで構成したスクリプトをダウンロードすることもできます。

必要な機能だけで構成したスクリプトをダウンロードするには、こちらから

Modernizr　｜　Modernizr Download Builder

今回は、機能選択ではなくDevelopment バージョンをダウンロードします。

Modernizr　｜　Development バージョン

2.　modernizr.js を読み込み対応状況を知る

バージョンは、2013/07/21現在の2.6.2を使用しています。

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

<!DOCTYPE html>

<head>

<title>modernizr.js 使用例</title>

</head>

<body>

</body>

</html>

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

js
flexbox
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
csstransforms3d
csstransitions
fontface
generatedcontent
video
audio
localstorage
sessionstorage
webworkers
applicationcache
svg
inlinesvg
smil
svgclippaths

この内の no- から始まるものが、そのブラウザが対応していない機能です。

上記の例では、touch イベントに非対応だということがわかります。

では、次にその対応していない場合の記述についてです。

Modernizrの使い方は大きく分けて、CSSコードに記述する方法とJavascriptで使う方法の2つがあります。

Modernizrの使い方： 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;
}

例：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;

}

Modernizrの使い方： JavaScript編

先ほどの結果から、touch イベントに非対応ということなので、これに対しての記述方法です。

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

// 例：touch イベント

if (Modernizr.touch) {

// 有効な場合

// touchstart, touchmove イベントにイベントハンドラをバインドする、等

} else {

// 無効な場合

// click, mousemove イベントにイベントハンドラをバインドする、等

}

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