表示モードを切り替えるには
さて、いよいよ本題です。表示モードの切り替えはどのようにして行われるのか、どのようにして表示モードを統一するのか、その方法をみていくことにしましょう。
DOCTYPEスイッチ
ブラウザが持つ複数の表示モードは、文書型（DOCTYPE）宣言の書き方によって切り替わる仕組みになっています。このような仕組みは「DOCTYPEスイッチ」と呼ばれています。
基本的には、標準に沿った適切な文書型宣言をすれば、「標準モード」となり、文書型宣言をしない場合には「互換モード」が適用されるという単純な仕組みになっています。けれども、ブラウザの種類やバージョンによって、その切り替え方法に若干の違いがあるため注意が必要です。
HTML4.01を採用する場合
まず、文書にHTML4.01を採用する場合から見ていきましょう。HTML4.01では、文書型宣言の中のシステム識別子の有無が表示モードの切り替えに関係してきます。
下記のHTML 4.01 Transitional DTDにおける文書型宣言の例では、DTDのURIを示した"http://www.w3.org/TR/html4/loose.dtd"という記述部分がシステム識別子にあたります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/loose.dtd">HTML4.01では、Web標準のルール上、システム識別子を省略することができますが、これを省略しないで書いておけば、ブラウザの表示モードを「標準モード」または「ほぼ標準モード」にすることができます。
また、Firefox、Netscape7/8、Safariにおいて「標準モード」が採用されるのは、Strict DTDの場合に限られており、Transitional DTDやFrameset DTDの場合には、システム識別子を記述しても、「ほぼ準拠モード」が採用されるようになっています。したがって、HTML 4.01において、すべてのブラウザを「標準モード」に統一したい場合には、Strict DTDを採用しましょう。
- HTML 4.01 Strict DTDの場合、システム識別子の有無に関わらず、すべてのブラウザで「標準モード」になる
- HTML 4.01 Transitional DTD／HTML4.01 Frameset DTDの場合、システム識別子があれば、「標準モード」または「ほぼ準拠モード（Firefox、Netscape7/8、Safari）」になり、システム識別子が無ければ「互換モード」になる
XHTML1.0／XHTML1.1の場合のDOCTYPEスイッチ
XHTMLの場合、Web標準のルール上では、システム識別子を省略することは許されていません。XHTMLの場合は、後述する特殊な例外を除き、文書型宣言を記述しさえすれば、「標準モード」または「ほぼ準拠モード」になります。HTML4.01同様、Firefox、Netscape7/8、Safariでは、XHTML1.0 Strict DTDまたはXHTML1.1の場合に限り「標準モード」が採用され、XHTML1.0 Transitional DTDやXHTML1.0 Frameset DTDの場合には、「ほぼ準拠モード」が採用されます。
さて、先に述べた特殊な例外とは、IE6の表示モードに関するバグです。
Win IE6の表示モードに関するバグ
IE6には、文書型宣言の前に何らかの文字列があると、互換モードが採用されるというバグがあります（IE7では解消されています）。
ここで問題となってくるのが、文書の先頭に記述するXML宣言です。XML宣言を記述してしまうと、IE6では互換モードが採用されてしまうため、他のブラウザと表示モードの統一を図ることができなくなってしまうのです。また、IE6ほどのシェアはありませんが、Opera7.0-7.03についても、XHTMLでXML宣言がある場合に「互換モード」が採用されてしまうという問題があります（Opera7.1以降では解消されています）。
これらの解決策としては、単純に、「XML宣言を記述しない」という方法を取るのが一般的です。
W3CのXHTML1.0仕様書第2版では、XML宣言の記述について、「文書の文字コードセットがUTF-8もしくはUTF-16以外で、サーバ側で文字コードセットを指定できない場合にXML宣言が必要」とされています。言い換えれば、文字コードセットをUTF-8またはUTF-16にする、あるいは、サーバ側で文字コードセットを指定した場合には、XML宣言を省略することが許されているというわけです。
まとめ
CSSを使ったクロスブラウザなデザインを実現するための第一歩として、今回は、「表示モード」について解説しました。次回からは、表示モードを統一してもカバーすることのできない「ブラウザの実装差異」について解説し、それを補う方法としてCSSハックを紹介していきます。
参考資料
- 『Designing with Web Standards XHTML+CSSを中心とした「Web標準」によるデザインの実践』 Jefferey Zeldman 著、石田優子・ソシオメディア株式会社 訳、毎日コミュニケーションズ、2004年10月
- Opera 9 のDOCTYPEスイッチ
- Mozilla's DOCTYPEsniffing
