「DOCTYPE スイッチ」 CSS 解釈実例編

説明

このページでは、「DOCTYPE スイッチ」によって CSS の解釈がどのよーに変わるのか、実例を挙げていくです。

仕様どおりの解釈をしない古いブラウザが多かったために、それに合わせる形の記述慣習とそのノウハウが普及しきっている感があります。それは HTML に限らず今や CSS においても。しかしそのような記述は、「仕様どおりに解釈するブラウザ」では正しく（意図したとおりには）表示されないことが多いのです。

「DOCTYPE スイッチ」機構を備えたブラウザが、「仕様準拠の厳格解釈モード (Standards mode)」へ解釈モードを切り替えた時、そのような「仕様どおりに解釈しない古いブラウザを前提として書かれた慣習的な記述」の表示ぐあいにはかなりの変化があります。特によく見かけるそういうモノをいくつか例示してみるです～。

解釈モード想定サンプルページ

「DOCTYPE 宣言による「解釈モード」の切り替え」にて示したように、「DOCTYPE スイッチ」するかどうかは DOCTYPE 宣言の書き方いかんによります。「DOCTYPE スイッチ」するブラウザ 3 種類全てにおいて、

DOCTYPE 宣言が HTML 4.01 Strict （公開識別子+システム識別子）のページ: →仕様どおりに厳しく解釈するモード (Standards mode)
DOCTYPE 宣言が HTML 4.01 Transitional （公開識別子のみ）のページ: →古いブラウザ前提の過去慣習的な解釈を再現するモード (Quirks mode)

となります。見比べられるようにサンプルページを用意したです。

表の記号凡例

それぞれのサンプルページが想定する解釈方法に表示が適合する場合は ○印、適合しない場合は－印、としました。
つまり双方に ○印が付いてる場合、ブラウザは「DOCTYPE スイッチ」によって解釈方法を切り替えているという事になります。
どちらかのみに ○印が付いてる場合、ブラウザはその解釈方法のみに固定されてます。「DOCTYPE スイッチ」はありません。

補足

MacIE5 は CSS 解釈の「DOCTYPE スイッチ」効能がかなりハッキリしてるブラウザです。「表示例のスクリーンショット」には MacIE5 の物を用いましたです。

試したブラウザは「DOCTYPE 宣言による「解釈モード」の切り替え」ページとおなじです。

実例： text-align の効果

text-align の効果は、それが指定されたブロックレベル要素内部のすべてのインライン文字列やインライン画像に及ぶ。ただし、内部のブロックレベル要素の水平位置は変化しない（text-align っすから）。

仕様どおりの解釈 (= Standards mode)：: 内包している文字列のすべてが水平位置揃えされるが、ブロックレベル要素そのものの配置は変化しない。
過去慣習的な解釈 (= Quirks mode)：: text-align の効果が、文字列だけでなく内包するブロック要素自体の配置にまで及ぶ。

解釈	HTML	表示例	Mozilla	MacIE5	WinIE6	WinIE5.5	Opera6	NN4.x	iCab
仕様どおり	サンプル	ショット	○	○	－	－	○	－	○
過去慣習的	サンプル	ショット	－	○	○	○	－	○	－

実例： width, height の計算方法

「width, height の示す幅・高さの範囲に内包子要素や文字等がぴっちり収められ、padding, border はその外周に追加する形で表示する」…これが CSS1/CSS2 の仕様です。 CSS3 でもこれが初期状態の解釈。(box-sizing: content-box)

多くのブラウザは、周囲の padding, border 領域分も合計してそれが width, height 値と同じになるように表示してしまってます。たとえば WinIE 。CSS2 までの仕様では、この挙動は正しく無い。CSS3 ではこの挙動をさせる明示的な指示ができるよーになります。(box-sizing: border-box)

仕様どおりの解釈 (= Standards mode)：: 周囲の padding, border 領域分を width, height 値に含めないで（周囲に追加して）表示する。
過去慣習的な解釈 (= Quirks mode)：: 周囲の padding, border 領域分も合計してそれが width, height 値と同じになるように表示する。

解釈	HTML	表示例	Mozilla	MacIE5	WinIE6	WinIE5.5	Opera6	NN4.x	iCab
仕様どおり	サンプル	ショット	○	○	○	－	○	－	○
過去慣習的	サンプル	ショット	－	○	○	○	－	○	－

実例：不正な数値の解釈

数値指定する場合に、必ず単位（ px とか em とか）を付ける必要のあるプロパティは多いです。 border の太さ (border-width) もその一つ。そのようなプロパティに単位のない数値を指定した場合、不正な指定であるとして無視（無効化）されるのが CSS の仕様です。

仕様どおりの解釈 (= Standards mode)：: border-width に単位のない数値が指定された場合、不正な値として扱い、指定自体を無視する。border のスタイル一括指定 (border:) の場合は当然、一括指定のすべてが無効となる。
過去慣習的な解釈 (= Quirks mode)：: border-width の太さに単位のない数値が指定された場合は、ピクセル値指定であるものとして扱う。一括指定の場合もおなじ。

解釈	HTML	表示例	Mozilla	MacIE5	WinIE6	WinIE5.5	Opera6	NN4.x	iCab
仕様どおり	サンプル	ショット	○	○	○	－	○	－	－
過去慣習的	サンプル	ショット	△（注1）	○	○	○	－	△（注2）	○

注1: border スタイル一括指定時は宣言がまるごと無効になる。
注2: border スタイル一括指定時に宣言がまるごと無効になる。まぁ NN4.x は全般的に border 系の実装もハチャメチャだし。

実例： font-size の振る舞い

ここでは、font-size を <absolute-size> で指定した時の挙動を観察します。

<absolute-size> は、ユーザエージェントによって計算・保持されているフォントサイズ対照表を参照する、xx-small, x-small, small, medium, large, x-large, xx-large というキーワード群からなってます。font-size の初期値は "medium" です。

…ということは、「 font-size: medium という指定がなされた箇所は、ユーザーがブラウザに設定したデフォルトフォントサイズと同じ大きさで表示される、つまりその箇所は、レガシー HTML にて <font size="3"> とした時と同じ表示。」…というのが自然な挙動だとおもいますが、どうなんでしょう。とりあえずこの解釈を「Standards mode である」とします。

WinIE では font-size: small がブラウザデフォルトのフォントサイズと同じ大きさになるんですよね。社会通念上不自然（笑）な挙動。Quirks （＝奇癖）の呼び名に相応しい挙動だとおもいますが、どうなんでしょう。とりあえずこの解釈を「Quirks mode である」とします。

仕様どおりの解釈 (= Standards mode)：: font-size: medium がブラウザデフォルトのフォントサイズと同じ大きさ。
過去慣習的な解釈 (= Quirks mode)：: font-size: small がブラウザデフォルトのフォントサイズと同じ大きさ。

解釈	HTML	表示例	Mozilla	MacIE5	WinIE6	WinIE5.5	Opera6	NN4.x	iCab
仕様どおり	サンプル	ショット	○	○	○	－	－	○	○
過去慣習的	サンプル	ショット	－	○	○	○	○	－	－

まとめ

Mozilla (0.9.4) の CSS の解釈方法は、一部を除いて「仕様どおりに厳しく解釈するモード (Standards mode)」一辺倒の模様。 CSS 利用上、 DOCTYPE スイッチは無いものとしてあたるほうがヨロシイかと。ただしこれは 0.9.4 現在のハナシ。

MacIE5 はかなり明確に CSS の解釈方法を DOCTYPE スイッチするです。つまり DOCTYPE 宣言の書き方しだいで、意図的に WinIE5.x などの「あまり正しくない」解釈をマネさせることができるというわけっす。

WInIE6 は、text-align の効果以外は DOCTYPE スイッチによって標準準拠な解釈（ Standards モード）が可能です。そのほかに伝え聞くところによると、 Standards モード時、自身が WInIE5.5 にて追加した CSS 独自拡張でさえも無視する、らしい。すばらしいハッチャケぶり（笑） ←これはどうもちがうらしい。

NN4.x や iCab は CSS の実装がそもそもかなりオカシイので、Standards 的か Quirks 的かというハナシをする以前のような…。