2008-03-10

CSS -> WEBブラウザの識別と振り分け

ちょっと古いブラウザに対する識別と振分けの対策です。

1.Netscape 4.xにCSSを適用しないようにする

Netscape 4.xに外部スタイルシートを読み込ませないようにするには、HTMLのlink要素にmedia属性を指定し、「screen」と一致しない値を指定します。つまり、値として「all」などの他の値を指定するか、「screen,print」などのように複数の値を指定します。

Netscape 4.xの初期バージョンで@importが実行されると、強制終了したりフリーズしたりすることが確認されているため、HTML側で最初にはじいておくのが原則。

<link href="example.css" rel="stylesheet" type="text/css" media="screen,print" />

2.IE 4にCSSを適用しないようにする

IE 4(Windows版・Mac版とも)にCSSを適用しないようにするには、CSSの@importを利用します。@importで読み込む外部スタイルシートのURLは、url( )形式、または単純に引用符(" ")で囲う文字列形式のいずれかで指定できますが、IE 4はurl( )形式にしか対応していません。したがって、@importで指定するURLを文字列形式で指定すると、CSSが適用されなくなります。

@import "example.css";

3.Mac版IE 4.5にCSSを適用しないようにする

Mac版のIE 4.5にCSSを適用しない場合も、CSSの@importを利用します。Mac版のIE 4.5は、読み込む外部スタイルシートのURLをurl( )形式で指定する際に、URL部分が二重引用符で囲われていると、外部スタイルシートを読み込まなくなります。よって、@importで指定するURLを url("~")のように指定すると、CSSが適用されなくなります。

@import url("example.css");

4.特定のWEBブラウザに外部スタイルシートを読み込ませる

以下に示すような書式を使って指定された外部スタイルシートは、それぞれ特定のWEBブラウザにしか読み込まれません。これを利用して、通常の外部スタイルシートを読み込んでいる部分の下で、特定のWEBブラウザ専用の外部スタイルシートを読み込ませておけば、そのWEBブラウザで表示の問題があった場合に、その専用ファイルの中で必要なプロパティの値を上書きして修正することができます。

Windows版IE 5にだけ外部CSSを読み込ませるためのCSSソース

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

Windows版IE 5.5にだけ外部CSSを読み込ませるためのCSSソース

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

Windows版IE 5と5.5にだけ外部CSSを読み込ませるためのCSSソース

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

Mac版IE 5.xにだけ外部CSSを読み込ませるためのCSSソース

/*¥*//*/
@import "example.css";
/**/

Bookmark

AddThis Social Bookmark Button