ブラウザ毎の対処(2)

CSSを使う時は、スタイルシートに対応していないブラウザや、ボックスの解釈が異なるブラウザに対応する必要があります。

対処として、CSSを読み込ませない・指定したブラウザのみにCSSを読み込ませる等の方法があります。
※細かい個別のハックについては別記事で

■スタイルシートへの対応が不十分な古いブラウザに、CSSを読み込ませない方法

NN4に読み込ませない

XHTML内で、外部CSSを読み込ませる際、mediaにscreen以外を指定するか同時に複数指定します。
例）<link rel=”stylesheet” href=”import.css” type=”text/css” media=”screen,tv” />

Windows IE3-4、Mac IE4、NN4に読み込ませない

CSSファイルのソースを記述する際に、@importルールでURLを”"で囲みます。
例）import.css内の記述…@import “base.css”;

■指定したブラウザにのみ、CSSを適用する方法：パスフィルター

CSSファイルのソースを記述する際に、組み合わせて使います。以下、よく使われるパスフィルターです。

Win IE5-5.5 のみに適用

@media tty {
i {content : “\”;/*” “*/}} @import ‘win-ie5-55.css’; /*”;}
}/* */

Win IE5 のみに適用

@media tty {
i {content : “\”;/*” “*/}}; @import ‘win-ie5.css’; {;}/*”;}
}/* */

Win IE5.5 のみに適用

@media tty {
i {content : “\”;/*” “*/}}@m; @import ‘win-ie5.5.css’; /*”;}
}/* */

Mac IE5 のみに適用

/*\*//*/
@import “mac-ie5.css”;
/**/

■指定したブラウザにのみ、CSSを適用する方法：条件分岐コメント

XHTML内で、外部CSSを読み込ませる際、条件によってCSSを読み込ませます。
※WinIE独自実装。数字の部分を各々のブラウザのバージョンに変更する

Win IE6 のみに適用

<!–[if IE 6]>
<link rel=”stylesheet” href=”win-ie6.css” type=”text/css” media=”screen” />
<![endif]–>

Win IE6 以下に適用

<!–[if lte IE 6]>
<link rel=”stylesheet” href=”win-ie6.css” type=”text/css” media=”screen” />
<![endif]–>

Win IE6 未満に適用

<!–[if lt IE 6]>
<link rel=”stylesheet” href=”win-ie6.css” type=”text/css” media=”screen” />
<![endif]–>

Win IE6 以上に適用

<!–[if gte IE 6]>
<link rel=”stylesheet” href=”win-ie6.css” type=”text/css” media=”screen” />
<![endif]–>