ブラウザによって適用させるCSSを振り分ける方法
スクリプト・.htaccessによって振り分け
javascriptやcgi、.htaccessによってUAを取得し、それによってlink要素で呼び出すCSSを変更する方法です。
コンディショナルコメントを使う（Win Internet Explorer向け）
<head>～</head>で<!--[if IE]>～<![endif]-->の間にIE向けのCSSを記述します。<style type="text/css">～</style>でもlink要素による外部CSSファイル呼び出しでもOKです。
コンディショナルコメントの書き方・使える値
| IEに適用 | <!--[if IE]>～<![endif]--> |
|---|---|
| IE以外に適用 | <!--[if !IE]>～<![endif]--> |
IEの部分は「expression」といい、「comparison」「 feature 」「version」の三つの適用条件で構成されます。「 feature 」がブラウザの種類で、現状ではIEのみ指定できます。「comparison」はブラウザのバージョンの比較による適用範囲指定、「version」はブラウザのバージョン指定でこの二つは省略可能です。
| comparisonで指定できる値 | versionで指定できる値 | ||
|---|---|---|---|
| 値 | 指定内容 | 値 | 指定内容 |
| lt | versionより下のIEに適用する。versionで指定したIEには適用しない | 7 | IE 7を指定 |
| lte | version以下のIEに適用する。versionで指定したIEにも適用 | 6 | IE 6を指定 |
| gt | versionより上のIEに適用する。versionで指定したIEには適用しない | 5.5 | IE 5.5を指定 |
| gte | version以上のIEに適用する。versionで指定したIEにも適用 | 5 | IE 5.xを指定 |
<!--[if IE7]><ink rel="stylesheet" type="text/css" href="ie7.css"><![endif]--> <!--[if lte IE6]><ink rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
上記の例だと、「IE 7で見たときには『ie7.css』が適用」され、「IE 6以下で見たときには『ie.css』が適用」されます。
@規則によって振り分ける
古いブラウザを対象とした振り分け方法です。
@importハック
CSS1しか解釈できないブラウザが@importを解釈しないことを利用したハック。
- simple.css … 古いブラウザ用のシンプルなCSS
- import.css … 最近のブラウザ用のCSSをimportするためのCSS（中身は
@import "modern.css";） - modern.css … 最近のブラウザ用のCSS
を用意して、HTML側で
<link rel="stylesheet" type="text/css" href="simple.css"> <link rel="stylesheet" type="text/css" href="import.css">
とします。注意点は「import.css」でのimportするCSSファイルのパスの書き方。@import url("modern.css");のようにすると一部の古いブラウザでは読み込まれてしまうようです。パスの書き方による@import規則のサポート状況はComplex @import rulesを参考にしてください。
@import + media属性の合わせ技
<link rel="stylesheet" type="text/css" href="no_NN4.css" media="all">
media属性にallを指定するとNN4では見えない。
<style type="text/css">@import "modern.css" screen;</style>
style要素にて@importの後にmediaタイプとしてall以外の値、例えばscreenなどを指定するとIEからは見えない。
media queryハック
CSS3で定められているmedia queryを使ったOpera向けのハック。
media queryについてはMedia Queriesを参照。
CSSハック
セレクタやプロパティの書き方によって適用するCSSを振り分けるハック。
| 対象 | 書き方 | 原理 | 文法 |
|---|---|---|---|
| IE6のみ適用 | * html element { } | バグ | ○ |
| IE7のみ適用 | *:first-child + html element { } | バグ | ○ |
| IE6を除外（モダンブラウザ） | html > body element { } | IE 6が子供セレクタに対応していないことを利用 | ○ |
| IE6、IE7を除外（モダンブラウザ） | html>/**/body element { } | バグ | ○ |
| Operaに適用 | * + html:first-child body { } | ○ | |
| Safariに適用 | /*\*/ html:\66irst-child { } /* end */ | ○ | |
| Mac IE適用 | /*\*//*/ selector { property: value; }/**/ | バグ | ○ |
| IE 5～IE 7に適用 | selector { *property: value; } | バグ | × |
| IE 5～IE 6に適用 | selector { _property: value; } | バグ | × |
その他のCSSハック、対応ブラウザ状況はGoogle ドキュメント - css-hacksを参照。
CSSハックを使うことについて雑感
色々紹介しましたが、最良の方法はハックを使わなくてもいいレイアウトを考えることだと思います。
ブラウザのセレクタ対応状況やバグを利用したハックは、ブラウザの改良によって使えなくなる可能性もあるのでメンテナンスがちょっと大変になるかも。
また、全てのブラウザで完全に同じ表示を望むのは難しいので、自分の中でサポートするブラウザの線引きをする、古いブラウザは切捨てと割り切る方が気楽にサイト作成できるような気がします（だからって対象外のブラウザを弾いたりはしないように）。あくまでも個人サイト作成の話。