UA 毎に CSS を振り分ける勉強 6 「SSI による振り分け」
SSI にて振り分けてみる
とりあえず対象は、MacIE5.x、Mozilla、Opera6.x、Win IE5、Win IE5.5、Win IE6、NN4.x です。
基本用スタイルが適用されています。Mozilla をご使用ですね。
Mac_ie5 スタイルが適用されています。Mac IE5.x をご使用ですね。
Opera スタイルが適用されています。Opera 6 をご使用ですね。
Win_ie5 スタイルが適用されています。Windows IE5 をご使用ですね。
Win_ie55 スタイルが適用されています。Windows IE5.5x をご使用ですね。
Win_ie6 スタイルが適用されています。Windows IE6 をご使用ですね。
nn4 スタイルが適用されています。Netscape 4.x をご使用ですね。
ご使用の UA 名と違うものが表示されることはないはず。
強調部分は前頁の記述と違う部分
<link rel="stylesheet" media="screen,tv" href="common-2.css" type="text/css" title="基本">
<link rel="stylesheet" href="<!--#if expr="($HTTP_USER_AGENT = /compatible; MSIE 5/) && ($HTTP_USER_AGENT = /Mac/)" -->MacIE5.css<!--#elif expr="($HTTP_USER_AGENT = /Mozilla\/4/) &&! ($HTTP_USER_AGENT = /compatible/)" -->nn4x.css<!--#elif expr="$HTTP_USER_AGENT = /Opera/" -->Opera6.css<!--#elif expr="($HTTP_USER_AGENT = /compatible; MSIE 5.0/) && ($HTTP_USER_AGENT = /Windows/)" -->WinIE5.css<!--#elif expr="($HTTP_USER_AGENT = /compatible; MSIE 5.5/) && ($HTTP_USER_AGENT = /Windows/)" -->WinIE55.css<!--#elif expr="($HTTP_USER_AGENT = /compatible; MSIE 6/) && ($HTTP_USER_AGENT = /Windows/)" -->WinIE6.css<!--#else -->kara.css<!--#endif -->" type="text/css" title="基本">
"基本用" は全ての対象 UA が適用（されるはずだけど、NN4.x は @charset "Shift_JIS" ; の所為つーか media="screen,tv" で適用されない）。
補正 CSS は、SSI にて振り分け。外部 CSS の title はどっちも"基本"にしてみました。優先スタイルシートのグループ化つーことで。
<div class="common">
<p>基本用スタイルが適用されています。 Mozilla をご使用ですね。</p>
</div>
<div class="macie5">
<p>mac_ie5 スタイルが適用されています。Mac IE5.x をご使用ですね。</p>
</div>
<div class="opera">
<p>Opera スタイルが適用されています。Opera 6 をご使用ですね。</p>
</div>
<div class="winie5">
<p>win_ie5 スタイルが適用されています。Windows IE5 をご使用ですね。</p>
</div>
<div class="winie55">
<p>win_ie55 スタイルが適用されています。Windows IE5.5x をご使用ですね。</p>
</div>
<div class="winie6">
<p>win_ie6 スタイルが適用されています。Windows IE6 をご使用ですね。</p>
</div>
<div class="nn4">
<p>nn4 スタイルが適用されています。Netscape 4.x をご使用ですね。</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.macie5{
display : none ;
}
div.opera{
display : none ;
}
div.winie5{
display : none ;
}
div.winie55{
display : none ;
}
div.winie6{
display : none ;
}
div.nn4{
display : none ;
}
div.common{
display : none !important;
}
div.opera{
display : block !important;
}
div.common{
display : none !important;
}
div.macie5{
display : block !important;
}
div.common{
display : none !important;
}
div.winie5{
display : block !important;
}
div.common{
display : none !important;
}
div.winie55{
display : block !important;
}
div.common{
display : none !important;
}
div.winie6{
display : block !important;
}
body{
background-color : white ;
color : #333333 ;
}
p.sample{
white-space : pre ;
}
code{
font-size : 100% ;
line-height : 150% ;
}
div.common{
text-decoration : line-through ;
}
div.opera{
text-decoration : line-through ;
}
div.macie5{
text-decoration : line-through ;
}
div.winie5{
text-decoration : line-through ;
}
div.winie55{
text-decoration : line-through ;
}
div.winie6{
text-decoration : line-through ;
}
div.nn4{
padding : 1em ;
border : 1px solid gray ;
color : #333333 ;
background-color : #FFFFE7 ;
text-decoration : none ;
}
なんと【とほほのSSI入門】を参考に、でっちあげてみました。
変数とかなんとか、そういうのは分かりません。
Mozilla 4.x 詐称の Opera は、 NN4.x と見分けがついてないですね。ま、そういう物好きは放置してもいいか。
HTML リソースに SSI を使って振り分けを敢行したわけですが、これだと、対象 UA が増えた場合、全 HTML リソースの記述変更が必要になります。そこで、CSS 側で SSI を使い振り分けする方法があったのです。詳しくは【CSS 振り分け その6-2】で。