Modernizr

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

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

Modernizrとは

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

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

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

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

Modernizrの使い方

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

1. ダウンロードする

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

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

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

Modernizr

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

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

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

Modernizr1
  • 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で使えない機能が見当たりませんでしたので、ボックスシャドウが対応していないブラウザを仮定して以下に説明します。

Modernizrの使い方: JavaScript編

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

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

最後に

フロントエンド開発用のフレームワーク -G5 Frameworkというのがあるのですが、この中に『Modernizr』が同梱されています。

フレームワーク -G5 Framework

G5

同梱リソース

  • 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つです。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

トップへ戻る