1999 年 5 月 27 日 (木) 自宅

さて、昨日からこの日記ページのスタイルシートの定義をちょっと変更しました。 スタイルシートをお使いの方はとうにご存じのことと思いますが、 Netscape Communicator 4.0x/4.5x のスタイルシートの実装は、 それはそれでひどいもので、 しかも JavaScript の選択を止めると使えなくなるという、 なんじゃそれは (理由は想像つくけどね…) という実装になっています。

また、 ブロックレベルのエレメントとインラインレベルのエレメントの、 スタイル適用範囲がメチャクチャになっていて、 要するにほとんどのブロックレベルのエレメントに対するスタイル指定が、 インラインに適用されてしまいます。 また、フォントに関する処理もメチャクチャで、 いかなる規則でバグが出現するか全然予想できないという、 素敵なコーディングがなされています。 まあ、いかにレンダラのそのあたりが軽視された実装になっているかがわかりますね (IE を弁護するわけではないが、そのあたりは比較的まともだと思う)。

で、Netscape では条件付きスタイルシート定義がうまく働かないため、 たとえば、A:link IMG (リンク中の IMG のスタイルの設定) が異常動作するなどの非常に不都合な現象が起っていたのです。

A:link IMG {
	border: 2px solid #2020b0;
}

上記のスタイルを適用すると、 Netscape 4.0x/4.5x では、 リンク中に <IMG> を入れた場合 (つまりこの日記ページのほとんど全ての写真)、 リンクの色は変わるものの、 不思議なことに <IMG> の後ろに謎の要素が追加され、 まとめてリンクが張られた後に、 なぜか <A> ブロックレベルエレメントと解釈されるのか、 改行が入れられてしまうという、 理解不能の終末的なバグ実装となっています。

しかも、リンク中の画像の周りのボーダの色は、 <A> のスタイルではなく、 「<A> の内側にある <IMG>」のスタイルであるはずで、 その意味では <A> にスタイルを設定した時点で、 リンク中の画像の周りのボーダの色が変わってはいけないはずなのに、 Netscape 4.0x/4.5x ではこの色が変わってしまいます。

そこで、Internet Explorer での効果を泣く泣くあきらめ、 該当部分をコメントアウトしたのですが、 先日、これを回避する手段を発見しました。 CSS1 には @import という宣言があり、 これを使用すると、C や C++ での #include と同じように、 他のスタイルシートファイルを取り込むことができます。 ところが、これが Netscape 4.0x/4.5x では実装されていないため、 実際には取り込まれないのです!

そこで、このページのスタイルシートである style.css では、 ファイルの最後に以下の行を入れています。

@import url(nonnc.css);
そして、 nonnc.css というスタイルシートファイルに、 Netscape 4.0x/4.5x で異常動作するスタイルシートを入れます。 すると、パンパカパーン、 IE でも NC でも、きちんと動作するページができ上がるわけです。 めでたしめでたし。

もちろん、この使い方がスタイルシートの本来の目的からは、 多少ずれたものであることは把握しているのだけれども、 @import をいかなる目的で使用したところで、 「正常な動作をする」ブラウザに迷惑をかけることはないわけで、 その範囲ではスタイルシートの精神を汚しているわけではないと思います。 というわけで、 この tips は「正常な動作をしない」ブラウザに対する対症療法としては、 かなり有効だと思います。 これで、ブロックレベルスタイルに関する問題も解決するかな?


このサイトへのリンクには何ら許可は必要ありません。 ただし、無断で写真をダウンロードして他の場所に掲載したり、 画像加工の素材として利用するなど、再配布に当たる行為はしないようにしてください。 また、このサイトへのリンクであることを明示すること無しに <img src="..."> などで他のページの内部に画像ファイルを取り込むことも、 ご遠慮下さい。