中でも特にデザインが崩れやすいのがNetscape Navigator 4.x です。文字の大きさ、改行ピッチなどは指定できても、余白、マージンなどを入れると、うまくいかないことがあります。
Netscape Navigator 4.x にあわせてサイト全体をコーディングするのもありだと思いますが、もはやHTMLは構造、スタイルシートは見栄えを整えるものなので、全くスタイルシートなしで組むことは、正直したくないものです。
Netscape Navigator 4.x にだけ読み込ませないようにする方法が有名ですが、javaスプリクトを使うので、もっとシンプルに、スプリクトを使わない方法として、
する方法が新しく紹介されています。
<link rel="stylesheet" type="text/css" href="style.css" media="all">
link要素のmedia属性には、そのスタイルシートが対象とする出力メディアを指定することができます。例えば、印刷用なら print 、携帯端末用なら handheld 、パソコン画面用なら screen などが指定できます。そして、上記の例では、all を指定していますので、「すべての出力メディアに対して有効」という意味になります。
ところが、Netscape Navigator 4.x では、このメディアタイプが「screen（パソコン画面用）」となっている場合しかスタイルシートを読まないというバグがあります。パソコン画面に表示する場合、「all（すべて）」も読まなければならないのですが、Netscape Navigator 4.x は読みません。
この他に、もっと理にかなった、外部じゃない場合の方法として、id属性を利用する方法があります。
Netscape Navigator 4.x は、クラス名を使ったスタイルの適用はサポートしていますが、id名を使ったスタイルの適用はサポートしていません。そこで、HTMLのbody要素を、次のように記述しておきます。
<body id="mainbody">
そして、Netscape Navigator 4.x にのみ読ませたくないスタイルを作る際には、次のように記述します。（※例えば、p要素（段落）に対してスタイルを適用する場合）
body#mainbody p {
line-height: 1.5; /* 行間を0.5文字分にする */
}
このように、適用したい要素名（セレクタ）の前に「 body#mainbody 」と記述しておけば、id名を使ったスタイルの適用をサポートしていない Netscape Navigator 4.x は、その指定を無視します。それ以外のブラウザには、正しく伝わります。
万一同じ名前でクラスを作っていても、入れ子にしておけばあちこち適用されずにすむし、
p＞spanというような強弱関係のせいでスタイルが効かないときも、tableの中tdの中のspanのクラスredが…というように指定すれば効いてきたりします。
入れ子方式は色々な可能性をもっていて便利です。
Comments