コーディングメソドロジー

第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"」のように置き換わります。

01 HTMLソース

JSが無効だった場合にstyleを分ける

JSが無効だったときに、<html>タグに「class="no-js"」が残るので、(02)のようにJSが有効だった場合と無効だった場合とで、異なるstyleを書き分けることができます。

02 CSS

CSS3のプロパティやHTML5の要素が有効か

Firebugなどの開発者用のツールを使い、<html>タグ部分のコードを見てみると(03)のようにHTML5の要素やCSS3のプロパティがたくさん並んでいます。
ここに並んでいるものの中で「no-」が頭文字についているものが今見ているブラウザでは対応できないもの、「no-」が頭文字についていないものが今見ているブラウザで対応できるものとなります。
03)の場合は、「no-touch」や「no-cssreflections」と判定されており、touchイベントが無効になること、CSSのreflectionsが使えないことが判定されており、これらの機能が使用できないことがわかります。

03 HTMLソース

CSS3のプロパティやHTML5の要素が無効だった場合にコメントを出す

このプラグインを使うことで、ブラウザの機能に応じてCSS3のプロパティやHTML5の要素が無効だった場合にclassを付与してくれるので、分岐をすることが可能となります。
機能が対応していないものについては、(04)(05)のようにブラウザの機能を自動的に判定してメッセージを出すことができます。

04 HTMLソース
05 CSS

HTML5やCSS3は主流となりつつありますが、まだまだ古いブラウザに対応する場合が多くあります。こういったプラグインは、クロスブラウザ/プログレッシブ・エンハンスメント対応の際に有効なプラグインだと思いますので活用してみてはいかがでしょうか。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム