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

Posted on: 2012/04/06

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ってクソですね。消えてなくなればいいのにッ（笑

hijiriworld Web