ホームページ作成/レイアウトの作成・調整 (HTML,CSS)

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

HTML5やCSS3などの新機能を使いつつ、古いブラウザへの対策もしたい場合、「ブラウザの種類やバージョン」を元にして条件分岐するのは大変面倒です。そんなときは、「ある機能が使えるかどうか」を基準にして条件分岐ができるスクリプト「Modernizr」を使うと便利です。ブラウザのバージョンによる判別が不要になり、クロスブラウザ対応が楽になります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

バージョンで判別すると処理が煩雑で面倒

バージョンで判別すると処理が煩雑で面倒

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

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

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


 

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

機能で判別すれば処理がシンプルで明確

機能で判別すれば処理がシンプルで明確

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

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


 
Modernizr公式サイト

Modernizr公式サイト

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

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


 

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

HTML5で追加された「placeholder」属性は、古いブラウザ(下側)では表示できない

HTML5で追加された「placeholder」属性は、古いブラウザ(下側)では表示できない

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

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

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

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

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

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

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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます