「DOCTYPE 宣言による「解釈モード」の切り替え」からのつづきです。
このページでは、「DOCTYPE スイッチ」によって CSS の解釈がどのよーに変わるのか、実例を挙げていくです。
仕様どおりの解釈をしない古いブラウザが多かったために、それに合わせる形の記述慣習とそのノウハウが普及しきっている感があります。それは HTML に限らず今や CSS においても。しかしそのような記述は、「仕様どおりに解釈するブラウザ」では正しく(意図したとおりには)表示されないことが多いのです。
「DOCTYPE スイッチ」機構を備えたブラウザが、「仕様準拠の厳格解釈モード (Standards mode)」へ解釈モードを切り替えた時、そのような「仕様どおりに解釈しない古いブラウザを前提として書かれた慣習的な記述」の表示ぐあいにはかなりの変化があります。特によく見かけるそういうモノをいくつか例示してみるです〜。
「DOCTYPE 宣言による「解釈モード」の切り替え」にて示したように、「DOCTYPE スイッチ」するかどうかは DOCTYPE 宣言の書き方いかんによります。「DOCTYPE スイッチ」するブラウザ 3 種類全てにおいて、
となります。見比べられるようにサンプルページを用意したです。
MacIE5 は CSS 解釈の「DOCTYPE スイッチ」効能がかなりハッキリしてるブラウザです。「表示例のスクリーンショット」には MacIE5 の物を用いましたです。
試したブラウザは「DOCTYPE 宣言による「解釈モード」の切り替え」ページとおなじです。
text-align
の効果は、それが指定されたブロックレベル要素内部のすべてのインライン文字列やインライン画像に及ぶ。ただし、内部のブロックレベル要素の水平位置は変化しない(text-align っすから)。
text-align
の効果が、文字列だけでなく内包するブロック要素自体の配置にまで及ぶ。解釈 | HTML | 表示例 | Mozilla | MacIE5 | WinIE6 | WinIE5.5 | Opera6 | NN4.x | iCab |
---|---|---|---|---|---|---|---|---|---|
仕様どおり | サンプル | ショット | ○ | ○ | − | − | ○ | − | ○ |
過去慣習的 | サンプル | ショット | − | ○ | ○ | ○ | − | ○ | − |
「width, height の示す幅・高さの範囲に内包子要素や文字等がぴっちり収められ、padding, border はその外周に追加する形で表示する」…これが CSS1/CSS2 の仕様です。 CSS3 でもこれが初期状態の解釈。(box-sizing: content-box
)
多くのブラウザは、周囲の padding, border 領域分も合計してそれが width, height 値と同じになるように表示してしまってます。たとえば WinIE 。CSS2 までの仕様では、この挙動は正しく無い。CSS3 ではこの挙動をさせる明示的な指示ができるよーになります。(box-sizing: border-box
)
解釈 | HTML | 表示例 | Mozilla | MacIE5 | WinIE6 | WinIE5.5 | Opera6 | NN4.x | iCab |
---|---|---|---|---|---|---|---|---|---|
仕様どおり | サンプル | ショット | ○ | ○ | ○ | − | ○ | − | ○ |
過去慣習的 | サンプル | ショット | − | ○ | ○ | ○ | − | ○ | − |
数値指定する場合に、必ず単位( px とか em とか)を付ける必要のあるプロパティは多いです。 border の太さ (border-width
) もその一つ。そのようなプロパティに単位のない数値を指定した場合、不正な指定であるとして無視(無効化)されるのが CSS の仕様です。
border-width
に単位のない数値が指定された場合、不正な値として扱い、指定自体を無視する。border のスタイル一括指定 (border:
) の場合は当然、一括指定のすべてが無効となる。border-width
の太さに単位のない数値が指定された場合は、ピクセル値指定であるものとして扱う。一括指定の場合もおなじ。解釈 | HTML | 表示例 | Mozilla | MacIE5 | WinIE6 | WinIE5.5 | Opera6 | NN4.x | iCab |
---|---|---|---|---|---|---|---|---|---|
仕様どおり | サンプル | ショット | ○ | ○ | ○ | − | ○ | − | − |
過去慣習的 | サンプル | ショット | △(注1) | ○ | ○ | ○ | − | △(注2) | ○ |
border
スタイル一括指定時は宣言がまるごと無効になる。border
スタイル一括指定時に宣言がまるごと無効になる。まぁ NN4.x は全般的に border 系の実装もハチャメチャだし。ここでは、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 である」とします。
font-size: medium
がブラウザデフォルトのフォントサイズと同じ大きさ。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 的かというハナシをする以前のような…。