NN4 すっぴんの刑から MacIE5 を救出

皆さん御存知の通り、NN4 は CSS への対応が不完全で、IE と同じような表示にしようとすると、ブロック要素を <div> で二重に囲むなど、HTML にかなりの小細工をしなくてはならず、いわゆる DIV 病になってしまいます。*1
そこで、この本家日記と掲示板では head 要素内の link 要素に screen 以外の media 属性を付けることで、すっぴんの刑 に処しています。
ところが、外部スタイルシートだけでなく、そのページにだけ有効なスタイルを head 要素内に style 要素としてそのまま書き込むと、そのスタイルだけが有効になってしまいます。そこで、「@media 規則を理解できない」というバグを使って、全ての規則集合を @media all { 〜 } で囲めば、NN4 を「すっぴんの刑」に処する事が可能です。((メディアタイプは all でなくても構いません))
しかし、@media 規則の利用には大きな落とし穴があって、MacIE5 も弾いてしまいます。そこで、MacIE5 を救出する為にもう一工夫必要になるのです。
その工夫というのが、MacIE5 の「スタイルシート内でバックスラッシュ ( ¥ ) の直後にある文字が無視される」というバグを使います。バグを回避するために別のバグを使うなんて、「毒をもって毒を制す」って感じでしょ。パズルみたいで楽しくないですか？　以下のサンプルを使って、その手順を説明しますね。

/* NN4 を「すっぴんの刑」に処す！ */
@media screen,tv {
  .bbs2ResForm {
    font-family: "ＭＳ ゴシック", osaka-等幅, sans-serif;
  }
}

まず、NN4 回避のための記述部分の最初の @media screen, tv { を /* ¥*/@media screen, tv {/* */ に変更して下さい。
通常、スタイルシート内の /* 〜 */ はコメントとして扱われますから、その中の ¥ はエスケープ記号ではなく普通の文字として扱われます。しかし、MacIE5 は、それをエスケープとして扱ってしまいます。(これがバグです)　従って、NN4 では前後のコメントが正しく認識され、@media screen,tv { が有効になりますが、MacIE5 では、¥ の次の * がエスケープされ、*/ が無効になりますから、次の */ が出てくる行末までがコメントとなり、@media screen,tv { は無効になります。
同様に、一番最後の行の } を /* ¥*/}/* */ に変更して下さい。これは上記の記述と整合性を持たせる為です。
この変更により、NN4 を含む通常のブラウザでは、@media screen,tv { 〜 } に規則集合が入っていることになり、@media 規則を理解できない NN4 ではスタイルが適用されなくなりますし、MacIE5 では、規則集合が @media screen,tv { 〜 } 内に書かれていない事になるので、スタイルが適用されます。
まとめると以下のようになります。

/* NN4 のみを「すっぴんの刑」に処す！ */
/* ¥*/@media screen, tv {/* */
  .bbs2ResForm {
    font-family: "ＭＳ ゴシック", osaka-等幅, sans-serif;
  }
/* ¥*/}/* */

なお、コメント部分を /*\*/ や /**/ と書くと、一部のブラウザで正しくコメントと認識されないかもしれません。ですから、なるべく /* ¥*/ や /* */ のように書いて下さい。
以上です。判りやすい解説かどうかは自信が有りませんが、宜しければ参考にどうぞ。

追記(2003/02/26)

上記の方法は、NN4 に対してスタイルの一部分だけを無効にしたい場合に MacIE5 を巻き添えにしない為の方法ですが、head 要素内の style 要素全体を無効にしたい場合はもっと単純な方法があります。

style 要素に screen 以外の media 属性を付ければ NN4 は読み込みません。つまり、<style type="text/css"> を <style type="text/css" media="all"> にするだけで NN4 のみ適用を除外できます。(この方法でも MacIE5 は巻き添えにならないはずです)

これは、サーバーの都合でバックスラッシュ ( ¥ ) が使えない場合にもおそらく有効で、スタイルの一部分だけを無効にしたい場合には、その部分だけ取り出して、新たに <style type="text/css" media="all"> で指定しなおせば大丈夫なはずです。

MacIE5 も巻き添えを食らうようでしたらお知らせ下さい。

*1:この際、IE もバグだらけというのは無視して下さい