trick for Internet Explorer version 5.x

昨日の投稿「trick for version 4.x 」で第４世代ウェブブラウザに対するトリックを投稿しましたので、今日は第５世代のInternet Explorer 5.x(Windows and Macintosh)に対するトリックを考えていきます。
今後、このサイトでは

ns4 == Netscape/4.x (Macintosh and Windows)
ie4 == Internet Explorer/4 (Macintosh and Windows)
ieMac4.5 == Internet Exprorer/4.5 (Macintosh)
ieMac5.x == Internet Explorer/5.x(latest/5.2) (Macintosh) Tasman
ieWin5== Internet Explorer/5 (Windows)
~ie5.5 == before Internet Explorer/5.5 (Windows)
ieWin5.5== Internet Explorer/5.5 (Windows)
ie5.5~ == after Internet Explorer/5.5 (Windows)
ieWin6 == Internet Explorer 6.x(latest/6.0.2600) (Windows) Trident

ieWinAll== Internet Explorer(Windows)

MOSe == mozilla/ Opera/Safari enhancement
moz5.0 == mozilla/5.0(Firefox , Mozilla and Netscape7.1) Gecko
opr == Opera/6.x/7.x/8.x(latest/8.51)(Macintosh and Windows)
saf == Safari(Macintosh) KHTML

と、表示することにします。


Band Pass Filterテクニック
大まかには、
Internet Explorer 5.5 (ieWin5.5)が一つの境目のようです。
ieMacは5.2.3が最終バージョン（個人的には好きでした）ですがMac版のIEはWin版とまったく異なるものと捉えた方がよいみたいです。
それでは、
１．ieWin5
２．ieWin5.5
３．~ieWin5.5
４．ieMac5.x
の順に外部スタイルシートを読み込むことにしましょう。ただし、この方法はttyメディア（固定ピッチフォントのテキストが表示される端末。テレタイプ等）を使っていたらうまくいかないかもしれません。もしご利用の方は他の無難なメディアを探すしかありません。でも、テレタイプにi要素（イタリック）てあるのかしら。

１．ieWin5だけが読み込むもの

@media tty{
i{content:"¥";/*" "*/}};@import'****.css';{;}/*";}
}/**/

２．ieWin5.5だけが読み込むもの

@media tty{
i{content:"¥";/*" "*/}}@m;@import'****.css';{;}/*";}
}/**/

３．ieWin5と5.5だけが読み込むもの

@media tty{
i{content:"¥";/*" "*/}}@import'****.css';/*";}
}/**/

４．ieMac5.xだけが読み込むもの

/*¥*//*/
@import"****.css";
/**/

となります。
専用のものだけを読み込んだり、後から読み込んで上書きしたりしながらウェブブラウザに合わせたスタイルシートを適用していくわけです。
これが、
Band Pass Filterと言うテクニックです。



Box Model Hackテクニック
ie4~5.5達は、幅（width）や高さ（height）を指定するとボーダー（border）とパディング（padding）を含んだ範囲に適用してしまいます。当然正しい解釈は内容（content）だけに適用しなければならないのです。そこでvoice-familyプロパティの値に¥（あくまでもバックスラッシュ・エスケープです。CSS2で「¥」は、後ろの文字の特別な意味を消してしまいます）を使用したBox Model Hack は、

****{
ie4~5.5までに適用するの値
voice-family: "¥"}¥""; voice-family: inherit;
ie6以後に上書き適用するの値
}

と書くと。
CSS2が理解できないie4~5.5達は真ん中にある"}"で宣言が終わったと勘違いしてしまいます。
つまり、

****{
ie4~5.5までに適用するの値
voice-family: "¥"}

と理解してしまいます。
でも、CSS2が理解できるie6以後のie達は真ん中にある"}"で宣言が終わったとは勘違いしません。つまり、

****{
ie4~5.5までに適用するの値
voice-family: "¥"}¥"";
voice-family: inherit;
ie6以後に上書き適用するの値
}

と、新たな値を上書きしてくれるのです。


、というトリックです。スタイルシートを使用してサイトを創造しはじめた黎明期には最先端のものです。しかし、その場しのぎにはもってこいですが、後の管理が大事です。ウェブブラウザに特化した外部スタイルシートで管理する方が楽ちんです。それにトランプの「神経衰弱」ゲームのように、適用するカードを順番にめくっていくのも楽しみの一つです。

なお、詳しくはBox Modele Hackをご覧ください。