脱 三日坊主 宣言！

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

皆さん御存知の通り、NN4 は CSS への対応が不完全で、IE と同じような表示にしようとすると、ブロック要素を <div> で二重に囲むなど、HTML にかなりの小細工をしなくてはならず、いわゆる DIV 病になってしまいます。(この際、IE もバグだらけというのは無視して下さい)

そこで、この日記と掲示板では 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;
  }
/* ¥*/}/* */

なお、コメント部分を /*\*/ や /**/ と書くと、一部のブラウザで正しくコメントと認識されないかもしれません。ですから、なるべく /* \*/ や /* */ のように書いて下さい。

以上です。判りやすい解説かどうかは自信が有りませんが、宜しければ参考にどうぞ。

MacIE をお使いの方へ

上記の記事で blockquote 要素内の整形の為、行頭のインデントに、改行禁止スペース (   ) を使っています。表示上は問題なくても、そのままコピー＆ペーストすると、上手く半角スペースに変換されず、文字化けになるかもしれません。

御注意下さい。(u_u)