CSS 振り分け その6 SSI 編

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 名と違うものが表示されることはないはず。


ソース

強調部分前頁の記述と違う部分

head 内の記述

<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 はどっちも"基本"にしてみました。優先スタイルシートのグループ化つーことで。


body の記述

<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>


各 CSS 書類の記述

common-2.css ←基本スタイル(全ての対象 UA が読み込むはずだが、NN4.x はバグにより読まない)

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 ; }


Opera6.css ←Opera 用スタイル

div.common{ display : none !important; } div.opera{ display : block !important; }


MacIE5.css ←Mac IE5 用スタイル

div.common{ display : none !important; } div.macie5{ display : block !important; }


WinIE5.css ←Win IE5.0 用スタイル

div.common{ display : none !important; } div.winie5{ display : block !important; }


WinIE55.css ←Win IE5.5 用スタイル

div.common{ display : none !important; } div.winie55{ display : block !important; }


WinIE6.css ←Win IE6 用スタイル

div.common{ display : none !important; } div.winie6{ display : block !important; }


nn4x.css ←Netscape 4.x 用スタイル

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】で。

でっちあげた人

カナかな団首領 2002-07-08T20:50:35+09:00

ご案内