Opera 9 の DOCTYPE スイッチ

Opera は標準に準拠したページを正しく表示できますが、すべての Web ページが標準に準拠しているとは限りません。標準に準拠したページとそうでないページを両方とも正しく表示できるように、Opera 9 は異なる二つの表示モードを使い分けています。この表示モードはそれぞれ、標準モード (Standards Mode) (IE では標準準拠モードと呼ばれているモード) と 互換モード (Quirks Mode) (原則として Internet Explorer 互換のモード) と呼ばれます。その文書に使われている文書型宣言 (DOCTYPE) によって表示モードが選択されます。

Internet Explorer (Windows 版 は ver.6.0 以上、Mac 版は ver.5.0 以上) 及び Mozilla/Netscape (ver.0.6/ver.6.0 以上) にもDOCTYPE スイッチ機能が搭載されています。また、最近の Netscape にはほぼ標準に準拠する第三のモード、「準標準モード (Almost Standards Mode)」が搭載されています。Opera 9 は Windows 版 IE6 と同じ規則に基づいて標準モードと互換モードを切り替えます。

Opera 7 ならびにそれ以降、Windows 版 IE6、Netscape 7にて標準準拠の振る舞いをする DOCTYPE
文書型文書型宣言の例URL ありURL なし
文書型宣言なし互換互換
HTML (バージョンなし)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML//EN" "http://www.w3.org/TR/html/loose.dtd">互換互換
HTML 2.0<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">互換互換
HTML 3.0<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN//">互換互換
HTML 3.2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">互換互換
HTML 4.0<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">標準標準
HTML 4.0 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">標準 [1]互換
HTML 4.0 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">標準 [1]互換
HTML 4.0 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">標準標準
XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">標準 [2]標準 [2]
WML 2.0<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD WML 2.0//EN" "http://www.wapforum.org/DTD/wml20.dtd">標準 [3]標準 [3]
XML標準標準
承認されていない文書型標準標準

[1] Netscape では互換モードとなります
[2] XML 宣言がある XHTML 文書が text/html として読み込まれた場合、IE および Opera 7.0 〜 7.03 では互換モードとなります。Opera 7.1 以降では XML 宣言や PI、コメントを無視して表示モードを決定します。XML として読み込まれた場合、Opera と IE は共に標準モードで表示します。
[3] WML 文書型は Opera でのみ認識されます。

JavaScript による描画モードの取得

IE 6.0 や Netscape 6 以降と同様、Opera は JavaScript のdocument.compatMode プロパティをサポートしています。互換モードでページが描画されている場合このプロパティの値は「QuirksMode」 (他のブラウザでは「BackCompat」)に、標準モードで描画されている場合には「CSS1Compat」になります。

互換モードおよび標準モードでのデザイン

互換モードは正しくないページを表示することを可能にします。新たにページを作成する場合、標準に準拠して作成し、文書型宣言を用いて確実に標準モードとする事が最良の選択です。念のために下記の「表示の非互換性」をお読みください。次善の策を講じねばならないかもしれません。

Netscape 4 と IE でのみテストされたページが既にある場合、最初は互換モードになるようにしておくのが安全でしょう。それらのブラウザと Opera の標準モードでテストした後、標準モードへ安全に切り替える事ができます。

互換モードと標準モードにおける描画の相違を網羅した一覧はありません。両モード間の相違は、その時々の標準的な相違と共に変化し続けるためです。標準モードの描画は常に標準へ従ってゆくでしょう。両モード間の最も重要な相違点は以下の通りです。ほとんどの相違点は二つのカテゴリーのうちのいずれかに分類されます。

記述エラーの補正
問題を引き起こす可能性は低いでしょう。記述エラーが発生しない限り、他のブラウザや両モードにて相違なく描画されます。
描画の非互換性
注意が必要です。互換モードおよび古いブラウザでの描画は標準に準拠した描画と異なります。この非互換性の回避策として特定ブラウザに依存しない代替手段があります。この代替手段を講じない場合、Netscape 4 および Windows 版 IE 4.0 〜 5.5 では、Opera や最新の NS、IE の標準モードと異なる表示になります。互換モードであれば、先ほど挙げたブラウザはすべて同じように描画するでしょう。しかし DOCTYPE スイッチを持たない標準に準拠したその他ブラウザは標準に準じて描画するでしょう。

単位がない CSS の size と position プロパティ値

CSS の中で単位のない数値 (例: "width: 300") を互換モードでは px 値として解釈します。標準モードでは無視されます。

数値と単位の間に空白がある CSS の size と position プロパティ値

数値と単位の間の空白があるもの (例: "width: 45 em") はCSS において無効です。Opera はこれを互換モードでは許容しますが、標準モードでは無視します。

数字で始まる CSS のクラスおよび ID セレクタ

クラスや ID は数字ではなく、文字もしくはアンダースコア (_) で始まらねばなりません (例: <div class="2">)。Opera はこのようなセレクタを標準モードでは無視しますが、互換モードでは許容します。

テーブル列の 'height' 属性 (7.0 〜 7.11)

HTML の 'tr' 要素は 'height' 属性を持ちません。Opera 7.0 〜 7.11 に限っては互換モードでこの属性を許容していましたが、Opera 7.2 以降のバージョンでは標準モードでも 'height' 属性を許容します。

高さが指定されているブロック要素の縦方向の overflow

互換モードでは、内容にあわせてブロック要素が拡張されます。標準モードでは height による指定を優先し、特に指定がない場合には overflow:visible を適用します。

標準モードにおける table 内への CSS プロパティの継承

Windows 版 IE と Netscape 4 には、table 内へ CSS プロパティが継承されないというバグがあります。互換モードではこのバグを模倣しますが、標準モードでは模倣しません。

互換モードでは幅が指定されたインライン要素がインラインブロックに置き換えられます

CSS の 'width' プロパティはインライン要素に対しては無視されるべきです。互換モードではインライン要素に幅が指定されている場合、それをインラインブロック (display: inline-block) として扱うことで指定された幅を確保します。

CSS の文字サイズは互換モードから標準モードで一回り大きくなります

Windows 版 Internet Explorer (IE6 の標準準拠モードを除く) の文字サイズの初期値は font-size: small です。互換モードではこの動作を模倣しますが、標準モードでは font-size: medium を使用します。すなわち互換モードではキーワードによって与えられる絶対文字サイズが「一回り大きい」ことになります。

標準モードでは CSS クラスおよび ID セレクタについて大文字と小文字を区別する

標準モードでは class="CLASS" と class="class" を区別し、CSS セレクタ *.CLASS を指定した場合には前者のみが選択されます。互換モードでは大文字と小文字を区別しないため、*.CLASSは両方と一致します。同様に標準モードでは id="id" と id="ID" を区別しますが、互換モードでは区別しません。

互換モードではボックスサイズを Windows 版 IEに基づき算出する

CSS の 'width' プロパティはコンテンツ内容の幅を指定するものです。Windows 版 IE 3.0 〜 5.5 はコンテンツ内容の幅 + パディング幅 + ボーダー幅として扱います。これは 'height' プロパティについても同様です。互換モードではこの動作を模倣します。Opera と Mac 版 IE はCSS 3 で提案されている box-sizing プロパティをサポートしています。残念ながら Windows 版 IE はこれをサポートしません。Netscape と Mozilla では同じ機能を -moz-box-sizing プロパティとしてサポートしています。

包含ボックス (containing box) のマージンが % 値で指定された幅の算出時に差し引かれる

互換モードでは、CSS の 'margin-left' および 'margin-right' プロパティの値は、% 値で指定された横幅を算出している際に包含ボックスの幅から差し引かれます。標準モードではこのように動作しません。

DOCTYPE スイッチの上書き

通常 DOCTYPE スイッチによっていずれかのモードが選択されますが、常に標準モードあるいは互換モードを使用するように設定する事もできます。opera6.ini ファイルに下記のいずれかの行を設定してください。

常に互換モードを使用する
CompatMode Override=1
常に標準モードを使用する
CompatMode Override=2

常に標準モードを使用するように設定する事で、Web ページをデザインする際に DOCTYPE スイッチをサポートしていないブラウザでそのページがどのように見えるか確認できます。

WML 2.0 と DOCTYPE スイッチ

WML 2.0 は特別な形式の DOCTYPE スイッチを使用します。あらゆる点で WML 2.0 は XHTML Basic に WML 拡張をいくつか加えたものといえます。名前空間は XHTML Basic と同じです。ごく少数ではありますが WML での動作には XHTML と異なる部分があります。たとえば WML 変数や $ エスケープの処理などです。詳細は WML 2.0 仕様書をご覧ください。