CSS 振り分け

UA 毎に CSS を振り分ける

とりあえず対象は、MacIE5.x、Mozilla、Opera6.x、Win IE5、Win IE5.5、Win IE6 です。

以下にどんな文章が表示されていますか。

基本用スタイルが適用されています。Mac IE5.x か Mozilla をご使用ですね。

Opera スタイルが適用されています。Opera をご使用ですね。

win_ie5 スタイルが適用されています。Windows IE5.x をご使用ですね。

win_ie55 スタイルが適用されています。Windows IE5.5x をご使用ですね。

win_ie6 スタイルが適用されています。Windows IE6 をご使用ですね。

ご使用の UA 名と違うものが表示されることはないはず。

ソース

head 内の記述

<link rel="stylesheet" media="screen,tv" href="common.css" type="text/css" title="基本用">
<link rel="stylesheet" media="screen,tv" href="opera.css" type="text/css" title="Opera用">
<!--[if IE 5 ]><link rel="stylesheet" type="text/css" href="win_ie5.css"><![endif]-->
<!--[if IE 5.5000 ]><link rel="stylesheet" type="text/css" href="win_ie55.css"><![endif]-->
<!--[if IE 6 ]><link rel="stylesheet" type="text/css" href="win_ie6.css"><![endif]-->

body の記述

<div class="common">
<p>基本用スタイルが適用されています。Mac IE5.x か Mozilla をご使用ですね。</p>
</div>

<div class="opera">
<p>Opera スタイルが適用されています。Opera をご使用ですね。</p>
</div>

<div class="win_ie5">
<p>win_ie5 スタイルが適用されています。Windows IE5.x をご使用ですね。</p>
</div>

<div class="win_ie55">
<p>win_ie55 スタイルが適用されています。Windows IE5.5x をご使用ですね。</p>
</div>

<div class="win_ie6">
<p>win_ie6 スタイルが適用されています。Windows IE6 をご使用ですね。</p>
</div>

<p>ご使用の UA 名と違うものが表示されることはないはず。</p>

各 CSS 書類の記述

common.css

div{
	font-size : 200% ;
	font-weight : normal ;
	padding : 1em ;
	border : 1px solid gray ;
	color : #333333 ;
	background-color : #FFFFE7 ;
}

div.common{
	display : block ;
}

div.opera{
	display : none ;
}

div.win_ie5{
	display : none ;
}

div.win_ie55{
	display : none ;
}

div.win_ie6{
	display : none ;
}

opera.css

@import url('_opera.css') screen;

_opera.css

div.common{
	display : none !important;
}

div.opera{
	display : block !important;
}

div.win_ie5{
	display : none ;
}

div.win_ie55{
	display : none ;
}

div.win_ie6{
	display : none ;
}

win_ie5.css

div.common{
	display : none !important;
}

div.opera{
	display : none ;
}

div.win_ie5{
	display : block !important;
}

div.win_ie55{
	display : none ;
}

div.win_ie6{
	display : none ;
}

win_ie55.css

div.common{
	display : none !important;
}

div.opera{
	display : none ;
}

div.win_ie5{
	display : none ;
}

div.win_ie55{
	display : block !important;
}

div.win_ie6{
	display : none ;
}

win_ie6.css

div.common{
	display : none !important;
}

div.opera{
	display : none ;
}

div.win_ie5{
	display : none ;
}

div.win_ie55{
	display : none ;
}

div.win_ie6{
	display : block !important;
}

検証

ほぼ予想通りでしたが、<!--[if IE 5 ]> で指定した CSS 書類は Win IE5.5 にも読まれてしまうのが判明。というか、Win IE5.x というのには、Win IE5.5 も含まれるので、当たり前なのではなかろーか、とか思ったり。

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

上記を head に追加し、win_ie55to6 スタイルで win_ie5 スタイルの打ち消しをしておくか、win_ie55 スタイルの中で打ち消しておく必要があるのかも。あ、ひょっとして、<!--[if IE 5.0000 ]> とか書くと、IE5 だけ対象になるのかもとか都合の好いことを勝手に思ったが、面倒なので後日。

書いた人

カナかな団首領　2002-07-01T20:51:53+09:00

ご案内