CSS3やHTML5の対応状況を判別するクロスブラウザJavaScriptライブラリ「Modernizr」

HTML5 や CSS3 はバリバリ使っていきたいところですが、ブラウザの対応状況も気になるところです。(実際に非対応なのはIEだけなのでどーでもいいけど)
HTML5 や CSS3 を使うということは、古いブラウザを犠牲にする可能性もあります。(実際に非対応なのはIEだけなのでどーでもいいけど)

ということで、

CSS3やHTML5の対応状況を判別するクロスブラウザJavaScriptライブラリ Modernizr

なにができるのか?

ブラウザの HTML5 や CSS3 などの対応状況を判別し、HTML要素にクラスを付加してくれます。

<html lang="ja">

<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">

さらに、Modernizr オブジェクトにこれらのプロパティを格納してくれます。

導入方法

Modernizr から ライブラリをダウンロードして読み込みます。

まずは DEVELOPMENTバージョンを使ってみるといいと思います。
なお PRODUCTIONバージョンでは、使う機能を限定できます。

このライブラリは JavaScript の ON/OFF 判定も可能で、この機能を使う場合は、ディフォルトのHTML要素に class=”no-js” を追加しておく必要があります。

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

CSS3 判定

CSS3 プロパティの対応状況に応じて、HTML要素に以下のクラスが付加されます。
非対応の場合はクラス名の頭に no- が付きます。

例)box-shadow プロパティに対応している場合は boxshadow、非対応の場合は no-boxshadow というクラスが付加される。

@font-face fontface
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow
Flexible Box Model flexbox
hsla() hsla
Multiple backgrounds multiplebgs
opacity opacity
rgba() rgba
text-shadow textshadow
CSS Animations cssanimations
CSS Columns csscolumns
Generated Content (:before/:after) generatedcontent
CSS Gradients cssgradients
CSS Reflections cssreflections
CSS 2D Transforms csstransforms
CSS 3D Transforms csstransforms3d
CSS Transitions csstransitions

使いどころ

box-shadow プロパティに対応しているブラウザと非対応のブラウザでスタイルを変更したい場合。

.box {
	width: 100px;
	height: 100px;
	border: 2px solid #ccc;
}
.boxshadow .box {
	border: 1px solid #999;
	-webkit-box-shadow: #666 1px 1px 10px;
	-moz-box-shadow: #666 1px 1px 10px;
	box-shadow: #666 1px 1px 10px;
}

これでもいけます↓

.box {
	width: 100px;
	height: 100px;
	border: 1px solid #999;
	-webkit-box-shadow: #666 1px 1px 10px;
	-moz-box-shadow: #666 1px 1px 10px;
	box-shadow: #666 1px 1px 10px;
}
.no-boxshadow .box {
	border: 2px solid #ccc;
}

HTML5 判定

applicationCache applicationcache
Canvas canvas
Canvas Text canvastext
Drag and Drop draganddrop
hashchange Event hashchange
History Management history
HTML5 Audio audio
HTML5 Video video
Input Attributes autocomplete, autofocus, list, placeholder, max, min, multiple, pattern, required, step
IndexedDB indexeddb
localStorage localstorage
Cross-window Messaging postmessage
sessionStorag 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

使いどころ

このライブラリは、HTML要素にクラスを付加するだけではなく、Modernizr オブジェクトにプロパティを格納してくれるので、JavaScript で制御するなどが考えられます。

HTML5 Audio の判定

現在のところ、すべてのブラウザで再生可能な HTML5 Audio フォ−マットは存在しません。
対応状況に合わせて読み込むオーディオファイルを変更したりする場合に使えそうです。

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

JavaScript ON/OFF 判定

ディフォルトのHTML要素に class=”no-js” を付加しておくことが前提となります。

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

JavaScript OFF の時

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

JavaScript ON の時

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

使いどころ

JavaScript の ON/OFF によって要素のスタイルを変える場合に使うのでしょう、かね?w

あとがき

ブラウザのHTML5とCSS3の対応状況: HTML5 & CSS3 Support

結局、IEが足を引っ張っているという状況なんですよね。
ほんとにIEってクソですね。消えてなくなればいいのにッ(笑