Modernizrの基本的な使い方 – ブラウザの機能にあわせて簡単にJS,CSSで分岐させる方法

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【Modernizrの基本的な使い方 – ブラウザの機能にあわせて簡単にJS,CSSで分岐させる方法】です。つい先日公開した「jQuery CSS3 transform及びtransitionが動作するかどうかの判別方法 – CSS3アニメーションとjQueryアニメーションの使い分け」という記事でも少し書きましたが、Modernizrはブラウザの機能に併せてJSやCSSを簡単に分岐させる事ができる便利なライブラリです。いまさら!?と言われてしまえばそうなんですが…汗。復習の意味をこめて改めて基本的な部分からメモしていきます。個人的にはHTML5のCANVASが使用できるかの判別やSVGが使えるかの判別で使用する事があります。

はじめに

まずは公式ページでライブラリをダウンロードしてきましょう。どの判別/分岐を利用したいか選択する事ができますので必要な分だけチェックします。

ダウンロードが完了したら以下の様にJSの読み込みを記述します。

<script src="js/modernizr.js"></script>

CSSでの分岐

読み込みが完了したら早速任意のブラウザでHTMLを確認してみてください。<html>タグに様々なclassが付与されているかと思います。ブラウザの機能に併せてCSSを書き換える場合にはこのクラスを使用します。試しにModernizrを読み込んだOpera 12.16の要素を検証して<html>タグを確認してみます。(デモ

様々なクラスが付与されているのが確認できたかと思います。クラスを一つ一つみていくと途中で先頭にno-という名称が付いているクラスが読み取れるかと思います。


このno-が付いている機能は閲覧中のブラウザ(画像ではOpera)では非対応だという事になります。

例)transform3Dで判別してみる
#item{
height:100px;
width:100px;
transform: translate3d(10px);
}
.no-csstransforms3d #item{
display:none;
}

例ではtransform3Dが使えない環境ではID名【item】を非表示にしてみます。このように様々な機能にあわせてCSSを書き分ける事が可能になります。

javascriptでの分岐

次にjavascriptでの分岐例です。以前書いた記事と内容がかぶってしまいますが、ざっとまとめておきたいので良く使うcanvasとsvg、transitionの判別からメモしていきます。またHTML5のaudioタグでは拡張子での判別、inputではtypeやplaceholderでの判別等かなり細かく記述できます。

HTML5 CANVASでの判別
if(Modernizr.canvas){
//canvasが動作する場合。
}else{
//canvasが動作しない場合。
}
HTML5 CANVAS TEXTでの判別
if(Modernizr.canvastext){
//canvas textが動作する場合。
}
SVGでの判別
if(Modernizr.svg){
//SVGが動作する場合。
}
input placeholderでの判別
if(Modernizr.placeholder){
//placeholderが動作する場合。
}
input typeでの判別(type=”color”)
if(Modernizr.inputtypes.color){
//input type=”color”が動作する場合。
}

などなど…かなりたくさんありますので以降は表にしてまとめてきます。一部不足もあるかと思いますので詳しくは公式のDOCをご参照ください。
 

@font-face fontface
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow
Flexible Box Model flexbox
Multiple backgrounds multiplebgs
opacity opacity
rgba() rgba
text-shadow textshadow
CSS Animations cssanimations
CSS Columns csscolumns
CSS Gradients cssgradients
CSS Reflections cssreflections
CSS 2D Transforms csstransforms
CSS 3D Transforms csstransforms3d
CSS Transitions csstransitions
applicationCache applicationcache
Canvas canvas
Canvas Text canvastext
Drag and Drop draganddrop
hashchange Event hashchange
History Management history
HTML5 Audio audio
HTML5 Video video
Input Types inputtypes.search
inputtypes.tel
inputtypes.url
inputtypes.email
inputtypes.datetime
inputtypes.date
inputtypes.month
inputtypes.week
inputtypes.time
inputtypes.datetime-local
inputtypes.number
inputtypes.range
inputtypes.color
placeholder placeholder
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
Touch Events touch
WebGL webgl

基本的な機能は以上です。この他にも対応していないプロパティをjavascriptで補完するPolyfill機能や読み込みファイルの対応状況で分岐が実現できるload機能等さらなる便利な機能まであります。それらは長くなりますのでまたの機会にでも記事化します。

以上になります。