注意点,ブラウザ振り分け

注意点

IE3はサポートしていない単位（em, ex）, 単位のない実数を全てpxとして扱います。
外部ファイルを参照する場合、IE3ではBODY要素に対するbackground指定が無視されます。
相対URIはスタイルシートを基準にしなければならないのですが、NC4はHTML文書が基準です。
</TD>, </TH>, </P>等は省略可能なのですが、出来れば省略しない方が良いです。例えば、画像やテーブルにline-height指定が及ぶとブラウザによってはとんでもない表示になるので、分割するとします。以下のような場合、省略してしまうとブラウザによっては分割したのが無駄になります。
```
<P style="font-size: 12pt; line-height: 15pt">段落</P>
<P><IMG src="x.gif" alt="画像"></P>
```
IEはParagraph、NC4はTableでの解析ミスが多いような気がします。
次のような指定をすると、NC4では全ての宣言が無視されてしまいます。クラス名を日本語にする場合は、更に注意が必要です。
```
<STYLE type="text/css">
<!--
.class1 {
 font-size: 12pt;color: red;font-family: 'ＭＳ 明朝';
}
```
原因は宣言中の日本語なのですが、id属性を使ったりブロックを分割すれば、font-size, colorは生き残ります。
```
<STYLE type="text/css">
<!--
.class1 { font-size: 12pt;color: red }
#font1 { font-family: 'ＭＳ 明朝' }

.class2 { font-size: 12pt;color: red }
.class2 { font-family: 'ＭＳ 明朝' }
```
また、IE3はfont-familyの値リスト全体を引用符で括ることを前提にしているため、場合によっては後に続く宣言を無効にしてしまいます。
NC4はスタイルシートとJavaScript( document.write() )の相性が悪く、再読み込みやリサイズするとレイアウトが目茶苦茶になったりする場合があります。JavaScriptを無効にすると、スタイルシートも無効になります。
その他、Netscape6とWindows版IEの互換性の問題。

ブラウザによる振り分け

除 WinIE3

<LINK rel="stylesheet" type="text/css" href="x.css">
<LINK rel="stylesheet" type="text/css" href="dummy.css">

WinIE3は、基本的に一番下しか読み込まない。外部ファイルが見つからない場合におかしな処理をするブラウザ（NC4, WinIE3）があるので、ダミーも必ず実在するファイルにする。

※ 具体的には、｢ファイルが見つからない｣というエラーになってしまいます。サーバ上のファイルでないと報告されないので、適当なコメントを書いたダミーファイルを、忘れないうちに確保しておいた方が良いかもしれません。* 存在しない外部ファイルにリンクしたHTMLファイルのサンプル

使い方のまとめもご覧下さい。

除 NC4

<LINK rel="stylesheet" type="text/css"
         href="x.css" media="all">
<LINK rel="stylesheet" type="text/css"
         href="x.css" media="print">

<STYLE type="text/css" media="all">
<STYLE type="text/css" media="screen,tv,print">

media属性にscreen以外の値を指定すれば読み飛ばされる。

除 NC4 & WinIE3

<STYLE type="text/css">
<!--
@import url(x.css);
@import url("y.css"); /* ｢"｣で括るとMacIE4.5は認識しない */
@import url('z.css'); /* ｢'｣で括るとMacIEは認識しない */

Netscape6, MacIE3以降, WinIE4以降は対応している。

除 IE3 & IE4.0 & NC4

<STYLE type="text/css">
<!--
@import "x.css";
@import 'y.css'; /* ｢'｣で括るとMacIEは認識しない */

Netscape6, MacIE4.5以降, WinIE5以降は対応している。

除 IE3 & IE4 & NC4

<STYLE type="text/css">
<!--
.myClass { color: red }

...

<P class="myClass dummy">

スペースで区切って、複数のクラス名を付ける。Netscape6, IE5以降は対応している。

除 IE3 & IE4 & NC4 & MacIE5

<STYLE type="text/css">
<!--
BODY { background-color: white;color: black }
@media screen {
 BODY { color: green }
}
@media screen, print {
 BODY { background-color: yellow }
}

Netscape6, WinIE5以降は対応している。

除 IE3 & IE4 & NC4 & WinIE5/6

<STYLE type="text/css">
<!--
@import url("x.css") all;
@import url("y.css") screen, print;

Netscape6, MacIE5は対応している。引用符(")を用いなければMacIE4.5でも認識し、アポストロフィー(')で括るとIEは認識しなくなる。

除 IE3 & IE4 & IE5/6 & NC4

<STYLE type="text/css">
<!--
@import "x.css" all;
@import 'y.css' screen, print;

Netscape6は対応している。

除 IE4以降

<LINK rel="stylesheet" type="text/css"
         href="x.css" disabled>
<STYLE type="text/css" disabled>

disabled論理型属性によって適用されなくなる。ただし、IE独自拡張。

※ MAC版は4.5以降。

除 WinIE5x以外

<!--[if IE 5 ]>
  <LINK rel="stylesheet" type="text/css" href="x.css">
  <STYLE type="text/css">
    BODY { background-color: white;color: black }
  </STYLE>
<![endif]-->

WinIE5は正しくコメントとして扱わない。この場合、としてはいけない。

除 WinIE5以降以外

<!--[if gte IE 5 ]>
  <LINK rel="stylesheet" type="text/css" href="x.css">
  <STYLE type="text/css">
    BODY { background-color: white;color: black }
  </STYLE>
<![endif]-->

WinIE5以降は正しくコメントとして扱わない。この場合、としてはいけない。

除 WinIE5.5以降以外

<!--[if gte IE 5.5000 ]>
  <LINK rel="stylesheet" type="text/css" href="x.css">
  <STYLE type="text/css">
    BODY { background-color: white;color: black }
  </STYLE>
<![endif]-->

WinIE5.5以降は正しくコメントとして扱わない。IE 5.5ではなく、IE 5.5000にする。この場合、としてはいけない。

NC4.xのリサイズバグ対策

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
/**
 * resize.js 0.3 970811
 * by gary smith
 * js component for "reloading page onResize"
 */

if(!window.saveInnerWidth) {
  window.onresize = resizeIt;
  window.saveInnerWidth = window.innerWidth;
  window.saveInnerHeight = window.innerHeight;
}

function resizeIt() {
    if (saveInnerWidth < window.innerWidth || 
        saveInnerWidth > window.innerWidth || 
        saveInnerHeight > window.innerHeight || 
        saveInnerHeight < window.innerHeight ) 
    {
        window.history.go(0);
    }
}
//-->
</SCRIPT>

ネットスケープのサイトで提供されているリサイズされたらリロードするスクリプト。外部ファイルにする場合、NN3は、MIMEタイプを設定しておかないと拡張子がjsのファイルを表示してしまいます。language属性も無視されるので、HTMLファイルに直接埋め込んだほうが良いと思います。MIMEタイプを設定できるのであれば、.htaccessに以下のように追加します。

AddType application/x-javascript js

Font properties | CSS1 主要属性対応表