検索

ホームページ  >  記事  >  ウェブフロントエンド  >  DOCTYPE とブラウザ レンダリングの概要

DOCTYPE とブラウザ レンダリングの概要

巴扎黑
巴扎黑オリジナル
2017-08-09 15:44:101940ブラウズ

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: 標準互換モードがオンになっています。

実際、ここでのいわゆる標準互換モードはオンになっていません。これは「無差別モード」 (Quirks モードとも呼ばれます) であり、標準互換モードはオンになっています。これは「標準モード」です。厳密モード、標準モード、または厳密モードと呼ばれます)。 したがって、前のテスト例では、DOCTYPE のない HTML ドキュメントは、すべてのブラウザーで混合モードでレンダリングおよび解析されます。

注: document.compatMode は MSDN: compatMode プロパティで導入されています

なぜブラウザはそのような「切り替え」を行うのでしょうか? Microsoft が開発した IE シリーズのブラウザの中で最も長命な IE6 は、Windows XP とともに誕生しました。以前のバージョンの IE5.5 と比較して、IE6 には多くの大きな改善が加えられています。ページ レンダリングに関する最大の変更点は、IE6 が CSS1 のいくつかの機能をサポートしていることです。たとえば、ブロック レベルの要素の幅と高さを設定する場合、境界線の周囲には影響しなくなり、W3C 仕様に記載されている要素の内容にのみ影響するようになります。これはIE5.5とは大きく異なります。 1990 年代後半に IE6 以前のバージョンに基づいて開発されたページを正常に表示できるようにするため、つまりブラウザの下位互換性を確保するために、Microsoft はこの「スイッチ」を誕生させようとしました。 DOCTYPE は、ブラウザがどのモードで動作するか、つまり IE6 か IE5.5 かを決定するために使用されます。そのため、document.compatMode によって返される文字列値からも、BackCompat が下位互換性 (つまり、IE5.5) を表し、CSS1Compat が CSS1 仕様 (つまり、IE6) との互換性を表すことがわかります。その結果、ブラウザの動作モードは混合モードと標準モードに分けられます。

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

注：

  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 部分：

  1. 字符串“

  2. 根元素通用标识符“HTML”

  3. 字符串“PUBLIC”

  4. 被引号括起来的公共标识符（publicId）“-//W3C//DTD HTML 4.01//EN”

  5. 被引号括起来的系统标识符（systemId）“http://www.w3.org/TR/html4/strict.dtd”

  6. 字符串“>”

ルート要素のユニバーサル識別子、パブリック識別子、およびシステム識別子は、それぞれ 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 サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：PhoneGap の一般的な時間操作の概要次の記事：PhoneGap の一般的な時間操作の概要

関連記事

続きを見る