Modernizrの基本的な使い方 – ブラウザの機能にあわせて簡単にJS,CSSで分岐させる方法
どうもこんにちは。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機能等さらなる便利な機能まであります。それらは長くなりますのでまたの機会にでも記事化します。
以上になります。