ホームページ >ウェブフロントエンド >H5 チュートリアル >DOCTYPE とブラウザ レンダリングの概要
DOCTYPE とブラウザ レンダリングの概要
- 巴扎黑オリジナル
- 2017-08-09 15:44:101978ブラウズ
DOCTYPE の誕生
DOCTYPE、Document Type Declaration (Document Type Declaration、略称 DTD) とも呼ばれます。通常、DOCTYPE は HTML ドキュメントの先頭、ルート HTML 要素の開始タグの前に配置されます。ブラウザーは、HTML ドキュメントの本文を解析して、採用する必要があるレンダリング モードを決定する前に、現在のドキュメントの種類を判断する必要があるため、レンダリング モードが異なると、ブラウザーによる CSS コードの解析や JavaScript スクリプトにも影響を与えるためです。特に IE シリーズのブラウザでは、DOCTYPE によって決定される HTML ページのレンダリング モードが重要です。
まず、HTML ドキュメントに DOCTYPE がない場合に、各ブラウザーでページがどのようにレンダリングされ、解析されるかを見てみましょう。先頭に DOCTYPE を持たない HTML ドキュメントを生成しようとします。
<html> <head></head> <body> <script> document.write(document.compatMode); </script> </body> </html>
このページは、すべてのブラウザで一貫した結果を返し、ページには「BackCompat」が表示されます。 document.compatMode 属性は、もともと Microsoft によって IE で作成されました。これは、文字列を返す読み取り専用属性です。
BackCompat: 標準準拠モードは使用できません。
- CSS1Compat: 標準互換モードがオンになっています。
IE のバージョン番号が 6.0 から現在の 9.0 にアップグレードされましたが、アップグレードは標準モードのみであることに注意してください。混合モードの場合、IE のバージョン番号は 5.5 で永久に固定されますが、これは下位互換性にとっても大きな犠牲になります。言い換えれば、たとえ最新かつ最先端の IE9 を使用しているとしても、DOCTYPE を記述しないか、混合モードをトリガーできる DOCTYPE を使用しない限り、私たちが直面しているブラウザは依然として、以前の古い IE5.5 と同等です。 10年前。 。他のブラウザの混合モードと標準モードの間には、IE ほど大きな違いはありません。
注: IE6 拡張 CSS: Internet Explorer 6 の CSS 拡張機能
ほぼ標準モード
ほぼ標準モード (ほぼ標準モード) は文字通り標準モードとよく似ていますが、小さな違いがあります。主に、表のセル内の垂直レイアウトのレンダリングの違いに反映されます。 IE8、Firefox、Chrome、Safari、Opera 7.5 以降、これらのブラウザの標準モードは CSS2.1 仕様に厳密に従います。そのため、現在「標準」ではないと思われる以前の標準モードには、 「ほぼ標準モード」の名前。ただし、IE6、IE7、および Opera 7.5 より前のバージョンでは、ブラウザーは CSS2.1 仕様に厳密に準拠できなかったため、それらの近似標準モードが存在せず、それらの近似標準モードが標準モードであることも理解できます。 。
これまでのところ、各ブラウザには主に 3 つのモードが含まれていることがわかります。 HTML5 ドラフトでは、パターンの定義がより明確に定義されています:
| 従来の名前 | HTML5ドラフト名 | document.compatModeの戻り値 |
|---|---|---|
| 標準モードまたは厳密モード | 互換性のないモード | CSS1Compat |
| ほぼ標準モード | 癖制限モード | CSS1Compat |
| quirksモード | quirksモード | BackCompat |
注：HTML5 草案关于 compatMode 的介绍：3.1.3 Resource metadata management
DOCTYPE 的选择
工作模式简介
浏览器的工作模式常被称为“渲染模式”。实际上浏览器不同的工作模式不仅对渲染有影响，对代码的解析以及脚本的行为也同样有影响。
从更广泛的角度来看，浏览器的工作模式的差异不仅体现在处理 HTML 页面的时候，处理 XML 及一些非 WEB 内容时也有模式上的差异，但本文仅讨论浏览器在处理 HTML 页面时工作模式。1
注：
关于浏览器的工作模式的更多信息，请参考 Activating Browser Modes with Doctype。
工作模式的来源及变迁
不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式，然而使用了 DOCTYPE，也不一定就能够使文档在所有浏览器中均处于标准模式。DOCTYPE 本身不就是一个“开关”吗？为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式？这个和以下条件有关：
使用了本身就会使浏览器进入混杂模式的古老的甚至是错误的 DOCTYPE；
在 DOCTYPE 之前出现了其他内容，如注释，甚至是 HTML 标签。
我们先说第一个条件。HTML 历史悠久，仅正确的 HTML 类型的 DOCTYPE 就有很多种。先看一个标准的 DOCTYPE：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
上面的 DOCTYPE 包含 6 部分：
字符串“
根元素通用标识符“HTML”
字符串“PUBLIC”
被引号括起来的公共标识符（publicId）“-//W3C//DTD HTML 4.01//EN”
被引号括起来的系统标识符（systemId）“http://www.w3.org/TR/html4/strict.dtd”
字符串“>”
ルート要素のユニバーサル識別子、パブリック識別子、およびシステム識別子は、それぞれ document.doctype.name、document.doctype.publicId、および document.doctype.systemId に対応するスクリプトを通じて DOM インターフェイスを呼び出すことによって取得できます (IE6 IE7)はサポートしません）。
上記の 3 つの部分は、DOCTYPE によって異なる場合があります。これらの多数の DOCTYPE の中から選択するにはどうすればよいですか?
実際、ブラウザは DOCTYPE をスニッフィングするときに上記の 6 つの部分のうち 1、2、4、6 の部分のみを考慮し、大文字と小文字は区別しません。各ブラウザ カーネル実装には、WebKit カーネルの DocTypeStrings.gperf ファイルなど、これらの一般的な DOCTYPE に対応するパターンを記録するリストがほとんどの場合存在します。各ブラウザのリスト内のトリガー モードの違いにより、一部の DOCTYPE がブラウザごとに異なるモードをトリガーする現象が発生します。リスト外の DOCTYPE の場合、ブラウザー間の処理の違いにより、異なるモードがトリガーされます。たとえば、一部のブラウザーはリスト外の DOCTYPE を混合モードとして扱いますが、他のブラウザーはそれらを標準モデルとして扱います。
そのため、DOCTYPE を選択するとき、最初に確認するのは、HTML ドキュメントで標準モードを使用するかどうかです。
簡潔さを追求する場合は、HTML5 DOCTYPE が最適です: 。すべての主流ブラウザは、パート 1、2、および 6 のみを含むこの最短の DOCTYPE を標準モードとみなします。
安定性を重視する場合は、HTML4.01 Strict の以前の DOCTYPE も良い選択です: のすべての主要なブラウザでトリガーされるモードは、上記の HTML5 とまったく同じです。
場合によっては、特殊な状況でブラウザを標準に近いモードにしたい場合は、次を選択できます: 。
注: Firefox の DTD およびブラウザー動作モードについて: Mozilla の DOCTYPE スニッフィング
以前に表示できない DOCTYPE コンテンツ
前述したように、DOCTYPE はブラウザーが HTML ドキュメントにどのモードを採用するかを決定する「スイッチ」として機能します。 HTML ドキュメントの先頭に表示されます。ただし、何らかの理由で、一部の作成者が DOCTYPE より前の一部のコンテンツ (サーバーによって出力される情報である可能性があります) を禁止する場合があります。これにより、ブラウザは最初に DOCTYPE を認識しないため、ページに DOCTYPE がないと判断され、混合モードがトリガーされる可能性があります。ただし、実際には、ブラウザごとにこれの処理方法が異なります。 DOCTYPE の前に表示される可能性のあるコンテンツを分類します。次のものが含まれます:
通常のテキスト
HTML タグ
HTML コメント
XML宣言
IEの条件付きコメント
通常のテキストとHTMLタグの場合、すべてのブラウザが混合モードになっているのは、疑わしいHTMLドキュメントの本文を見れば簡単に理解できますが、ブラウザはそうではありません。 Tai は DOCTYPE がどこにあるかを追跡します。
HTML コメントと XML 宣言の場合、上記の通常のテキストや HTML タグとは多少異なります。つまり、ページには表示されません。現時点では、一部のブラウザは非常に「インテリジェント」であるように見え、IE 以外のブラウザはその存在を無視し、DOCTYPE が正しく解析されます。ただし、IE6 では、DOCTYPE の前に XML 宣言があると、ページは無差別モードになり、すべての IE では、DOCTYPE の前に HTML コメントがあるページは無差別モードになります。 IE9 でこれが発生すると、ブラウザーはコンソールに「HTML1113: ドキュメント モードが IE9 標準から Quirks に再起動されました」というプロンプトを表示します。 」と書かれているように、現時点では Microsoft は「トレンドに従う」つもりはないようです。そうすることで、作成者は DOCTYPE の前に他のコンテンツを追加しないように努める可能性があります。
一部の作成者は、DOCTYPE コンテンツの前に必要なものを追加します。コンテンツによって IE がプロミスキャス モードに移行することはなく、次のように書くこともできます:
一部のテキスト
、あるいは
上記のIEの条件付きコメントは、IE以外のブラウザでは完全に無視され、通常のHTMLコメントとして解釈される場合があります。ただし、これらはすべてIEでは消えてしまいます。これは IE の条件付きコメントの役割であるため、現時点では DOCTYPE の前に何かを記述し、すべてのブラウザが標準モードであることを確認する方が適切な方法ですが、空白以外のコンテンツを追加することはお勧めしません。
注: 条件付きコメントについて推奨事項 上記の歴史的なレビューと分析を通じて、現在の主流ブラウザにおける DOCTYPE の重要な役割を確認し、各ブラウザの標準モードに最適な DOCTYPE をトリガーする機能も発見しました。異なるブラウザ間の互換性の問題のリスクを最小限に抑えるには、正しい DOCTYPE を選択し、その DOCTYPE が HTML ドキュメントの絶対先頭に配置されるようにすることで、DOCTYPE が正しい機能を発揮できるようになります。
テスト環境
| オペレーティングシステムのバージョン: | Windows 7 Ultimate build 7600 |
|---|---|
| ブラウザのバージョン: | IE6 IE7 IE8 IE9 Firefox 4.0.1 Chrome 1 2. 0.742.100 サファリ5.0 .5 Opera 11.11 |
| テストページ: | |
| この記事の更新日: | 2011-06-17 |
キーワード
ブラウザ互換性レンダリングモード標準モード 混合モード DOC TYPE DTD
以上がDOCTYPE とブラウザ レンダリングの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。