Doctypeを残してブラウザをQuirksモードにする
あなたが数ヶ月以上ウェブページをデザインしてきたのであれば、すべてのブラウザで同じように見えるページを書くのが難しいかもしれません。 実際、それは不可能です。 多くのブラウザには、扱うことができる特別な機能が書かれていました。 または、他のブラウザがそれらをどのように扱うかとは異なるものを扱う特別な方法があります。 例えば:
- レイヤーは、Netscapeブラウザーで使用するために作成されました。 他のブラウザーでは動作しません.Netscape 6.x +では廃止されました。
- インラインフレームは、もともとはInternet Explorer専用に作成されて以来、HTML仕様の一部となっています。
- Internet Explorer 6.0では、
)のタグを囲んでいます。 (IE 6にはこれと同様に多くの欠点があります。) - Netscpe 4.7では正しいHTMLで書かれていない表は表示されません。代わりに空のページが表示されます。 これはNetscape 6で修正されました。
ブラウザの開発者にとっての問題は、古いブラウザ用に構築されたWebページと下位互換性のあるWebブラウザを作成する必要があることです。 この問題に対処するために、ブラウザメーカーはブラウザが動作するモードを作成しました。これらのモードは、DOCTYPE要素の有無とそのDOCTYPEの呼び出しによって定義されます。
DOCTYPEの切り替えと "Quirksモード"
あなたのウェブページに以下のDOCTYPEを入れた場合:
現代のブラウザ(Android 1+、Chrome 1+、IE 6+、iOS 1+、Firefox 1+、Netscape 6+、Opera 6+、Safari 1+)は、次のように解釈します。
- 正しく書かれたDOCTYPEがあるため、標準モードがトリガーされます。
- これはHTML 4.01の暫定文書です
- 標準モードであるため、ほとんどのブラウザは、HTML 4.01 Transitional
このDOCTYPEをドキュメントに挿入すると、次のようになります。
これは現代のブラウザに、HTML 4.01ページをDTDに厳密に従って表示させたいことを伝えます。
これらのブラウザは、「厳密」または「標準」モードに移行し、標準に準拠してページを表示します。 (したがって、このドキュメントでは、HTML 4.01 StrictでFONT要素が非推奨になっているため、ブラウザなどで完全に無視される可能性があります)。
DOCTYPEを完全にそのままにしておくと、ブラウザは自動的に "quirks"モードに入ります。
次の表は、一般的なDOCTYPE宣言を使用して表示された場合の一般的なブラウザの動作を示しています。
マイクロソフトはそれをより困難にする
Internet Explorer 6には、DOCTYPE宣言の上に何かを置くと、quirksモードになるという特徴もあります。 だから、DOCTYPE宣言が厳格な標準モードにあると言っても、これらの例はどちらもIE 6をquirksモードにします:
XHTML 1.1のDOCTYPE:
さらに、IE6を超えると、MicrosoftはIE8とIE9: META要素の切り替えとWebサイトのブラックリストに追加した「機能」を持っています。 実際、これらの2つのブラウザのバージョンには、最大7つの異なるモードがあります。
- IE 5.5 quirksモード(IE 8と9)
- IE 7標準モード(IE 8および9)
- IE 8ほぼ標準モード(IE 8と9)
- IE 8標準モード(IE 8および9)
- IE 9ほぼ標準モード(IE 9)
- IE 9標準モード(IE 9)
- XMLモード(IE 9)
IE 8では、ユーザーがレンダリングモデルをIE 7モードに戻すことを選択できる「互換モード」も導入されました。 そのため、DOCTYPEとMETAの両方の要素を使用して設定したいモードを設定したとしても、あなたのページはまだそれほど標準に準拠していないモードにプッシュバックされる可能性があります。
Quirksモードとは何ですか?
Quirksモードは、Webデザイナーがこれらのものを処理するために使用していたすべての奇妙なレンダリングや非対応ブラウザのサポートやハックに対処するために作成されました。 ブラウザの製造元が懸念していたのは、ブラウザを完全な仕様に準拠させると、Webデザイナーが残ってしまうということでした。
DOCTYPEの切り替えと "Quirks Mode"を設定することで、WebデザイナーはブラウザのHTML表示方法を選択することができました。
クォークスモード効果
ほとんどのブラウザーがQuirksモードで使用するいくつかの効果があります。
- 一部のブラウザでは、ボックスモデルは、クォークモードでボックスモデルのIE 5.5バージョンに変更されます。
- 一部のブラウザはスタイルをテーブルに継承しません
- Quirksモードは、CSSとCSSレイアウトの解析に劇的に影響します。ページをQuirksモードから標準モードに変換する場合は、CSSレイアウトをテストして広範囲に解析するようにしてください。
- quirksモードでのスクリプトの変更を監視する。 Firefoxはid属性の動作を変更します。 IE8とIE9は、クォークモードでのスクリプト作成に非常に大きな変化をもたらします。
「ほぼ標準モード」にも違いがあります。
- 内部の画像のみを持つテーブルセルの高さは、標準モードとは異なる方法で計算されます。
DOCTYPEを選択する方法
DOCTYPEリストの記事で詳しく説明しますが、ここにいくつかの一般的な経験則があります:
- 常に標準モードを選択してください。 現在使用している標準はHTML5です: HTML5 DOCTYPEの使用を避ける特別な理由がない限り、これを使用する必要があります。
- レガシー要素を検証する必要がある場合、または何らかの理由で新しい機能を使用したくない場合は、厳密なHTML 4.01に進みます。
- テーブルに画像をスライスして修正したくない場合は、Transitional HTML 4.01:
- Quirksモードで意図的にページを書き込まないでください。 必ずDOCTYPEを使用してください。 これは将来の開発時間を節約し、実際には利点がありません。 IE6は急速に人気を失っており、このブラウザー(本質的にはクォークモードで設計されているもの)を設計することによって、あなた自身、あなたのリーダー、そしてあなたのページを制限しています。 IE 6または7用に記述する必要がある場合は、現代のブラウザーを強制モードにするのではなく、条件付きコメントを使用してサポートします。
DOCTYPEを使用する理由
このタイプのDOCTYPE切り替えが行われていることがわかったら、ブラウザがページから期待できる内容を示すDOCTYPEを使用して、Webページに直接影響を与えることができます。 また、DOCTYPEの使用を開始すると、有効に近いHTMLを記述するようになります(まだ検証しておく必要があります)。 また、有効なXHTMLを書くことによって、ブラウザメーカーは標準準拠のブラウザを構築するよう勧めます。
ブラウザのバージョンとQuirksモード
DOCTYPE | アンドロイド クロム Firefox IE 8+ iOS Opera 7.5+ サファリ | IE 6 IE 7 オペラ7 | Netscape 6 |
---|---|---|---|
なし | クォークスモード | クォークスモード | クォークスモード |
HTML 3.2 | |||
クォークスモード | クォークスモード | クォークスモード | |
HTML 4.01 | |||
移行 | 標準モード* | 標準モード* | 標準モード |
移行 | クォークスモード | クォークスモード | クォークスモード |
厳格 | 標準モード | 標準モード* | 標準モード |
厳格 | 標準モード | 標準モード* | 標準モード |
HTML5 | |||
標準モード | 標準モード* | クォークスモード | |
*このDOCTYPEでは、ブラウザは標準に準拠していますが、いくつかの問題があります。必ずテストしてください。 これは「ほぼ標準モード」とも呼ばれます。 |