/*inu-log*/

はてなダイアリーで書いていた日記のログをインポートしました。ごく稀になんか書く。

MacIE5 を救済しつつ NN4.x にスッピンの刑

hatena

表題の CSS 制御技法について、表具師かっぱさんが日記「脱 三日坊主 宣言！」で詳説してくださいました。

suさんも「MacIEのためのCSSコメントにおけるバックスラッシュ・ハックについて」をまとめてくださいました。期限付きリソースに付き、引用許可のある箇所を丸ごと引用させていただきます（ファイルを復活させてくださいました）。

書き方

hoppeさんのべた日記（はてな）におけるNN 4.x すっぴんの刑から MacIE5 を回避を参照。そこで記述されている通りにすれば、問題はないはず。なお、確認したいがMacはないという方は、御連絡いただければ、こちらで確認いたします。

原理

以下のリソースで紹介されている通り。

ただし、上に紹介したリソースでは主に上書きについて述べているので、分かりにくいかもしれない。以下、手短に補っておく。

/*\*/@ media hoge {/**/

とある場合、正常なUAでは最初の「/*\*/」と最後の「/**/」をコメントとして解釈する。ところが、MacIEではバックスラッシュの付いた文字をエスケープしてしまう（MacIEのバグによる）ので、「\*」をエスケープする。すると先頭の「/*」から末尾の「*/」までつまり全体をコメントとして解釈することとなる。「/*\*/}/**/」の箇所も同様。

/*\*/@media hoge {/**/
=====MacIEに読み込ませたいが、N4には読み込ませたくないスタイル====
/*\*/}/**/

とあれば、Netscape4では

@media hoge {
=====MacIEに読み込ませたいが、N4には読み込ませたくないスタイル====
}

と処理され、MacIEでは

/*@media hoge {*/
=====MacIEに読み込ませたいが、N4には読み込ませたくないスタイル====
/*}*/

と処理されることになる。

謝辞

以下の方々に感謝の意を表します

  • sam@sam-i-am.com氏（Backslash hackの考案者）
  • twt@s15.xrea.com氏（Mac版 Internet Explorer 5 の CSS バグと回避方法の翻訳者）
  • oioi氏（Backslash hackを@mediaに応用する方法の提案者）
  • hoppe氏（この手法をまとめて下さった方）
  • 犬神氏をはじめとするN4とMacIEに御配慮下さる製作者の方々

どちらも私でも大丈夫なぐらいすばらしくわかりやすいです。ありがとうございました。
いちおう はてなダイアリーTips とか書くだけ書いていておこう。