スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
| 文書型宣言 | MacIE5 | Gecko | WinIE6 | Opera7 |
|---|---|---|---|---|
| 宣言なし | 互換 | 互換 | 互換 | 互換 |
| 未知の宣言 | 標準 | 標準 | 標準 | 標準 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> | 標準 | 標準 | 標準 | 標準 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD html 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> | 標準 | 標準 | 標準 | 標準 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | 互換 | 互換 | 互換 | 互換 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> | 標準 | 互換 | 標準 | 標準 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> | 互換 | 標準 | 標準 | 標準 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | 標準 | 標準 | 標準 | 標準 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | 互換 | 互換 | 互換 | 互換 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">※3 | 標準 | 標準 | 標準 | 標準 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | 標準 | 標準 | 互換※1 | 互換※2 |
※1先頭に XML宣言を記述すると互換モードになってしまう。
※2XHTMLドキュメントがtext/htmlとして読み込まれ、XML 宣言がある場合、IE（6）とOPERA 7.0-7.03 では互換モードとなります。OPERA 7.1 以降では、XML 宣言、PI 、およびコメントを無視して表示モードを決定します。XML ドキュメントの場合、OPERA とIEは標準モードで表示します。 http://www.opera.com/docs/specs/doctype/
このページは Opera7.5 では標準モード。7.0 から 7.03 は判別しなきゃダメか。面倒くさいな。それにしてもデフォルトが IE6 になっているというのはどーなってんだ？ Opera を使う人はどんどんアップグレードする人が多いと思われるので無視していいですかね？
ユーザーエージェント詐称はいいが、だからといって Opera が CSS の MS 独自拡張に対応している訳ではない。このページその困った仕様が邪魔して、IE6 用シートかまさってヘンになってる。Opera さんには一体ナニをしたいのか聞いてみたい。マックだと iCab （v3 になってすごい良くなった）なんかもユーザーエージェント設定があるけど、プログラムとしてまーだまだ未完成なのにそんな機能だけ動いて。そーゆー UA でもちゃんと見れるようにしたいと思っても大変ですよ。ひとまずスタイルシート機能は切ってもらわないと。
XML は文字コードのデフォルトが UTF-8 で、その場合 XML 宣言を記述しなくてもよく、それ以外の文字コードを利用する場合は、原則として XML 宣言に charset 記述が必要。ただし、xhtml1.0 の場合、仕様書の第2版で 上位のプロトコルで文字コードを指定すれば XML宣言はなくてもよい
となったそうです。てことは .htaccess にて charset を指定している場合は宣言削除可能。ここのサイトはそういう環境で全てShift_JIS送出なのですが、（UTF-8 に統一しました）サイトコンテンツの仕様（DB + PHP を使っているとか）等、環境によってはそれはできないので、一応 XML 宣言自体をブラウザ判別（SSI）して WindowsIE （Opera の動作はイマイチわからん）では送出しないようにしています。送出しない制御をいれたりすることもあります。
※3現段階では、HTML で済むものを XHTML にしてすぐさまナニかが可能というわけではないので、通常はHTML4.01で記述します。今後の展開等を考えれば、標準準拠仕様となる DOCTYPE を使い、異なる仕様のブラウザにはスタイルシートを適用しない、専用上書きシートをカスケードする等の処理をします。それで※3 のloose.dtd というやつを使うことが一番多い（多かった）です。Strict にできない理由はtarget 属性くらいなのですが、すでに自分自身は解決ずみ（代替え対策があるということ）なので、単に記述ミスの予防策だったりして。（性格が loose だからか）
横幅 100% の扱いは、モードというより、ブラウザ依存度が高いです。IEは、スクロールバー領域の扱いが他と異なり、本来 auto 指定でスクロールバーがない状況を期待しても出現する。この点は専用シート指定で解決する方法があります。後日記載予定。
CSS のボックスサイズに関して、標準仕様となった状況では、以前のブラウザのサイズ取得方法と異なっている点の対処を常に考えなければなりません。DOCTYPE スイッチを使えば大丈夫というのではなく、標準仕様で書いた場合は互換モードで動作するブラウザ上でのサイズが変わってしまうため、別シートを適用する（DOCTYPE を変える？なんてこともアリか）ことになります。
WindowsIE5 のバグ（または仕様）で、フォントサイズのデフォルトがキーワード絶対値で small になっています。IE6 の標準準拠モードでは medium になります。パーセントで100%とすると、モードに関わらず同じサイズになるので、それを使って互換対策をとれます。フォントサイズ指定に関してまとめてみました。まとめきれていませんが。
開いたページの幅 100%、高さ 100% いっぱいを使うというデザインは、互換モードでテーブルを使うほうが無難です。標準仕様では、高さ 100% が取得できない模様。JavaScript を使ってピクセル → パーセント変換をするという方法はあります。
上記にかいた通りの高さ 100% でテーブルを使ったサイトがあり、最近気づきました。Safari はバージョン1.3から table height="100%" の動作が変わりました。 Standard モードで上位ブロックの高さが指定されていない場合、以前は body の高さいっぱいになったのですが 1.3（2.0 は未チェックですがおそらく同じな筈）は内容に応じた必要最小限の高さにしかなりません。また（table に限らず）上位ブロックが固定ブロックの場合、その中のブロックで height:100% を使う場合、以前は動作が不安的だった点はよくなったような気がします。
そもそも Safari の DOCTYPE スイッチの挙動はよく分からないマンマ。最近は互換モード記述はしないのでナオサラ。ひとまず動作は Mozilla と同じだと思ってます。古い Mozilla 環境も少なくなって調べれなくなっちまった。Safari が下の Almost Standard モードと同じ動作をするかどうか未調査。
なにやら「基本的に標準準拠だけど、テーブルのサイズ等が quirks モードと同じ」とかいう、中間的措置の新種モードが、Mozilla でできたようなのですが、いまんとこ調査中です。やれやれ。
- Almost Standardモード
HTML4.01 Transitional(システム記述子あり)で使用される特殊な Standard モードです。
Full Standard モードでテーブルレイアウトを行うには CSS に詳しくないとできません。そこで折衷案として後から作られたモードで、その名の通りほぼ Full Standard モードでレンダリングされますが、table内の画像に関しては CSS2 仕様に準拠せずに拡大解釈を行うようになっています。この件に関しては「table内に画像を隙間無く敷き詰めるには注意が必要です#1」と、「table内に画像を隙間無く敷き詰めるには注意が必要です#2」で詳しく解説していますので、こちらもあわせてご覧ください。
Page InfoではFull Standardモードと区別なく、Standards compliance modeと表示されます。
table の中に画像ハメるのなんて、ここ数年やってないから全然知りませんでした。あはは。table の height:100% の扱いはなんとく違うのが分かってたんだけど。
Mozilla サイトの CSS は、標準準拠できれいなカドマル作ってます。ヘタな CSS テクニックサイト見るより、参考になる。いくつかのブラウザ判別ハック使ってますが、IE 独自指定等は使っていなくて、その上 IE 等の「非標準ブラウザ」が未対応の指定を平気で（ちゃんとみれる状態ですが、）
詳細はこのへんを参考に。
＃もじら組 の Web標準普及プロジェクト には多いに興味があるので、こんど bugzilla してみよう。Mozilla より Safari が好きな人だとダメですかね？
2005年05月16日 20:56
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto