ここで問題なのは、「どのバージョンまでが古いブラウザで、どのバージョンからが新しいブラウザなのか」を調べるのが非常に面倒だという点です。
例えば、R（赤）・G（緑）・B（青）の三原色に、A（透明度）を加えた「RGBAカラーモデル」という色指定方法が、CSS3で追加されました。
この機能は、代表的な各ブラウザでは、
・Internet Explorerなら、Ver.9から対応（つまりIE8以下が未対応）
・Firefoxなら、Ver.3から対応（つまりFirefox2以下が未対応）
・Chromeなら、Ver.1から対応
・Sarariなら、Ver.3から対応（つまりSafari2以下が未対応）
・Operaなら、Ver.10から対応（つまりOpera9以下が未対応）
……という対応状況になっています。
これらの情報を、使いたい機能ごとに1つ1つ調べるのは手間がかかります。
また、それを調べた後、対応状況ごとに条件分岐を作るのも大変です。
そこでオススメなのが、「Modernizr」というスクリプトです。
このスクリプトをウェブページに読み込むと、HTML5やCSS3の各機能について、「指定の機能がそのブラウザで使えるのかどうか」を自動識別してくれます。
その結果、自身の使いたい機能が「使える場合」と「使えない場合」の、わずか2種類の条件分岐さえ用意しておけば、古いブラウザへの対処が済むことになります。
ブラウザの対応状況を1つ1つ調べる必要はありませんし、ブラウザのバージョンを元にした「複雑な条件分岐」を書く必要もありません。
以下のサンプルページをご覧ください。
ここには、1枚の風景写真と文章が掲載してあります。
もし、閲覧者のブラウザが「RGBAカラーモデル」に対応している場合には、文章の背景を「黄色の半透明」にした上で、画像に重ねて表示します。
もし、「RGBAカラーモデル」に対応していない場合には、文章は画像の下部に表示します。
対応ブラウザで閲覧した場合は、下図のように見えます。
▼Chrome33の表示例
未対応ブラウザで閲覧した場合は、下図のように見えます。
▼IE6の表示例
スクリプト「Modernizr」を使うと、このような分岐が、自力で「ブラウザのバージョン」をチェックすることなく、短い記述だけで簡単に作れます。
前回の記事や、上記サンプルページのHTMLソースもご覧になりながら、以下の解説をお読みください。ここでは、4ステップに分けてご紹介いたします。
●1. スクリプト「Modernizr」をダウンロードする
まずは、「Modernizr」をダウンロードしましょう。
下記の公式サイトにアクセスして、右側の「PRODUCTION」と書かれたボタンをクリックします。
すると、HTML5やCSS3などの機能一覧が表示されます。この中から、ウェブページ内で利用したい機能名をすべて選択します。面倒なら全部選択しても構いません。
リストの下部にある「Non-core detects」という部分をクリックすると、さらに機能が表示されます。サンプルページのように、「RGBAカラーモデル」の使用可否を識別したい場合は、リストの「CSS3」枠内にある「rgba()」項目にチェックを入れます。
必要な機能にチェックが入れられたら、下部の「GENERATE!」ボタンをクリックします。だいたい10秒弱くらい待つと、スクリプトが生成されます。
生成されると「DOWNLOAD」ボタンが表示されますから、それをクリックして、スクリプト（JavaScriptファイル）をダウンロードします。
●2. スクリプト「Modernizr」をウェブページに読み込む
ダウンロードしたファイル（例えば「modernizr.custom.35127.js」など）はウェブ上の適当な場所にアップロードしてください。
その上で、HTMLのhead要素内に、以下のように記述して読み込みます。
<script src=”modernizr.custom.35127.js”></script>
これで、準備は完了です。
●3. サンプルHTMLを記述する
サンプルページでは、HTMLソースを、以下のように記述しています。段落（p要素）が2つあり、片方には画像を、もう片方には文章を掲載しているだけのシンプルなソースです。
<p> <img src="im29-image.jpg" width="400″height="267" alt="風景写真"> </p> <p> ブラウザがRGBAカラーモデルに対応している場合は半透明にして表示。 対応していない場合は画像の下部に表示。 </p>
●4. CSSを使って、条件分岐を作る
CSSソースは以下のような感じで記述します。ここでは、説明のために、簡略化して掲載しています。ボックスを半透明にするなどの具体的な記述は、サンプルページのソースをご参照ください。
<style type=”text/css”>
.rgba {
/* 〜RGBAカラーモデルに対応している場合のスタイル〜 */
}
.no-rgba {
/* 〜RGBAカラーモデルに対応していない場合のスタイル〜 */
}
</style>RGBAカラーモデルが利用可能なブラウザで閲覧すると、「Modernizr」スクリプトによって、html要素に「rgba」というclass名が付加されます。
したがって、上記のように「.rgba」とセレクタを記述すると、「RGBAカラーモデルが有効なブラウザに対してだけ適用される装飾」を記述できます。
また、RGBAカラーモデルが利用できないブラウザで閲覧すると、html要素に「no-rgba」というclass名が付加されます。
したがって、「.no-rgba」とセレクタを記述すると、「RGBAカラーモデルが無効なブラウザに対してだけ適用される装飾」を記述できます。
このようにして、使いたい機能に「対応している場合」と「対応していない場合」の2つの条件分岐を記述することができます。
各ブラウザの対応状況を自力で調べる必要はありません。なお、どの機能が、どのようなclass名で識別できるのかは、「Modernizr」公式サイト内の、Documentationページに掲載されています。
リストにある「Feature」欄が機能名で、「CSS classname」欄がclass名です。
例えば、「border-radius」機能に対しては、「borderradius」と表記されています。
これは、
・border-radiusに対応していれば、「borderradius」classが付加
・border-radiusに非対応なら、「no-borderradius」classが付加
されるという意味です。
今回は、使いたい新機能の対応状況を自力で調べることなく、「古いブラウザで閲覧された場合の対策」が簡単にできるスクリプト「Modernizr」の使い方を簡単にご紹介いたしました。
HTML5やCSS3などで追加された新機能を使いたい場合に、ぜひご活用ください。
ご注意ください
カテゴリーから探す
タグから探す