ブラウザのレンダリングモードを徹底解説：完全標準・ほぼ標準・互換モードの違い

By Zuzana K

はじめに：前回の記事の続編

前回の記事では、doctype（文書型宣言）とは何か、そしてなぜそれが必要なのかについて解説しました。今回はその続編として、ブラウザがドキュメントを描画する際に採用する3つのモード——完全標準モード（フルスタンダードモード）、ほぼ標準モード、互換モード（クワークスモード）——の違いを詳しく見ていきます。

この2つの記事は密接に関連しているため、先に前回の記事を読んでおくと、今回の内容がより理解しやすくなります。

質問：完全標準モード、ほぼ標準モード、互換モードの違いは何？

これらのモードの違いは、すべてW3C標準の初期実装の歴史に由来しています。

doctypeは、ブラウザに対して「どのような種類のドキュメントを描画すべきか」を伝えるために導入されました。開発者がHTMLドキュメントにdoctypeを記述しなかった場合、ブラウザは自分が扱っているドキュメントの種類を判断できません。

そこでブラウザは安全策として、古いブラウザ（Netscape Navigator 4、Internet Explorer 4および5）との互換性を保つ形でドキュメントを描画します。これがいわゆる互換モード（quirks mode）です。

問題なのは、古いブラウザの時代はCSSの実装が非常に貧弱だったことです。つまり、多くのCSSスタイルが正しく適用されず、サイトが期待どおりに表示されなくなるのです。

もちろん、あえてdoctypeを省略し、意図的に互換モードで描画させたいという開発者も存在するかもしれません。たとえば——「自分のWebサイトが1998年当時にどう見えていたのか知りたい」。これも立派な理由だと言えるでしょう。

ほぼ標準モードと完全標準モードの関係

互換モードが何であり、それが私たちのWebサイトにもたらす悲劇（レイアウト崩壊）も分かったところで、次は「ほぼ標準モード」と「完全標準モード」について見てみましょう。

ほぼ標準モードは「限定互換モード（limited quirks mode）」とも呼ばれます。名前から想像できるとおり、ほぼ標準モードで描画されるコンテンツは、完全標準モードにほぼ準拠しています。

しかし、あくまで「ほぼ」です。

具体的には、ほぼ標準モードではテーブルセルの垂直方向のサイズ計算に関するわずかな癖（クワーク）だけが残り、それ以外は標準仕様に従って描画されます。

一方、完全標準モードでは、最新のHTMLおよびCSS仕様に基づいてドキュメントが描画されます。とはいえ、現代のブラウザ間でも表示には若干の差異が残ります。こうした不整合を減らし、開発者の精神の平穏を保つためには、Normalize.cssやReset CSSを活用するのが定番の対策です。

つまり、あなたのWebサイトに何らかの表示の癖があるとしたら、それはおそらくブラウザのせいではなく、コード側に原因があるということです。……ごめんなさい。

まとめ

もし誰かに「完全標準モード、ほぼ標準モード、互換モードの違いは？」と聞かれたら、「古いブラウザ」「壊れたCSS」、そして「世界で一番切ない言葉『almost（ほぼ）』」を思い出してください。

さまざまなブラウザモードの切り替わり条件についてさらに深く知りたい方には、Henri Sivonen氏による優れた解説資料があります。また、各モードで発生するクワークの一覧はMDNで確認できます。

次回はHTMLとXHTMLの違いについて取り上げる予定です。ますます盛り上がってきているこのテーマに、ぜひご一緒してください！それではまた！

※本記事で回答している質問リストは、アイルランド・ダブリンのVerify採用エージェンシーのRose氏よりご提供いただきました。

この記事が役に立ったと思っていただけたら、コメントや拍手をいただけると嬉しいです。ありがとうございます！

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers.