1300の優良サイトが選んだシリース、第4回は「ブラウザの種類・機能判定」です。
以前「マルチブラウザとクロスブラウザの違いは何か？」という記事を書きました。コンテンツの相互運用性の対策を、「Webブラウザの種類」でやるか「Webブラウザの機能」でやるか、理想は後者が良いとは言われても、現実を見て前者も選択しざる得ないのが実状でしょう。
本サイトはあくまで実利主義なので、現場の実状に合わせて実際にどんな具体的な対策が行われているのか確認する方向で攻めてみようかと思います。
今回も、1300のWebサイトを解析し、実運用の中でどんな対策が行われているのか集計してみました。ここで得られた情報を元に、ベストプラクティスについて考えてみましょう。
IE条件付き書式 (1171件)
HTMLドキュメント内で、IEのバージョンごとに有効・無効を切り替えるIEの独自仕様。
<!--[if IE 6.0]>IE6の場合<![endif]--> <!--[if IE 7.0]>IE7の場合<![endif]--> <!--[if IE 8.0]>IE8の場合<![endif]--> <!--[if IE 9.0]>IE9の場合<![endif]-->
jQuery (727件)
DOMを独自オブジェクトとして抽象的に扱い、マルチブラウザ対策を行うライブラリです。豊富なプラグインを持ち、JavaScriptベースRIAの実現に多大な影響を与えています。
- 公式サイト：http://jquery.com/
- ライセンス：MIT License
- 開発：The jQuery Foundation.
CSS Browser Selector (7件)
CSS上でWebブラウザの種類を判定し、WebブラウザごとのCSSの作り込みが行えるようにするためのCSSライブラリです。
- 公式サイト：http://rafael.adm.br/css_browser_selector/
- ライセンス：Creative Commons (Attribution 2.5 Generic)
- 開発：Rafael Lima
Useragent.js (7件)
JavaScript上でWebブラウザの種類を判定し、WebブラウザごとのJavaScriptの作り込みが行えるようにするためのJavaScriptライブラリです。
- 公式サイト：http://docs.closure-library.googlecode.com/git/closure_goog_useragent_useragent.js.html
- ライセンス：Apache License, Version 2.0
- 開発：The Closure Library Authors
jquery.browser (5件)
Webブラウザごとの動作の差異を吸収するため、ユーザエージェントの特定処理を実現するjQueryプラグインです。 かつてはデフォルトで実装されていましたが、jQuery1.3以降サポートされなくなったAPIであるため、本プラグインの追加が必要です。
- 公式サイト：https://github.com/gabceb/jquery-browser-plugin
- ライセンス：MIT License
- 開発：Gabriel Cebrian
Modernizr (33件)
Webブラウザの持つHTML・JavaScript・CSS機能を判定し、機能の有無に応じたJavaScript/CSSの作り込みが行えるようにするためのライブラリです。
- 公式サイト：http://modernizr.com/
- ライセンス：MIT License
- 開発 : Faruk Ateş、Paul Irish、Alex Sexton、Ryan Seddon、Alexander Farkas
ベストプラクティスは？
マルチブラウザとクロスブラウザ。どちらか一方だけに寄せるという考え方はあまりなく、セットで考えるのが一般的でしょう。HTML5 Boilerplateに入っているということもあり、条件付き書式+jQuery+Modernizrはデフォルトになりつつあるようです。
上記以外にも、CSSアスタリスクハックを使ったIE限定のCSSプロパティ指定など、キリが無いほど方法がありますが、ここでは上げません。ユーザスクリプトではあまり推奨される手段とは思えないためです。
Webブラウザのシェアの変化で、マルチブラウザからクロスブラウザに移行が進むかと思いますが、今はとりあえずこの組み合わせで踏ん張っていくのが良いでしょう。
