- Coding Methodology
- 第68回 Modernizr.jsでCSS3やHTML5を条件分岐
第68回 Modernizr.jsでCSS3やHTML5を条件分岐
Modernizr.jsは、ブラウザでHTML5やCSS3の各機能の実装状況やJSの有効／無効を検出・判定してくれるJSプラグインです。
JavaScriptのUserAgentだけでは判定しづらいCSS3／HTML5の細かいプロパティを確認することができ、その判定結果をclass名で出力してくれるのが便利なポイントです。
読み込みの準備
html内にリンクをしたら、<html>タグ内にclass="no-js"と記述することで機能が発動します。
JSが有効か無効かの判定
Firebugなどの開発者用のツールを使い、コードを見てみるとJSが有効だった場合、（01）のように、「no-js」と書いたclassが「class="js"」のように置き換わります。
JSが無効だった場合にstyleを分ける
JSが無効だったときに、<html>タグに「class="no-js"」が残るので、（02）のようにJSが有効だった場合と無効だった場合とで、異なるstyleを書き分けることができます。
CSS3のプロパティやHTML5の要素が有効か
Firebugなどの開発者用のツールを使い、<html>タグ部分のコードを見てみると（03）のようにHTML5の要素やCSS3のプロパティがたくさん並んでいます。
ここに並んでいるものの中で「no-」が頭文字についているものが今見ているブラウザでは対応できないもの、「no-」が頭文字についていないものが今見ているブラウザで対応できるものとなります。
（03）の場合は、「no-touch」や「no-cssreflections」と判定されており、touchイベントが無効になること、CSSのreflectionsが使えないことが判定されており、これらの機能が使用できないことがわかります。
CSS3のプロパティやHTML5の要素が無効だった場合にコメントを出す
このプラグインを使うことで、ブラウザの機能に応じてCSS3のプロパティやHTML5の要素が無効だった場合にclassを付与してくれるので、分岐をすることが可能となります。
機能が対応していないものについては、（04）（05）のようにブラウザの機能を自動的に判定してメッセージを出すことができます。
HTML5やCSS3は主流となりつつありますが、まだまだ古いブラウザに対応する場合が多くあります。こういったプラグインは、クロスブラウザ／プログレッシブ・エンハンスメント対応の際に有効なプラグインだと思いますので活用してみてはいかがでしょうか。
