ブラウザのレンダリング モードを理解する:標準、ほぼ標準、および特殊なモード

ズザナ K

前回の記事では、doctype とは何か、そしてなぜそれが必要なのかについて説明しました。この記事では、ブラウザが実行できるさまざまなモード、つまり完全標準モード、ほぼ標準モード、および互換モードの違いについて検討します。

これら 2 つの記事は非常に関連しているため、最初に前の記事を読んで、私が何について話しているのかを理解することをお勧めします。

質問:完全標準モード、ほぼ標準モード、および互換モードの違いは何ですか?

さまざまなモードはすべて、W3C 標準の初期実装に関連しています。

Doctype は、レンダリングするドキュメントの種類をブラウザーに伝えるために導入されました。開発者が HTML ドキュメントに doctype を含めないと、ブラウザはどのタイプのドキュメントを扱っているのかわかりません。

したがって、安全のため、いわゆる Quirk モードで、古い (quirk) ブラウザ (Navigator 4、Internet Explorer 4 および 5) と互換性があるようにドキュメントがレンダリングされます。

また、古いブラウザは非常に悪い CSS を使用していたため、多くの CSS スタイルが適用されず、サイトの見た目が期待どおりにならないことを意味します。

もちろん、開発者によっては、さまざまな理由からドキュメントを Quirks モードでレンダリングしたいため、意図的に doctype を省略することを選択する場合もあります。

たとえば、1998 年に自分のウェブサイトがどのようになっていたかを知りたい場合はどうすればよいでしょうか?

もっともな理由だと思います。

quirks モードとは何か、そしてそれが私たちの貧弱な Web サイトに何をもたらすか (破壊する) がわかったところで、完全な標準モードとほぼ標準モードではどうなるでしょうか?

ほぼ標準モードは、制限付き癖モードとも呼ばれます。ご想像のとおり、ほぼ標準モードでレンダリングされたコンテンツは、完全標準モードにほぼ完全に準拠しています。

ほぼです。

これまでで最も悲しい言葉。

I. 小さな物語

最も悲しい言葉

広い世界全体で

ほぼという言葉です。

彼はほとんど恋に落ちそうになった。

彼女は彼にとってほとんど良い人でした。

彼は彼女をもう少しで止めそうになった。

彼女はほとんど待ちました。

彼はもう少しで生き延びるところでした。

彼らはもう少しで成功するところだった。

ニキータ・ギル

気にしないで、先に進みましょう。

ほぼ標準モードでは、表のセルの垂直方向のサイズに関係するいくつかの特殊な点のみを備えたドキュメントがレンダリングされます。

一方、完全標準モードでは、最新の HTML および CSS 仕様に従ってドキュメントがレンダリングされます。最新のブラウザが画面上にコンテンツをレンダリングする方法にはまだいくつかの違いがありますが、Normalize.css または Reset CSS を使用して不一致を軽減する (そして健全性を保つ) ことができます。

したがって、ウェブサイトに何らかの癖がある場合、それはおそらくブラウザではなく、あなたに原因があると考えられます。

申し訳ありません。

さて、ここまでです。完全な標準、ほぼ完全な標準、および quirks モードの違いについて誰かに尋ねられた場合は、古いブラウザ、壊れた CSS、そしてこれまでで最も悲しい言葉を思い出してください。

さまざまなブラウザ モードのアクティブ化について詳しく知りたい場合は、Henri Sivonen が書いた素晴らしい概要があります。癖の大まかなリストは MDN で見つけることができます。

次回はHTMLとXHTMLの違いについて見ていきたいと思います。非常にエキサイティングなトピックとなるので、ぜひご参加ください。ではまた会いましょう!

私が回答する質問リストは、アイルランドのダブリンにある Verify 人材紹介会社の Rose から提供していただきました。

この記事を楽しんで有益だと思われた場合は、コメントまたは拍手を残すことを検討してください。ありがとうございます！

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう