HTML5, CSS3 を使ってウェブサイトをつくる際の助けになる JavaScript ライブラリとしてとても話題になったことは覚えているのですが、少し触っただけで終わってしまった記憶が。あれは確か。。(回想中)去年の。。。
で、また最近この『Modernizr』を目にし、これは書き留めておこうと思った次第です。
Modernizrとは
読み方は、モダナイザーです。
どういう事ができるのかというと、現在のHTML5・CSS3機能の実装状況はブラウザーごと、バージョンごとに異なっているのですが、この実装の差異に対応することが出来ます。
バージョンの古い Internet Explorer 等に対応する際、コンディショナルコメントやいわゆる CSS セレクターハックを使用することがありますが、それらと同様のものと考えると分かりやすいかと思います。
『Modernizr』を使うとブラウザの HTML5, CSS3 対応状況を簡単に調べることができるので、個々の状況にあわせたコードを比較的容易に書けるようになります。
Modernizrの使い方
ごくごく簡単ではありますが、以下に基本的な使い方をご紹介します。
1. ダウンロードする
まず、公式サイトからダウンロードするのですが、必要な機能だけで構成したスクリプトをダウンロードすることもできます。
必要な機能だけで構成したスクリプトをダウンロードするには、こちらから
今回は、機能選択ではなくDevelopment バージョンをダウンロードします。

2. modernizr.js を読み込み対応状況を知る
バージョンは、2013/07/21現在の2.6.2を使用しています。
1 2 3 4 5 6 7 8 9 10 |
<!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> |
これをブラウザ(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で使えない機能が見当たりませんでしたので、ボックスシャドウが対応していないブラウザを仮定して以下に説明します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* 例: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 イベントに非対応ということなので、これに対しての記述方法です。
1 2 3 4 5 6 7 8 |
// 例:touch イベント if (Modernizr.touch) { // 有効な場合 // touchstart, touchmove イベントにイベントハンドラをバインドする、等 } else { // 無効な場合 // click, mousemove イベントにイベントハンドラをバインドする、等 } |
他にも、対応状況に合わせて別途 CSS, JS を読み込む機能や、独自のテストを追加するといった機能もありますので、詳しくは 公式のドキュメントを参照の上、活用して下さい。
最後に
フロントエンド開発用のフレームワーク -G5 Frameworkというのがあるのですが、この中に『Modernizr』が同梱されています。
フレームワーク -G5 Framework

同梱リソース
- Modernizr
- Eric Meyer's Reset Reloaded
- CSS3 PIE
- CSS3 Buttons
- Easy Grid
- IE6 Update
- Tipsy Tool Tips
- Rebeal Modals
- Orbit Image Slider
リソースの内容を端折ってしまいましたが、CSS3 に対応させるライブラリの他、グリッドシステムや、ちょっと便利な jQuery のプラグインなどがパッケージされています。
まだ使ったことはないですが、ぜひとも使ってみたいフレームワークの1つです。
Pingback: IE9以下の対応 | めもたんスニペット()