Modernizr（モダナイザー）とは #ライブラリ

1. Modernizr（モダナイザー）とは

JavaScriptやCSSを書いていると「新しい機能が使えるブラウザではそれを使い、そうでない場合は別の手段で代替する」というように、処理を分岐させたい場合がある。

Modernizr（モダナイザー）とは、そういった「機能検出」のためのJavaScriptライブラリ。

このライブラリを使用すると、各ブラウザが特定の機能をサポートしているかどうかを判定し、その結果によって条件を分岐させることができる。

2. どうやって使うのか

Modernizr（モダナイザー）のソースコードは、Modernizr公式サイトから必要な機能に絞ってダウンロードできる。

2-1. JavaScriptの場合

例えば、JavaScriptのタッチイベントが使えるか否かを知りたい場合は、公式ダウンロードページで「Touch Events」の項目にチェックを入れてファイルをダウンロードし、読み込む。

これだけの手順で、必要な機能検出が行えるようになる。

▼JavaScriptでは、Modernizr.touchというプロパティを利用して処理を分岐できる。

Modernizrを使用したスタイルの分岐例

if(Modernizr.touch) {
    // タッチイベントが利用できる場合の処理
} else {
    // タッチイベントが利用できない場合の処理
}

2-2. CSSの場合

▼CSSの場合、タッチイベントをサポートしているブラウザであれば「touch」、そうでない場合は「no-touch」というクラスがhtml要素に追加されるので、これをもとにスタイルを分岐できる。

Modernizrを使用したスタイルの分岐例

.thumb {
    /*デフォルトのスタイル*/
}

.no-touch .thumb {
    /*タッチイベントが利用できない場合のスタイル*/
}

3. JavaScriptが無効になっている場合を考慮する

せっかくJavaScriptやjQueryで、フェードイン、フェードアウトなどの動きを実装しても、ブラウザのJavaScriptが無効になっていると何も表示されない。

この問題を解決する方法として、Modernizr（モダナイザー）を使用した方法を考える。
（Modernizr = ブラウザのJavaScriptが有効かどうかを判定するもの。）

3-1. no-jsの指定

main.html(no-jsの指定部分)

<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<!-- 省略 -->

Modernizrには「html要素にno-jsというクラスがあった場合、このクラスを削除し、代わりにjsというクラスを追加する」機能がある。

=> html要素にjsクラスがあればJavaScriptが有効、no-jsクラスがあれば無効。

3-2. JavaScriptの有効・無効による処理の切り分け

main.css(JavaScriptの有効・無効による処理の切り分け部分)

/*デフォルト（JavaScript 有効時）*/
.slideshow img {
    display: none;
    /*省略*/
}

/*JavaScript 無効時*/
.no-js .slideshow img:first-child {
    display: inline;
}

まず、JavaScriptが有効である前提でスタイルを書く。
=> JavaScriptが有効ならスライドがフェードインする。
次に、JavaScriptが無効の場合のスタイルを追加する。
=> JavaScriptが無効なら最初のスライドがそのまま表示されることになる。