CSSハックで、クロスブラウザ対応のCSSを記述する

クロスブラウザなレイアウトデザインテクニック 第2回

特定ブラウザ専用の外部スタイルシート

　CSSのサポートが不十分なバージョン3-4世代のブラウザに対しては、CSSを適用しない、という方法を取りましたが、比較的新しいバージョン5以降のブラウザに対しては、特定ブラウザ専用のスタイルシートで対応するのが良いでしょう。1つのCSSファイルだけで、あらゆるブラウザの見栄えを制御しようとすると、スタイルを修正した際、あらゆるブラウザで動作確認をする必要が出てきて面倒です。例えば、Win IE 6専用のスタイルシートを用意しておけば、その中のスタイルを変更した場合、Win IE 6の表示確認をするだけで済みます。

　仕組みとしては、まず、正しい解釈をする基本のスタイルシートを読み込ませた上で、正しく解釈できない部分を特定ブラウザ専用のスタイルシートで上書きする形になります。この順番を間違えると、正しい解釈をする基本のスタイルシートで上書きしてしまい、意図した結果を得ることができなくなりますので注意してください。

パスフィルタ

　特定のブラウザにのみ専用の外部スタイルシートを読み込ませるものとして、「パスフィルタ（pass fillters）」と呼ばれるテクニックがあります。

　前章では、Holly Hackを利用してCSSの適用対象からMac IE 5を排除する方法を紹介しました。Mac IE5で表示確認のできる環境の場合には、Mac IE5をCSSの適用対象とし、外部スタイルシートを用いて表示問題に対応するのも良いでしょう。

　下記のサンプルコードは、Holly Hackの仕組みを応用したもので、Mac IE5にのみ外部スタイルシート「mac_ie5.css」を読み込ませるパスフィルタです。

CSSソース：Mac IE 5用パスフィルタ

/*/*\*//*/
@import "mac_ie5.css";
/**/

　以下、主なパスフィルタのサンプルコードとなります。

CSSソース：Win IE 5用パスフィルタ

@media tty{
i{content : "\";/*" "*/}}; @import 'win_ie5.css'; {;}/*";}
}/* */

CSSソース：Win IE 5.5用パスフィルタ

@media tty{
i{content : "\";/*" "*/}}@m; @import 'win_ie55.css'; /*";}
}/* */

CSSソース：Win IE 5-5.5用パスフィルタ

@media tty{
i{content : "\";/*" "*/}}@m; @import 'win_ie5_55.css'; /*";}
}/* */

CSSソース：モダンブラウザ（Win IE 6、Mac IE 5、Mozila、Firefox、Opera 6-8、Netscape 6-8、Safariなど）用パスフィルタ

@import "null?\"\{";
@import "modern.css";
@import "null?\"\}";

条件分岐コメントによるバージョンの振り分け

　Win IEのバージョン6以下は、CSSサポートの面で問題の多いブラウザでしたが、新バージョンのWin IE 7では、多くの問題が改善されWeb標準により準拠したものとなりました。

　これまで、Win IE 5-6に対して、バージョンの区別をせずに一括してCSSハックを利用する例も多くあったのですが、そのようなWebページに、Win IE 7でアクセスすると、表示が崩れてしまう（それは、本来の正しい解釈による表示）という問題が起こることがあります。

　ブラウザをバージョンごとに振り分ける方法としては、前項のパスフィルタを使用するほか、JavaScriptやサーバサイドプログラムを使用するという方法が一般的ですが、Win IEのバージョン5以上に限っては、「条件分岐コメント(Conditional comments)」というものを使用することで、(X)HTML文書内で簡単にこれを制御することができます。

　条件分岐コメントは、IE独自の仕様ということで懸念する声もあるようですが、CSSハックを使用せずともバージョンの振り分けができ、あくまでコメントとしての記述であるため、妥当な（Valid）ものとしてバリデーターに通るというメリットがあります。(X)HTML内に振り分けのためのコメント記述が増えるとはいえ、他のブラウザに影響せず、バリデータに通るというのは、使用時の言い訳としては最適です。また、保守性の面でCSSハックのためのIE専用の外部スタイルシートを別ファイルで管理できるというのも魅力的です。

　懸念される声というのは、IEの独自仕様である（Web標準上正式な利用が許可されているわけではない）という点や、CSSの実装不備を(X)HTMLで制御するという点でしょうか。ちなみに、IE開発チームは、「IEBlogのCall to action: The demise of CSS hacks and broken pages」の中で、CSSハックを使用するよりも条件分岐コメントを使用することを推奨していますから、将来的に条件分岐コメントが使えなくなるような問題はないとみて良いでしょう。

条件分岐コメントの書式

　条件分岐コメントの基本的な書式は、指定バージョン、指定バージョン以上、指定バージョン未満に分かれます。それぞれ次のように書きます。

指定バージョンのみ

<!--[if IE 指定バージョン]>内容<![endif]-->

指定バージョン以上

<!--[if gte IE 指定バージョン]>内容<![endif]-->

指定バージョン未満

<!--[if lt IE 指定バージョン]>内容<![endif]-->

　また、指定バージョンの記述にもルールがあります。適当に記述しても認識されない場合があるので注意してください。

条件分岐コメントの指定バージョンの記述

指定バージョンのみ	IE 5.0	IE 5.5	IE 6.0
<!--[if IE 5.0]>内容<![endif]-->	○
<!--[if IE 5.5000]>内容<![endif]-->		○
<!--[if IE 6.0]>内容<![endif]-->			○
指定バージョン以上	IE5.0	IE5.5	IE6.0
<!--[if gte IE 5.0]>内容<![endif]-->	○	○	○
<!--[if gte IE 5.5000]>内容<![endif]-->		○	○
<!--[if gte IE 6.0]>内容<![endif]-->			○
指定バージョン以下	IE5.0	IE5.5	IE6.0
<!--[if lt IE 5.0]>内容<![endif]-->	○
<!--[if lt IE 5.5000]>内容<![endif]-->	○	○
<!--[if lt IE 6.0]>内容<![endif]-->	○	○	○

　次のサンプルコードでは、Win IE 5にのみ、外部スタイルシートを読み込ませるよう指定しています。もちろん、他のバージョンを含むブラウザでは、コメントとして扱われるため、ここで指定した外部スタイルシート（win_ie5.css）は読み込まれません。

Win IE 5のみ外部スタイルシート（win_ie5.css）を読み込ませる

<!--[if IE 5.0]> <link rel="stylesheet" type="text/css" href="win_ie5.css"  /> <![endif]-->

　なお、条件分岐コメントは、利用をスタイルシートに限ったものではありませんので、例えば、IEにのみJavaScriptを読ませたり、IEでのみ表示されるメッセージを作ったりすることも可能です。条件分岐コメントについてのより詳しい情報は、「About Conditional Comments」を参照してください。