記事本文
DOCTYPE スイッチについて
DOCTYPE 宣言の種類によって、ブラウザのレンダリングが標準準拠モードになったり後方互換モードになったりすることを DOCTYPE スイッチと言います。 今回は要点だけ手短かに行きたいので詳しくは解説しませんが、 IE 6 だと DOCTYPE 宣言より前になんらかの文字 ( 記述が推奨される XML 宣言であっても ) があれば問答無用で後方互換モードになるバグがあるとか、まあよく聞く話題です。
標準準拠モードと後方互換モードでレンダリングにどんな違いが現れるかは Lucky bag::blog: xml宣言についてや !DOCTYPE スイッチが良いリソースなのでそちらをご覧下さい。
既存の DOCTYPE スイッチ一覧表に "?"
ここ数日、この DOCTYPE スイッチについて調べていたのですが、書籍やサイトに書かれている情報と、実際に試してみた結果が少し違うんですよね。 あるリソースでは後方互換モードとされている DOCTYPE 宣言・ブラウザが、自分で試してみると標準準拠モードと思われるレンダリングになっている、という感じで。
例えば、私の手元にある書籍で最新のものであるスタイルシートサンプル&リファレンスの 30 ページにある一覧表では
| DOCTYPE 宣言 | Firefox | IE 7 | IE 6 | Opera | Safari | MacIE 5 |
|---|---|---|---|---|---|---|
| なし | 互換 | 互換 | 互換 | 互換 | 互換 | 互換 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | 互換 | 互換 | 互換 | 互換 | 互換 | 互換 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> | 標準 | 標準 | 標準 | 標準 | 標準 | 互換 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
標準 | 標準 | 互換 | 標準 | 標準 | 標準 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
標準 | 標準 | 互換 | 標準 | 標準 | 標準 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
標準 | 標準 | 互換 | 標準 | 標準 | 標準 |
となっていますし、以前見かけてブックマークしていた miniturbo::blog DOCTYPEスイッチ でも
| DOCTYPE 宣言 | Firefox 2 | IE 7 | IE 6 | Opera 9 | Safari | NN 7 | MacIE 5 |
|---|---|---|---|---|---|---|---|
| なし | 互換 | 互換 | 互換 | 互換 | 互換 | 互換 | 互換 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | 互換 | 互換 | 互換 | 互換 | 互換 | 互換 | 互換 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 | 互換 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
標準 | 標準 | 互換 | 標準 | 標準 | 標準 | 標準 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
標準 | 標準 | 互換 | 標準 | 標準 | 標準 | 標準 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
標準 | 標準 | 互換 | 標準 | 標準 | 標準 | 標準 |
となっています。 ( なお、比較のためにそれぞれの表の形式をある程度揃えています。 ) しかし、 URL 表記無しの HTML 4.01 の DOCTYPE 宣言 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN">) でも、いくつかのブラウザはこの表と違って標準準拠モードになっているような気がするのです。
検証用リソースと検証結果
検証のために、 body 要素内の記述は共通で、 DOCTYPE 宣言や XML 宣言のみを書き換えたものを用意し、それを実際に表示して確かめてみました。 h2 レベルの見出しを含む div.section の margin-left プロパティに 50 という不正な値 ( <margin-width> 値は auto または <length> または <percentage> しか指定できませんので、単位無しの数値を値として指定した場合は標準準拠モードでは不正な値となり、その宣言は無視されます ) を指定しているので、後方互換モードでレンダリングされた時のみ h2 レベルの見出しを含む div.section は 50px 分の左マージンを持つはずです。 なお、表中の DOCTYPE 宣言の列からサンプルファイルにリンクしていますので、実際に確認していただくと良いでしょう。
また、 Safari 2 および MacIE 5 での検証は SEOについての覚書の土屋 裕美さんにご協力いただきました。 この場を借りてお礼申し上げます、ありがとうございました ! 次会う時には何かオゴります。
それと、サンプル HTML に用いたグリッド背景画像は Lucky bag::blog: グリッドレイアウトのための背景画像のものを使わせていただきました。 これ初めて活用してみましたが、便利ですね。 次会う時には何かオゴってください。 ( 何故 )
基本的にはモダンブラウザならたいてい標準準拠モードでレンダリングするということで良いみたいですね。 注意点は IE 6 は XML 宣言をすると後方互換モードになってしまうこと。 また、 IE 7 でも drry+@-> IE7 Beta 2 における XHTML の標準準拠モード切替えについてで解説されているように、 XML 宣言中の区切り文字を半角スペース以外にしてしまうと後方互換モードになってしまいます。
URL 指定無しの HTML 4.01 Transitional の罠
この記事を書いた後に miniturbo::blog DOCTYPEスイッチの方のサンプルを確認したら、 URL 指定無しの HTML 4.01 Transitional の DOCTYPE 宣言はやはり後方互換モードでレンダリングされているんですよねえ。 おかしいなあ......と思って自分のサンプルと見比べていたら、あることに気付きました。
HTML 4.01 Transitional の DOCTYPE 宣言ですが、私は <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN"> というように書いていたんですよね。 これはローカルのメモから持ってきたものなので、もうどこを参考にしたのかすら分かりませんが。 で、 HTML 4.01 Transitional 以外の DOCTYPE 宣言では例えば <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> のように書いています。 この違い、分かるでしょうか。
HTML 4.01 Transitional の方は、 Transitional //EN と、 //EN の前に空白を入れているのに対し、それ以外では //EN の前に空白を入れていません。 「もしや」と思って <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と書いたサンプルを作ってみると、 miniturbo::blog DOCTYPEスイッチと同じように全て後方互換モードになりました。 なお、追記時には JamGraffiti | JamDiary-twig の壱茉さんに検証を手伝っていただきました。 ありがとうございます !
URL 指定無しのHTML 4.01 Transitional 以外ではどれも標準準拠モードになるので空白があっても無くても変化はありませんが、この DOCTYPE 宣言の時だけは空白に気をつけておかないと、あえて後方互換モードにしたつもりが標準準拠モードになってしまった......ということも起こりそうですね。 そしてこんな違いは普通気付きません ! 私も 2 つを見比べてやっと気付いたくらいですし。
