More than 5 years have passed since last update.

Modernizr（モダナイザー）とは

Last updated at 2019-09-20Posted at 2019-09-20

##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;
}