an ultimate weapon for ieMac5.x

先日から、htmlとCSSの修正を行っていましたが。他ではうまくいくのですがieMac5.xでうまくいきません。
うまくいかないというより、大変危険な状態です。
クラッシュしてしまいます。
「プロパティによってはinheritは効きません」と古い本に書いてありました。
早速

{
color: inherit;
}

を

{
/*¥*/
color: inherit;
/**/
}

に変更すると、
何ともなかったように振る舞ってくれます。効きませんじゃありません。
少なくとも「color: inherit;」のときは、大爆発です。
とても危険です。

trick for ieWinAll and ~ieMac5.x

特定のブラウザに適用したり、しなかったり。

１．~ieWin6には適用されないが
　　ieMac5.xには適用される

html>body ~ {
　　property:value;
}

２．ieMac5.xには適用されない

~~~{
　　property/**/:/**/value;
}

３．ieWin6.x(Standard)だけには適用しない

~~~{
　　property/**/:value;
}

４．ieWin7とMOSeに適用する

html[xmlns] ~~~ {
　　property:value;
}

５．MOSeだけに適用する

html[xmlns]>/**/body ~~~ {
　　property:value;
}

、ということです。
うまく利用すると、こんなことができます。

例１

html>body ~~~{
　　font-size/**/:/**/xxx;
}

これは、ieWin6.x以下とieMacに適用しない。
つまり、ieWin7とMOSeだけに適用する。

例２

html[xmlns]>/**/body ~~~{
　　font-size/**/:/**/xxx;
}

これは、ieWin7以下とieMacに適用しない。
つまり、MOSeだけに適用する。

ちょっとしたパズルです。

trick 本文

../diary200y/dialy200ymmdd.html/の本文中の文字サイズを
とりあえず

#layer1 {
width: 43em;
margin-left: auto;
margin-right: auto;
line-height: 140%;
}
/*ieWin6.x  and ieWin7のdiary200ymmdd.html用に追加*/
#plate #mainContents #layer1{
font-size: 110%;
width: 96%;
}
/* hide from ~ieWin6*/
html > body  #plate #mainContents  #layer1{
font-size: 112%;
width: 94%;
/*for ieMac5.x ¥*//*/
font-size: 100%;
width: 100%;
/*end for ieMac5.x*/
}
/* hide from ~ieWin7*/
html[xmlns]>/**/body #plate #mainContents  #layer1{
font-size: 99%;
width: 43em;
}

、としてごまかします。
default_2007_00.cssで使用中止（20100515　変更）

default trick

トリックのデフォルト

body{
 margin: 0;
 padding: 0;
 background-color: #ffffff;
 color: #000000;
 font-size: small;
　　　　　　　　　ここに、ieWin6.xに適用する値を書く
}
 /* hide from ~ieWin6*/
 html > body{
  font-size: small;
　　　　　　　　　ここに、ieWin7に適用する値を書く
  /* for ieMac5.x ¥*//*/
  font-size: medium;
　　　　　　　　　ここに、ieMac5.xに適用する値を書く
  /*end for ieMac5.x */
 }
 /* hide from ~ieWin7*/
 html[xmlns]>/**/body{
  font-size: medium;
　　　　　　　　　ここに、MOSeに適用する値を書く
 }

、とするとうまくごまかせます。

trick for Internet Explorer version 7

そういえば私のサイトが、新しいInternet Explorerでどう見えているのかチェックをしていませんでした。
Internet Explorer version 7をインストールすることにしますが、なかなかうまくいきません。
マイクロソフトのサイトは、「あんたのＰＣには新しいInternet Explorerがお似合いさ」
、というのですが


インストーラーからは、「おまえのマシンにはInternet Explorer version 7は、インストールできないぜ」
、と冷たくあしらわれます。


悩んだすえ、「そうだＳＰ２にアップしてなかった」
、とふと気付きます。

それからが大変です、ＳＰ２が何処にあるか分かりません。やっと見つけてインストールするまで半日かかってしまいます。
私のサイトは、Internet Explorer version 7でも何とか見えていますが、少しだけ字が大きいようです。
今までは、

#plate{
        font-size: 100% !important;
        font-size: 91%;
}

で、ごまかしていましたが ieWin7 はごまかせません。

#plate{
       font-size: 91%;
       line-height: 3em;
}
 /* hide from ~ieWin6*/
 html > body  #plate{
  font-size: 85%;
 }
      /* hide from ieWin7*/
      html[xmlns]>/**/body #plate{
           line-height: 100%;
           font-size: 100%;
      }

と

#head_menu li{
       font-size: 75%;
       line-height: 3em;
}
      /* hide from ~ieWin6*/
       html > body  #plate #head_menu li{
            line-height: 220%;
            font-size: 60%;
 }
      /* hide from ieWin7*/
      html[xmlns]>/**/body #plate #head_menu li{
           line-height: 100%;
           font-size: 100%;
      }

で、ieWin7もごまかすことにします。
外部ファイル「default_100.css」を３カ所訂正して今日の作業を終えることにします。

CSS Validatorの検証も
合格です

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をご覧ください。

trick for version 4.x

１．Netscape 4.x とWindows Internet Explorer 3には外部スタイルシートを読ませない

@importを実行すると Netscape 4.x の初期バージョンは強制終了やフリーズを引き起こす虞があります。Netscape 4.x には外部スタイルシートは読ませてはいけません、最初からはじいてしまいましょう。

<link href="****.css" rel="stylesheet" type="text/css" media="screen,print">

とlink要素のmedia属性が"screen"以外であれば"all"や"screen,print"のように複数であれば、彼らは何がなんだか解らなくなってしまいます。

２．Internet Explorer 4 (Macintosh and Windows)にも外部スタイルシートを読ませない

IE 4 は@importで読み込める外部スタイルシートは

@import url(****.css);のＵＲＬ形式は読めますが
@import url"****.css";の文字列形式は読めません

そこで、@import url"****.css";の文字列形式で指定すれば、彼も何がなんだか解らなくなってしまいます。

３．Macintosh Internet Explorer 4.5 にも外部スタイルシートを読ませない

ieMac4.5 は@importで読み込める外部スタイルシートは

@import url(****.css);のＵＲＬ形式は読めますが
@import url("****.css");の二重引用符で囲まれたＵＲＬ形式は読めません

そこで、@import url("****.css");の二重引用符で囲まれたＵＲＬ形式で指定すれば、彼にも何がなんだか解らなくなってしまいます。

何故こんなにややこしい事するの
１．２．３を実行するとNetscape 4.x とWindows Internet Explorer 3 & 4.x には外部スタイルシートが適用されなくなります。
めんどくさいのに何故かというと、彼らはCSSでうまく振る舞えません。それなら、いっそ使わない方がいい。
第４世代以前のウェブブラウザには構造化された文章で読んでいただく、当然第５世代以後のウェブブラウザでも一番大切なのは、構造化された文章以外無いのだが。

trick for Windows Internet Explorer

Windows Internet Explorer にだけ外部cssファイルを読み込ませる

<!--[if IE]><link rel="stylesheet" href="*****.css" type="text/css" media="screen" /><![endif]-->

とheadで書くと、Windows Internet Explorer だけが読み込みます。

trick for Mac Internet Explorer 5.x

ブラウザに特定のcssを適用する
Mac Internet Explorer 5.xはコメント文/**/が不得意のようです
コメント終了の印「*/」の直前に「¥(\)」を書くと次のコメント終了の印「*/」が現れるまで読み飛ばします

まず

/* for ieMac5.x*/
/*¥*//*/
@import "default_100ieMac.css";
@import "default_101ieMac.css";
/**/

と書くと、太字のようにコメント文が３文あるように読んでしまいます。
これでMac Internet Explorer 5.xだけに適用する値「default_100ieMac.css」と「default_101ieMac.css」を読ませ

次に

/* Hides from ieMac5.x ¥*/
@import "default_100.css";
/* End hide from ieMac5.x */

と書くと、太字のようにコメント文があるように読んでしまいます。
その他のmozilla, Opera, Windows Internet Explorer はコメント文が２文あるように読みます。これでその他に適用する値「default_100.css」を上書きします。

trick for Windows Internet Explorer 6.x

ブラウザに特定のcssを適用する
Windows Internet Explorer

!important宣言をサポートしていません。
だから、まず
!important宣言をしてmozillaや OperaやSafariに最優先で適用させ
次に
Windows Internet Explorerに適用する値を上書きします。
例えば

#fishingday_img{
float : left ;
width: 18em;
/* Hides from ieMac5.x ¥*/
margin-left: 1em !important;
margin-left: 0;
/* End hide from ieMac5.x */
}

このよう書くと
１．MOSe（mozilla/ Opera/Safari enhancement）には
margin-left: 1em;
２．Windows Internet Explorerには
margin-left: 0;
３．Macintosh Internet Explorerには
ここでは何もありません（から何も適用されません）
が適用されます。

追伸
Windows Internet Explorer7はサポートしたようです。