2xup.org

標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有

最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。

DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈をエミュレートさせる機能が働き、全く表示されないなんて事がないようにするということです。

バグなのか仕様なのか、ブラウザごとに表示が整わない場合、その原因はどこにあるのかをしっかり理解し具体的にイメージできるようになるのが目的 (本当はサンプルを作ってまとめるのが好きなだけだったり) として、これら大きくわけて2種類の表示モードに実際にどのような違いがあるのか。主に CSS の解釈の違いを様々なブラウザで確認してみました。まとめた各種資料と確認に利用したサンプルを共有します。ご自由にお使いください。

確認を行った環境

共有する各ドキュメント作成時に検証をおこなった環境です。手持ちの環境ではこれが精一杯ですので、ご協力いただけると嬉しいです。

ご協力いただきたい主な環境を追記しておきます。

  • Windows 2000
    • Internet Explorer 6
  • Mac OS 9
    • Internet Explorer 5

どうぞよろしくお願いします(tnx id:ZIGOROu さん)！

各ブラウザの DOCTYPE スイッチ対応表

検証した各ブラウザで DOCTYPE 宣言の種類や有無など様々な状況でテストを行い、どの表示モードになるのかをまとめた表です。公開識別子の種類、システム識別子の有無、XHTML の場合は XML 宣言の有無などを確認できるほか、実際にそれらの宣言がどのように書かれているのかも確認できます。

表を見る時の注意点

縦に表を見るとブラウザごとに表示モードが色分されて確認できます。ほとんどが同じパターンになっているのですが、Windows IE 6 だけ後方 (過去) 互換モードになっているところがあります。これは DOCTYPE 宣言の前に半角スペース以外の文字を含む行が有る場合、後方 (過去) 互換モードになる。というバグが原因です。結果、同じ XHTML 文書でも表示モードが混在してしまいます。

表示モードごとの CSS 解釈検証結果表

各表示モードの状態で CSS の解釈の違いを検証し、まとめた表です。白抜きの丸が仕様に沿った解釈としています。

表示モードごとに CSS や HTML の解釈を確認するためのページ

表示モードごとの CSS 解釈検証結果表を作成する際に利用した検証用の文書です。お手元の環境で実際に表示モードごとの CSS の解釈の違いを確認できるほか、まとめてダウンロードを行いローカル環境やご自身のウェブサーバー、イントラネット環境にアップロードして利用できるようにしています。各項目ごとに以下の文書を用意しています。

XML 宣言を省略した XHTML 1.0 Strict で宣言した文書は Windows IE 6 で DOCTYPE 宣言の前に半角スペース以外の文字を含む行が有る場合、後方 (過去) 互換モードになるというバグが存在する為です。共有する各ケースの文書を Windows IE 6 で標準準拠モードの確認をする場合は、XML 宣言を省略した XHTML 1.0 Strict 文書を利用する必要があります。

以下のセクションでは各確認用ページへのリンクと、確認する際の注意点をまとめます。

幅・高さの計算

指定した幅 (width) と高さ (height) の外側に border と padding が足される content-box (正しい解釈) と、指定した幅と高さが border と含めてしまう border-box があります。Internet Explorer では後方 (過去) 互換モードで border-box で解釈するので、Windows IE 6 では注意が必要です。

text-align でブロック要素を揃える

text-align は指定されたブロック要素の内部にある全てのインライン要素を水平位置を揃えるプロパティです。ブロック要素の水平位置は揃えません。Windows IE は標準準拠モード・後方互換モード共、Mac IE は後方互換モードでブロック要素の水平位置も揃えます。

左右に auto のマージン

ブロックレベル要素をセンタリングするには、センタリングしたい要素の左右に値が auto の margin を設定します。Windows IE は後方互換モードで値が auto の margin が無効になります。

標準のフォントサイズ

font-size プロパティの初期値は medium で medium, small などの絶対値指定のフォントサイズはブラウザで設定したフォントサイズを対象に算出されます。つまり初期値 medium はブラウザで設定したフォントサイズと同じになります。後方互換モード時 Windows IE, Opera, Mac IE 5 では標準フォントサイズがブラウザで設定したフォントサイズ (medium) ではなく small 相当になります。

非置換インライン要素に幅と高さを指定

非置換インライン要素 (span, strong など) に幅と高さを指定しても通常は無効になりますが、後方互換モード時の Windows IE、 Mac IE では、指定通りになります。

属性値の大文字・小文字区別

例にある class, id 属性の値は大文字／小文字を区別します (box, Box BOX は各々違う値)。Mac IE 以外のブラウザで後方互換モードの場合、属性値の大文字／小文字を区別せず、同じ値として扱います。

単位必須の数値に単位が無い場合

単位必須の数値に単位が無い場合、通常は無効になりますが、確認した全てのブラウザで後方互換モードの場合、px として処理されます。

# の無い16進数 (6桁・3桁) での色指定

# の無い16進数 (6桁・3桁) での色指定は無効になる環境がほとんどです。ショートハンドで指定する場合、値の指定順序で処理が違ったり、後方互換モードでは指定した色で処理したりする環境もあります。表示モードごとの CSS 解釈検証結果表と合わせて確認してみてください。

値が pre の white-space プロパティの処理

値が pre の white-space プロパティの処理は指定した要素内の改行、タブ文字、連続空白をそのまま表示します。後方互換モード時の Windows IE はこの指定が無効になります。

高さ単位が % の要素の算出対象

単位が % の値で指定した要素の高さは、その指定した要素の包含ブロックの高さに対する割合で算出されます。もし包含ブロックに高さの指定が無い場合、単位が % の値で指定した要素の高さは auto として処理 (内包するコンテンツによる) されます。後方互換モードの場合、Safari, Firefox, Camino, Mac IE で算出対象が表示域となります。

高さ単位が % の要素の算出対象 (body 要素の最初の内包要素)

body 要素の最初の内包要素に単位が % の高さを指定した場合、検証した全てのブラウザの後方互換モードで算出対象がブラウザの表示域になります。

html 要素へのスタイル定義

html 要素にも通常の要素と同じようにスタイル指定可能です。Windows IE の後方互換モードでは、CSS の解釈とは別にブラウザで見た目上始まる最初の要素が html 要素ではなく、body 要素になります (ルート要素は html 要素)。

結果、html 要素に指定していたスタイルは、body 要素に指定したスタイルかのように処理 (継承しないプロパティも同様に処理されるので、継承ではなく引き継ぎ?) され、html 要素に指定したスタイルと同じプロパティで body 要素にも指定がある場合 body 要素に対する指定を優先します。もし body に指定したプロパティがショートハンドの場合、無指値の処理は通常と同じようにリセットされます。

body 要素の最初の内包要素に上マージンがある場合の body 要素デフォルトのマージン処理

別のブログ記事に詳細とサンプルファイルへのリンクを用意しています。

スライド形式の資料

DOCTYPE スイッチの概要と、各表示モードの解説。実際に各ブラウザで確認した内容をいくつか取り上げています (.pdf ファイル)。

ファイルをまとめてダウンロードする

検証用ファイル集やスライド形式の資料など共有ドキュメントをまとめてダウンロードできるようにしています。検証用ファイルはお手持ちのサーバーやローカルやイントラネットの環境に、そのままアップロード等を行い各資料を確認できるようになっています。