I. Background:

For historical reasons, pages are rendered differently by different browsers, and even by different versions of the same browser. Then came the crucial standard specification: the W3C standard.

  • Before the W3C standards came out, different browsers do not have a uniform specification for page rendering, this parsing method is calledQuirks mode (compatible mode);
  • After the W3C standards came outAs the W3C standards became more and more important, many browsers began to parse documents according to the W3C standards. Different browsers had uniform standards for how pages were renderedStrict mode, or Standards Mode.
  • Later browsers supported Strict mode, but many did not drop Quirks mode support. An important reason for this is that a lot of previous web pages developed in Quirks Mode display correctly.

Therefore, one of the early tasks for browsers that support both modes is to decide how to parse a web page when they get it.

Ii. Concept:

  • Document mode basically tells the browser which mode to render and how to parse the document. The main difference between the two modes is only in terms of content rendered through CSS, but there are some related implications for JavaScript as well. (Note: this will be reflected later in the article)

  • Document mode was originally proposed by Internet Explorer 5.5 and can be switched using DOCType. After IE first supported document mode switching, other browsers followed suit.

  • When we generally refer to the standard mode, we mean the mode other than promiscuous mode.

How to trigger different document modes:

The answer is:
declaration

Note:<! DOCTYPE>The declaration must be the first line of the HTML document, located<html>Tag before.

1. Promiscuous mode:

  • All browsers use a docTYPE declaration that starts with an omitted document as a criterion for confounding patterns. This convention doesn’t make sense, however, because promiscuous patterns vary greatly between browsers.
  • In addition, incorrect docTYPE declarations can cause HTML and XHTML documents to be rendered in promiscuous mode.

2. Standard mode: Enable it by declaring the following document types:

/ / HTML 4.01 Strict:<! DOCTYPE HTML PUBLIC"- / / / / W3C DTD HTML 4.01 / / EN"
"http://www.w3.org/TR/html4/strict.dtd">

/ / XHTML 1.0 Strict:<! DOCTYPE html PUBLIC"- / / / / W3C DTD XHTML 1.0 Strict / / EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

// HTML5:<! DOCTYPE html>Copy the code

3. XHTML documents that contain fully formed DOCTypes are typically rendered in standard mode.

Iv. Differences between the two modes:

1. ScrollLeft and scrollTop:

  • In promiscuous mode, you can pass<body>The element detects changes in the scrollLeft and scrollTop properties.
  • In standard mode, all browsers take place in<html>Element.
// The vertical scrolling distance of the page:
window.addEventListener("scroll".(event) = > {
  if (document.compatMode == "CSS1Compat") {
  	console.log(document.documentElement.scrollTop);
  } else {
  	console.log(document.body.scrollTop); }});Copy the code

2. Box model:

See the CSS box model I summarized earlier

3. Size unit:

  • In standard mode, all dimensions must contain units, otherwise they are ignored.
  • In promiscuous mode, you can set style.width to “20”, which is equivalent to “20px”.

Five, how to detect the two modes:

After browsers provided the ability to render pages in standard, promiscuous mode, detecting page rendering mode became an essential requirement. This feature was originally proposed by Internet Explorer 6 and is now supported by all major browsers. HTML5 is finally standardizing implementations of the compatMode attribute as well.

Based on the document.compatMode attribute, determine what rendering mode the browser is currently in:

  • In standard mode, the value is “CSS1Compat”
  • In promiscuous mode, the value is BackCompat
// What render mode is the browser currently in
if (document.compatMode == "CSS1Compat") {console.log("Standards mode");
} else {
	console.log("Quirks mode");
}
Copy the code

Note: This property is at least compatible with Internet Explorer 6