様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」-JavaScript Library Archive

様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」

配布元：Modernizr
ライセンス：MIT & BSD licenses.

ModernizrはTwitterなどの大手サイトでも採用されているブラウザの機能の実装状況を調査するためのJavaScriptライブラリです。

たとえばModernizrを読み込んだサイトではhtml要素が次のように書き換えられます。

<html lang="ja" class="no-js">

　↓

<html lang="ja" class="js flexbox flexbox-legacy rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent">

CSS3などの対応状況をHTML要素のclass属性に入れてくれるので次のようにCSS3に対応しているブラウザと対応していないブラウザで表示を切り替えることが可能です。

.box {
   border-bottom: 1px solid #666;
   border-right: 1px solid #777;
}
.boxshadow div.box {
   border: none;
   -webkit-box-shadow: #666 1px 1px 1px;
      -moz-box-shadow: #666 1px 1px 1px;
               box-shadow: #666 1px 1px 1px;
}

サンプル

Modernizrの利用方法

最初に利用する場合はDevelopmentバージョンをダウンロードしてページ内に読み込みます。

Production バージョンでは利用する機能を絞り込み圧縮したバージョンが作成できますので、サイトを公開する際には、利用した機能のみを絞り込んだバージョンに差し替えると良いでしょう。

JavaScript ON / OFFの判定

html要素にあらかじめclass属性「no-js」を指定しておくとModernizrはhtml要素にclass属性「no-js」を「js」に変更します。これによりJavaScript のON / OFFにより適応できるスタイルが変化します。

.no-js #div{
   /*JavaScript OFF 時の記述*/
}
.js #div{
   /*JavaScript ON 時の記述*/
}

判定できるCSS3機能

次のようなCSS3を判定して、対応してる場合はclass属性を対応しない場合は「no-fontface」といった具合にno-という接頭辞がついたclass属性が付加されます。

.rgba #div{
   /*rgba が利用できる際の記述*/
   color:rgba(0,0,0,0.5);
}
.no-rgba #div{
   /*rgba が利用できない時の記述*/
   color:#666666;
}

判定する機能	付加されるclass属性
@font-face	fontface
background-size	backgroundsize
border-image	borderimage
border-radius	borderradius
box-shadow	boxshadow
Flexible Box Model (flexbox)	flexbox
Flexbox Legacy	flexbox-legacy
hsla()	hsla
multiple backgrounds	multiplebgs
opacity	opacity
rgba()	rgba
text-shadow	textshadow
CSS Animations	cssanimations
CSS Columns	csscolumns
SS Generated Content(:before/:after)	generatedcontent
CSS Gradients	cssgradients
CSS Reflections	cssreflections
CSS 2D Transforms	csstransforms
CSS 3D Transforms	csstransforms3d
CSS Transitions	csstransitions

判定できるHTML5機能

HTML5に関しても機能の判定が可能です。

applicationCache	applicationcache
Canvas	canvas
Canvas Text	canvastext
Drag and Drop	draganddrop
hashchange Event	hashchange
History Management	history
HTML5 Audio	audio
HTML5 Video	video
ndexedDB	indexeddb
input属性	autocomplete, autofocus, list, placeholder, max, min, multiple, pattern, required, step
localStorage	localstorage
Cross-window Messaging	postmessage
sessionStorage	sessionstorage
Web Sockets	websockets
Web SQL Database	websqldatabase
Web Workers	webworkers
Geolocation API	geolocation
Inline SVG	inlinesvg
SMIL	smil
SVG	svg
SVG Clip paths	svgclippaths

Modernizrではclass属性を追加するだけでなく、Modernizrオブジェクトに各機能が利用できるかのフラグがプロパティに格納されますのでJavaScriptを利用する場合にも利用が可能です。

if (Modernizr.svg){
   alert("SVG対応")
} else {
   alert("SVG未対応")
}

Modernizr.audioは更に「ogg」「 mp3」「wav」「and」「m4a」のプロパティをもち、対応可能なファイル形式も判定できます。

次のように各ファイルを用意しておき利用できるファイルを判定して利用します。

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

その他の機能

他にも様々な機能が確認できます。

Touch Events	touch
WebGL	webgl

スポンサードリンク

カテゴリー：CSS3 HTML5 iPad ライブラリ製作補助系

直前:アニメーションをCSS3のtransitionで行う「jQuery transition Animate」

直後:iPhoneで横向きにした際の拡大バグを修正する「iOS-Orientationchange-Fix 」

様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」 JavaScript Library Archive