UA 毎に CSS を振り分ける勉強 3 「さらにMacIE5.x を選別する」
とりあえず対象は、MacIE5.x、Mozilla、Opera6.x、Win IE5、Win IE5.5、Win IE6 です。
基本用スタイルが適用されています。Mozilla をご使用ですね。
Mac_ie5 スタイルが適用されています。Mac IE5.x をご使用ですね。
Opera スタイルが適用されています。Opera をご使用ですね。
Win_ie5 スタイルが適用されています。Windows IE5 をご使用ですね。
Win_ie55not5 スタイルが適用されています。Windows IE5.5x をご使用ですね。
Win_ie6 スタイルが適用されています。Windows IE6 をご使用ですね。
ご使用の UA 名と違うものが表示されることはないはず。
強調部分は前頁の記述と違う部分
<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 IE 5 ]><link rel="stylesheet" type="text/css" href="win_ie5.css"><![endif]-->
<!--[if IE 5.5000 ]><link rel="stylesheet" type="text/css" href="win_ie55not5.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 IE 5 ]> 〜 <![endif]--> は Win IE5.x だけに読み込ませるための呪文。
<!--[if IE 5.5000 ]> 〜 <![endif]--> は Win IE5.5 だけに読み込ませるための呪文。
<!--[if IE 6 ]> 〜 <![endif]--> は Win IE6 だけに読み込ませるための呪文。
<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>
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 ;
}
@import url('_opera.css') screen; /* ←MacIE5 と WinIE が読み込まないようにするための import（Opera用）*/
@import url("_mac_ie5.css") screen , tv; /* ←Opera と WinIE が読み込まないようにするための import（MacIE5用）*/
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 !important; /* ←Win IE5 用スタイルより優先させるための !important */
}
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;
}
さて、場合によっては、というか、さすがの MacIE5.x もおかしな挙動しちゃう時があるので、MacIE5.x も振り分ける必要があったりして。
で、新に MacIE5 スタイルの振り分けを追加してみました。
Win IE 用のスタイルは <!--[if gte IE 5 ]> （IE5 以上適用）とかをうまく使って組み合せればもう少しスマートになるかなあ。
しかし、7つも CSS 書類が必要になるとは…。
"MacIE5.x - Opera 用" については、title の違うlink rel="stylesheet" を Mozilla が読み込まないのを利用する。
というかそれは「 Mozilla が読み込まない」とかでなくて…。
- あるスタイルシートを固定に指定するには、 rel属性の値を "stylesheet" にし、かつ title属性の設定をしない。
- あるスタイルシートを優先に指定するには、 rel属性の値を "stylesheet" にし、かつ title属性で名前をつける。
- あるスタイルシートを代替に指定するには、 rel属性の値を "alternate stylesheet" にし、かつtitle属性で名前をつける。
〜中略〜
もし2つ以上のLINK要素が優先スタイルシートを指定している場合は、最初のものが優先する。
「固定」つのは通称いわゆる「永続 (persistent) スタイル」って呼ばれるやつで、「優先」つのは「 おすすめ (prefered) スタイル」って呼ばれてるやつかと。
つか HTML 仕様書ではこう呼んでたなんて今始めて知ったw
てなわけで、MacIE5 や Opera でも title="基本" のスタイル＿だけ＿が（または title属性をつけてない外部 CSS があるならそれと同時に）、適用されるのが正しい…とおもうのだけどなぁ。
MacIE5/Opera のバグをハケーンの予感？
ちなみに、Moz のスタイル切り替え機構や、各地のスタイル切り替えスクリプトは、同じ title 要素の名前を持つモノをひとつのグループとして扱って、切り替えるなり。そう処理するべし、てのもどっかの仕様書の書いてある事だとおもうけど、見つけられないからお茶濁し。
ということで、"MacIE5.x - Opera 用" については、title の違うlink rel="stylesheet" を Mozilla が読み込まない
のではなく、Mozilla が仕様通りに正しく、CSS を適用しない点と、仕様に非準拠で CSS を適用してしまう MacIE5.x と Opera のバグを利用、しているのがこの CSS 振り分け手順なワケです。
<!--[if IE 5 ]> 等による Win IE に対する振り分けは、独自仕様とは言え、仕様に従ったものであり、恒久的な手順であります。しかし、head 要素内 link 要素による外部 CSS の指定による CSS 振り分け手順のうち、MacIE5.x と Opera に対するものは、W3C の仕様に従っていない、バグ利用によるものであります。
バグ利用ということは、今後マイナーアップデート等で修正される可能性（特に Opera は）があるわけで、他のバグも修正されて Mozilla 並になれば好いのですが、この点だけを修正されたりすると、大変な事になってしまうのであります。そういう点を考慮すると、Mozilla 、MacIE5.x、Opera 用のスタイルシートは1枚に納めた方が無難という気もします。
というか、確実なのは、script 等による振り分けでしょーねえ。
CSS 振り分け その2 にて、WinIE5 のみに適用させる方法で苦労してましたら、yuu 氏より、お手紙いただきました。
ここで、IE5だけ対象にする方法を想像しておられますが、このように書けば解決します。
<--[if lt IE 5.5000]> IE5だけ <![endif]-->なお、情報ソースはMSDNです。
有り難う御座居ます。早速、試してみましょう。