標準準拠と過去互換モード
今回はスタイルシートは出てきません。HTMLの話なのですが、
スタイルシートを使うときに非常に重要な話です。
ちょっと難しいですが、一度は目を通してみてください
標準準拠と過去互換モードとは？
世の中には常に「過去のもの」、「現在メジャーなもの」、「最先端のもの」の3つが存在しています。 ブラウザーもまた然り。
ブラウザーの場合、「過去のもの」はwin版IE5、「現在メジャーなもの」はIE6、「最先端のもの」はfirefoxなどがあります。 ちなみにシェアはIE6が約8割、残りは過去と最先端で半分づつといったところです。
当然過去と最先端ではCSSの解釈の違いに大きな差があって、一方では普通に見えても、もう一方ではメチャクチャだったりします。 これがCSSの普及を邪魔する理由の1つだったりします。
で、シェアNO1のIE6は良く考えたもので、「過去のブラウザー」に合わせて書かれたページなら過去互換モード、 「最先端のブラウザー」に合わせたページなら標準準拠モードで解釈で解釈してくれます。 これのおかげで、ブラウザーによる崩れを最小限にすることができています。
ただし、いくら最先端向けに書いても、「最先端で書いてます」という宣言をし忘れると過去互換で解釈されてしまいます。
これが意図した通りのレイアウトにならない原因であったりします（私の実体験）。
でも、宣言の仕方はあまり知られていません。今回はそれを紹介したいと思います。
スタイルシートを使うことや未来のことを考えると、できるかぎり標準準拠モードを使って欲しいと思います。 このサイトも標準準拠モードで解釈されることを前提にテクニックの紹介をしています。
標準準拠モードで解釈してもらうための宣言文
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
これをHTMLファイルの1行目に加えてください（HTMLタグより上です）。
これは文章型宣言と言われるもので、「私はこれからHTMLのバージョン＊＊で書きますよ」という宣言をしています。
バージョンもいろいろありますが、上の宣言なら多少間違ったHTMLを使っても多めに見てもらえます。
ちなみに"http〜〜dtd"までを削除すると過去互換で解釈されます。
使いこなすための＋α
具体的に過去互換と標準準拠では解釈がどのように違うのかの一例をあげておきます。
- width、heightの解釈の仕方が全然違う。ボックスを理解しようでは標準準拠にあわせた解説をしています。
- font-size:large;など文字の大きさをキーワードで指定した場合の大きさ。過去互換は一回り大きく表示されます。 （標準のmediumと過去のsmallは同じ大きさ）
- 標準準拠ではbodyタグ直下のボックスにheight100%と指定しても、画面いっぱいの高さにはならない。 （これは過去互換の方が便利だった。）
などがあります。他にも解釈の違いはいろいろありますし、宣言文に関してもいろいろあります。 CSS2スタイルシート大辞典 という本にもうちょっと詳しく書いてあります。