CSS 振り分け その5 スクリプト編

UA 毎に CSS を振り分ける勉強 5 「script による振り分け NN4.x も追加

スクリプトについては、さっぱり分かりませんので、【娘娘飯店しるきぃうぇぶ】の「共通 JavaScript らいぶらりー」を流用。

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

注)上記「共通 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 名と違うものが表示されることはないはず。


ソース

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

head 内の記述

<link rel="stylesheet" media="screen,tv" href="common-2.css" type="text/css" title="基本"> <script type="text/javascript" src="css-2.js"></script>

解説

"基本用" は全ての対象 UA が適用(されるはずだけど、NN4.x は @charset "Shift_JIS" ; の所為で適用されない)。

補正 CSS は、css-2.js で振り分ける(css.js との違いは CSS ファイル名のみ)。


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

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

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


検証

娘娘飯店しるきぃうぇぶ】の「共通 JavaScript らいぶらりー」を、ほとんど丸コピした外部スクリプトを使用しています。感謝。

その4で試験的に NN4.x スタイルを導入するも、NN4.x のバグにより不完全だったので、クラス名を変更。再度チャレンジしてみました。

スクリプトでの振り分けは、スマートですねー。他にも色々出来るようですし。


コピーした人

カナかな団首領 2002-07-08T12:42:37+09:00 last modified 2003-08-19T02:13:18+09:00

ご案内