CSS 振り分け その3_2

UA 毎に CSS を振り分ける勉強 3 「さらにMacIE5.x を選別する」

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

yuu 氏より、教えて貰ったので、WiniE5.5未満のみ対象にする呪文を追加。


以下にどんな文章が表示されていますか。

基本用スタイルが適用されています。Mozilla をご使用ですね。

Mac_ie5 スタイルが適用されています。Mac IE5.x をご使用ですね。

Opera スタイルが適用されています。Opera をご使用ですね。

Win_ie5 スタイルが適用されています。Windows IE5 をご使用ですね。

Win_ie55not5 スタイルが適用されています。Windows IE5.5x をご使用ですね。

Win_ie6 スタイルが適用されています。Windows IE6 をご使用ですね。

ご使用の UA 名と違うものが表示されることはないはず。


ソース

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

head 内の記述

<link rel="stylesheet" media="screen,tv" href="common.css" type="text/css" title="基本"> <link rel="stylesheet" media="screen,tv" href="mac_ie5-opera.css" type="text/css" title="Mac_IE5-Opera"> <!--[if lt IE 5.5000 ]><link rel="stylesheet" type="text/css" href="win_ie5.css"><![endif]--> <!--[if IE 5.5000 ]><link rel="stylesheet" type="text/css" href="win_ie55not5x.css"><![endif]--> <!--[if IE 6 ]><link rel="stylesheet" type="text/css" href="win_ie6.css"><![endif]-->

解説

"基本用" は全ての対象 UA が読み込む。

"MacIE5.x - Opera 用" については、title の違うlink rel="stylesheet" を Mozilla が読み込まないのを利用する。

<!--[if lt IE 5.5000 ]> 〜 <![endif]--> は Win IE5.x (5.5 未満)にのみ(5.5以上は対象外)読み込ませるための呪文。

<!--[if IE 5.5000 ]> 〜 <![endif]--> は Win IE5.5 だけに読み込ませるための呪文。

<!--[if IE 6 ]> 〜 <![endif]--> は Win IE6 だけに読み込ませるための呪文。

body の記述

<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 をご使用ですね。</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>


各 CSS 書類の記述

common.css ←基本スタイル(全ての対象 UA が読み込む)

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


mac_ie5-opera.css ←Mac IE5.x - Opera 用スタイル 第1段階

@import url('_opera.css') screen; /* ←MacIE5 と WinIE が読み込まないようにするための import(Opera用)*/ @import url("_mac_ie5.css") screen , tv; /* ←Opera と WinIE が読み込まないようにするための import(MacIE5用)*/


_opera.css ←Opera 用スタイル

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


_mac_ie5.css ←Mac IE5 用スタイル

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


win_ie5.css ←Win IE5 用スタイルを Win IE5.5 は読み込まないハズ

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


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

div.common{ display : none !important; } div.opera{ display : none ; } div.win_ie5{ display : none ; /* ← !important は外してみた */ } div.win_ie55{ display : block !important; } div.win_ie6{ display : none ; }


win_ie6.css ←Win IE6 用スタイル

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


検証

Win IE 用のスタイルは <!--[if lt IE 5.5000 ]> (IE5.5 未満のみ適用)を使ってみました。


書いた人

カナかな団首領 2003-02-19T20:02:21+09:00

ご案内