使いたい機能の対応ブラウザかどうかの簡単な判別方法

ブラウザのバージョンを判別する方法では手間が掛かりすぎる

ウェブページの作成では、古いブラウザへの対処に手間がかかることがあります。HTML5やCSS3など、ウェブ技術もバージョンが上がるにつれて新機能が増えます。しかし、当然ながら、古いブラウザではそれらの機能には対応していません。そのため、「古いブラウザで閲覧された場合」を考慮する必要があります。

閲覧者が利用しているブラウザの種類やバージョンを判別して、「IE9以降だった場合」・「IE8以前だった場合」……のように分岐させる方法もよく使われますが、とても面倒です。

最も面倒な点は、分岐処理を書くことではなく、例えば「IE7では何の機能が使えて何の機能が使えないのか」といった対応状況を自力で把握しておく必要がある点ではないでしょうか。IEだけならまだしも、Firefox、Chrome、Safari、Operaなど、代表的なブラウザの各バージョンも含めれば、対応状況を調べるだけでも大変で、すべてを網羅するのは非現実的です。

「その機能が使えるのかどうか？」を基準に条件分岐できると便利

そこで、「ブラウザの種類やバージョン」を基準にして条件分岐するのではなく、「使いたい機能の対応状況」を基準にして条件分岐ができるスクリプトを使ってみましょう。

そのようなスクリプトを使えば、「○○機能が使える場合」or「○○機能が使えない場合」のような分かりやすい条件分岐で、HTMLやCSS・JavaScriptが書けるようになります。

この「対応状況を基準にした条件分岐」を可能にしてくれる便利なスクリプトに、「Modernizr」があります。

HTML・CSS・JavaScriptの各種機能のうち、自身がウェブ上で使いたい機能にチェックを入れるだけで、「その機能の有無を判別してくれるスクリプト」がダウンロードできます。全機能を選択しても20KB程度しかない小さなスクリプトです。

条件分岐が2つで済むので、クロスブラウザ対応が楽になる

例えば、HTML5で新しく追加された「placeholder」という属性について考えてみましょう。この属性を使うと、テキスト入力欄の内側に、入力例などの文字列を薄く表示させることができます。表示例は右図の通りです。HTML5で追加された仕様なので、比較的新しいブラウザでないと対応していません。

従来なら、「閲覧者のブラウザのバージョンを元にして条件分岐する」か、もしくは「使えないなら使えないで仕方がない」と諦めるくらいしか方法がありませんでした。

しかし、「Modernizr」スクリプトを使うと、

1. placeholderに対応しているブラウザなら、placeholderを使う
2. placeholderに対応していないブラウザなら、別途注釈を表示させる

……といった条件分岐が、簡単に実現できるようになります。

このように、「使える場合」と「使えない場合」のたった2つの条件分岐だけで済む点がとても便利です。HTML・CSS・JavaScriptのたくさんの機能について、「それが使えるのかどうか？」を基準に条件分岐できるため、「IE8以下の場合」や「IE9以上の場合」など、ブラウザのバージョンで判別する必要がなくなります。クロスブラウザ対応が、かなり楽になるでしょう。

今回は、この「Modernizr」を使って、「使いたい機能に対応しているかどうか」を基準にして条件分岐し、楽に「古いブラウザ」への対処もしつつ、新機能を安心して使えるようにする方法をご紹介致します。

それでは、次のページから「Modernizr」の設置方法と使い方を見ていきましょう。