UA 毎に CSS を振り分ける勉強 2
とりあえず対象は、MacIE5.x、Mozilla、Opera6.x、Win IE5、Win IE5.5、Win IE6 です。
基本用スタイルが適用されています。Mac IE5.x か Mozilla をご使用ですね。
Opera スタイルが適用されています。Opera をご使用ですね。
win_ie5 スタイルが適用されています。Windows IE5 をご使用ですね。
win_ie55not5 スタイルが適用されています。Windows IE5.5x をご使用ですね。
win_ie6 スタイルが適用されています。Windows IE6 をご使用ですね。
ご使用の UA 名と違うものが表示されることはないはず。
強調部分は前頁の記述と違う部分
<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_ie55not5.css"><![endif]-->
<!--[if IE 6 ]><link rel="stylesheet" type="text/css" href="win_ie6.css"><![endif]-->
"基本用" は全ての対象 UA が読み込む。
"Opera用" については、title の違うlink rel="stylesheet" を Mozilla が読み込まないのを利用する。
<!--[if IE 5 ]> 〜 <![endif]--> は Win IE5.x だけに読み込ませるための呪文。
<!--[if IE 5.5000 ]> 〜 <![endif]--> は Win IE5.5 だけに読み込ませるための呪文。
<!--[if IE 6 ]> 〜 <![endif]--> は Win IE6 だけに読み込ませるための呪文。
<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 をご使用ですね。</p>
</div>
<div class="win_ie55">
<p>win_ie55not5 スタイルが適用されています。Windows IE5.5x をご使用ですね。</p>
</div>
<div class="win_ie6">
<p>win_ie6 スタイルが適用されています。Windows IE6 をご使用ですね。</p>
</div>
<p>ご使用の UA 名と違うものが表示されることはないはず。</p>
div{
font-size : 200% ;
font-weight : normal ;
padding : 1em ;
border : 1px solid gray ;
color : #333333 ;
background-color : #FFFFE7 ;
}
p.sample{
white-space : pre ;
}
code{
font-size : 100% ;
line-height : 150% ;
font-family : sans-serif ;
}
div.common{
display : block ;
}
div.opera{
display : none ;
}
div.win_ie5{
display : none ;
}
div.win_ie55{
display : none ;
}
div.win_ie6{
display : none ;
}
@import url('_opera.css') screen; /* ←MacIE5 と WinIE が読み込まないようにするための import */
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 ;
}
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 ;
}
div.common{
display : none !important;
}
div.opera{
display : none ;
}
div.win_ie5{
display : none !important; /* ←Win IE5 用スタイルより優先させるための !important */
}
div.win_ie55{
display : block !important;
}
div.win_ie6{
display : none ;
}
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 スタイルを Win IE5.5に適用したくない場合、の方法を勉強。head 内の記述を
<!--[if IE 5.0000 ]><link rel="stylesheet" type="text/css" href="win_ie5.css"><![endif]-->
とか書くと、IE5 だけ対象になるのかもとか都合の好いことを勝手に思ったが、やっぱり勝手に思っただけで、確かにWin IE5.5 は読み込まないのですが、肝心のWin IE5 も読み込まなかったりして。
で、やっぱり現実的には、Win IE5.5 用スタイルは、
<!--[if IE 5.5000 ]><link rel="stylesheet" type="text/css" href="win_ie55not5.css"><![endif]-->
で、win_ie55not5.css の記述で、Win IE5 のスタイルを打ち消しておくしかないようで。
スクリプトで CSS 振り分けしたほうがスマートだとは思いますけど。力技の一つということで。