DOCTYPEスイッチの3つのモードについて

|

DOCTYPE宣言によってCSSのレンダリングが変わるのですが、以下の3つのモードがあります。

  1. 完全標準モード(Full Standards Mode)
  2. ほぼ標準モード(Almost Standards Mode)
  3. 後方(過去)互換モード(Quirks Mode)

これらの違いを見ていきます。

1.完全標準モード(Full Standards Mode)

仕様に則ったとおりにレンダリングされます。ここでいう仕様とはW3C標準仕様のことで、以下の仕様書のことを指します。

2.ほぼ標準モード(Almost Standards Mode)

完全標準モードとほぼ標準モードの違いは1点だけです。

画像の表示に違いがあります。完全標準モードでは画像のvertical-alignプロパティの初期値はbaselineなのですが、ほぼ標準モードではvertical-alignプロパティの値はbottomとなります。

vertical-alignプロパティの値がbaselineであると、画像の下に空白が生じます。この理由は当blogの以下の記事を参考にしてください。

3.後方(過去)互換モード(Quirks Mode)

完全標準モードと後方互換モードにはかなり違いがあります。

最も知られているのはボックスモデルの違いです。ボックスにwidthとpaddingとborderを指定した場合、完全標準モードでは横幅 = width + padding + borderになるのに対し、後方互換モードでは横幅 = widthとなってしまいます。

その他にもいろいろあるのですが、量が多いのでここでは割愛します。以下のサイトなどを参考にしてみてください。

DOCTYPEスイッチ一覧表

DOCTYPEスイッチによるモードの違いを表にしたものです。以下のサイトをご覧ください。また、同時に「表示モードごとの CSS 解釈検証表」も載っているので合わせて参考にしてください。

このページに関連する記事

最近のブログ記事