UA 毎に CSS を振り分ける勉強 4 「script による振り分け」
とりあえず対象は、MacIE5.x、Mozilla、Opera6.x、Win IE5、Win IE5.5、Win IE6 です。
スクリプトについては、さっぱり分かりませんので、【娘娘飯店しるきぃうぇぶ】の「共通 JavaScript らいぶらりー」を流用。
注）上記「共通 JavaScript らいぶらりー」は、ありみかさとみ氏のご好意により、流用させていただいております。いくらなんでも、丸コピして使われる方はいないと思いますが、JavaScript について知識の無い方は、近寄らない方がよろしいかと存じます。私なぞ、JavaScript の知識がほとんど無いので、此処の実験以外では使ってないのです。てへ。
基本用スタイルが適用されています。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.css" type="text/css" title="基本">
<script type="text/javascript" src="css.js"></script>
"基本用" は全ての対象 UA が適用。
補正 CSS は、css.js で振り分ける
<div class="common">
<p>基本用スタイルが適用されています。 Mozilla をご使用ですね。</p>
</div>
<div class="mac_ie5">
<p>mac_ie5 スタイルが適用されています。Mac IE5.x をご使用ですね。</p>
</div>
<div class="opera">
<p>Opera スタイルが適用されています。Opera 6 をご使用ですね。</p>
</div>
<div class="win_ie5">
<p>win_ie5 スタイルが適用されています。Windows IE5 をご使用ですね。</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>
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.mac_ie5{
display : none ;
}
div.opera{
display : none ;
}
div.win_ie5{
display : none ;
}
div.win_ie55{
display : none ;
}
div.win_ie6{
display : none ;
}
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.mac_ie5{
display : block !important;
}
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 ;
}
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;
}
【娘娘飯店しるきぃうぇぶ】の「共通 JavaScript らいぶらりー」を、ほとんど丸コピした外部スクリプトを使用しています。
当然、きちんと UA 毎に CSS 書類を振り分けてくれます。凄いだす。
実は、オリジナルの「共通 JavaScript らいぶらりー」には NN4.x の振り分けもついていたので、今回試験的に NN4.x 用スタイルも用意してみましたが、NN4.x はクラス名に「 _ 」が使われていると、理解しないみたいなので不完全になってしまいました。