ホームページ作成素材 Cool Liberty > WEBデザインチュートリアル > CSSにおけるWEBブラウザの識別と振り分け

CSSにおけるWEBブラウザの識別と振り分け

このWEBデザインチュートリアルでは、WEBブラウザごとに目的のCSSを振り分ける方法をレクチャーしていきます。

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

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

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

■XHTMLソース

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

IE 4にCSSを適用しないようにするには？

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

■CSSソース

@import "○○○.css";

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

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

■CSSソース

@import url("○○○.css");

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

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

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

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

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


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

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

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

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

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

CSSにおけるWEBブラウザの識別と振り分けの評価を是非お願いします！
（星の上へマウスを乗せてクリックするだけでOKです）

  • Currently 3.09/5
  • 1
  • 2
  • 3
  • 4
  • 5

評価: 3.1/5 ( 506 投票 )

CSSにおけるWEBブラウザの識別と振り分けに関連する素材 & コンテンツ

目的に合ったコンテンツが見つからなかったあなたへ

このサイトでなら役に立つコンテンツが見つかるかも

0574 W.S.R