search

Home  >  Article  >  Web Front-end  >  Introduction to DOCTYPE and browser rendering

Introduction to DOCTYPE and browser rendering

巴扎黑
巴扎黑Original
2017-08-09 15:44:101936browse

The birth of DOCTYPE

DOCTYPE, also known as Document Type Declaration (Document Type Declaration, abbreviation DTD). Normally, DOCTYPE is located at the very beginning of an HTML document, before the start tag of the root HTML element. Because the browser must determine the type of the current document before parsing the body of the HTML document to determine the rendering mode it needs to adopt. Different rendering modes will affect the browser's parsing of CSS code and even JavaScript scripts. Especially in the IE series browsers, the rendering mode of the HTML page determined by DOCTYPE is crucial.

First, let’s take a look at how the page will be rendered and parsed in each browser when an HTML document does not have a DOCTYPE. We try to generate an HTML document without DOCTYPE at the top: 

<html>
<head></head>
<body>
<script>
document.write(document.compatMode);
</script>
</body>
</html>

This page returns consistent results in all browsers, with "BackCompat" printed on the page. The document.compatMode property was originally created by Microsoft in IE. This is a read-only property that returns a string. There are only two possible return values:

  • BackCompat: Standard compatible Mode (Standards-compliant mode) is not turned on;

  • CSS1Compat: Standards-compliant mode is turned on.

In fact, the so-called standard compatibility mode here is not turned on, that is, "promiscuous mode" (also called Quirks mode), and the standard compatibility mode is turned on, that is, "standard mode" (also called strict mode) mode, Standards mode or Strict mode). Therefore, in the previous test example, the HTML document without DOCTYPE will be rendered and parsed in mixed mode in all browsers.

Note: document.compatMode is introduced in MSDN: compatMode Property

Why does the browser make such a "switch". IE6, the longest-lived among the IE series browsers developed by Microsoft, was born with Windows XP. Compared with the previous version IE5.5, IE6 does have many major improvements. The biggest change for page rendering is that IE6 supports some features in CSS1. For example, when setting the width and height of a block-level element, it no longer affects the border periphery, but only the element content as described in the W3C specification. This is hugely different from IE5.5. In order to ensure that those pages developed in the late 1990s based on versions before IE6 can be displayed normally, that is, to ensure that the browser has backward compatibility, this "switch" was born. Microsoft tried to DOCTYPE is used to determine which mode the browser should work in, that is, whether it is IE6 or IE5.5. So it can also be seen from the string value returned by document.compatMode that BackCompat represents backward compatibility (ie IE5.5), and CSS1Compat represents compatibility with the CSS1 specification (ie IE6). As a result, the browser's working mode is divided into mixed mode and standard mode.

It is worth noting that the version number of IE has been upgraded from 6.0 to the current 9.0, but the upgrade is limited to standard mode. For mixed mode, the version number of IE is permanently frozen at 5.5, which is also a huge sacrifice for backward compatibility. In other words, even if we are using the latest and most advanced IE9, if we do not write DOCTYPE or use a DOCTYPE that can trigger mixed mode, then the browser we are facing is still equivalent to the antique IE5.5 from more than ten years ago. . There is not such a big difference between the mixed mode and standard mode of other browsers as in IE.

Note: IE6 Enhanced CSS: CSS Enhancements in Internet Explorer 6

Approximate Standards Mode

Approximate Standards Mode (Almost Standards Mode) literally means the same as Standards Mode Very similar, but does have small differences. Mainly reflected in the difference in rendering of vertical layout within table cells. Starting from IE8, Firefox, Chrome, Safari, and Opera 7.5, the standard mode of these browsers more strictly follows the CSS2.1 specification. Therefore, the previous standard mode, which currently seems not to be "standard", has been given the " Approximately Standard Mode" name. However, in the earlier versions of IE6, IE7 and Opera before 7.5, browsers could not strictly follow the CSS2.1 specification, so there was no approximate standard mode for them. It can also be understood that their approximate standard mode is the standard mode.

So far, you can see that each browser mainly includes three modes. In the HTML5 draft, the definition of patterns is more clearly defined:

Traditional name HTML5 draft name document.compatMode return value
standards mode or strict mode no-quirks mode CSS1Compat
almost standards mode limited-quirks mode CSS1Compat
quirks mode quirks mode 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. 字符串“>”

The root element universal identifier, public identifier, and system identifier can be obtained by calling the DOM interface through scripts, corresponding to document.doctype.name, document.doctype.publicId, and document.doctype respectively. systemId (not supported by IE6 IE7).

The above three parts may be different between different DOCTYPEs. Some DOCTYPEs have certain parts of them. How to choose among these numerous DOCTYPEs?

In fact, the browser only considers parts 1, 2, 4, and 6 of the above 6 parts when sniffing DOCTYPE, and is not case-sensitive. In each browser kernel implementation, there is almost always a list to record the patterns corresponding to these common DOCTYPEs, such as the DocTypeStrings.gperf file in the WebKit kernel. The difference in triggering modes in the list of each browser results in the phenomenon that some DOCTYPEs trigger different modes in different browsers, such as . For DOCTYPEs outside the list, differences in processing between browsers will also trigger different modes. For example, some browsers may treat DOCTYPEs outside the list as mixed mode, while others will treat them as standard. model.

So when we choose DOCTYPE, the first thing we make sure is that we want the HTML document to use the standard mode.

If you strive for simplicity, HTML5 DOCTYPE is the best choice: . All mainstream browsers treat this shortest DOCTYPE that only contains parts 1, 2, and 6. is the standard mode.

If you strive for stability, the earlier DOCTYPE of HTML4.01 Strict is also a good choice: , the mode it triggers in all major browsers is exactly the same as the HTML5 above.

Sometimes we are in special situations and want the browser to be in a near-standard mode, then we can choose: .

Note: Regarding the working mode of DTD and browser in Firefox: Mozilla's DOCTYPE sniffing

DOCTYPE content that cannot appear before

As mentioned earlier, DOCTYPE serves as a decision for the browser to Which mode "switch" the HTML document adopts should appear at the front of the HTML document. But sometimes for some reasons, some authors will prevent some content before DOCTYPE, which may be some information output by the server. This will make the browser extremely "confused". The first thing it sees is not DOCTYPE, so it may think that the page does not have DOCTYPE, and the mixed mode may be triggered. However, in fact, each browser handles this differently. We classify the content that may appear before DOCTYPE, they include:

  • Normal text

  • HTML tag

  • HTML Comments

  • XML declaration

  • IE conditional comment

For normal text and HTML tags, all browsers enter Mixed mode is enabled, which is easy to understand. You can see the body of the suspected HTML document, and the browser is unlikely to trace down where the DOCTYPE is.

For HTML comments and XML declarations, they are somewhat different from the ordinary text and HTML tags above. They will not be displayed on the page, that is, they will not be visible. At this time, some browsers appear to be very "intelligent", and non-IE browsers will ignore their existence, and DOCTYPE will be parsed correctly. However, in IE6, XML declarations before DOCTYPE will cause the page to enter promiscuous mode, and all IE will cause pages with HTML comments before DOCTYPE to enter promiscuous mode. When this happens in IE9, the browser gives a prompt in the console: "HTML1113: Document mode restarted from IE9 Standard to Quirks ”, it seems that Microsoft does not intend to “follow the trend” at this point. Doing so can also urge authors to try to avoid adding other content before DOCTYPE.

Some authors are very smart, and they add it before DOCTYPE He might write:

  • #

  • < ![endif]>

    • ##Or

##

  • The above IE conditional comments may be completely ignored in non-IE browsers and may be interpreted as ordinary HTML comments, but they all disappear in IE. Because this is the role of IE conditional comments. So this is currently a more appropriate way to write something before DOCTYPE and ensure that all browsers are in standard mode, but we still do not recommend adding any non-blank content before DOCTYPE.
Note: About IE Conditional Comments

Suggestions

Through the above historical review and analysis, we have seen the key role of DOCTYPE in the current mainstream browsers. At the same time, we also discovered the best DOCTYPE that can trigger the standards mode of each browser. Standards mode will minimize the risk of compatibility problems between different browsers, select the correct DOCTYPE, and ensure that the DOCTYPE is at the absolute beginning of the HTML document. It is the key to making DOCTYPE play its correct role

.

Test environment

Operating system version: Windows 7 Ultimate build 7600
Browser version: IE6
IE7
IE8
IE9
Firefox 4.0.1
Chrome 12.0.742.100
Safari 5.0.5
Opera 11.11
Test page:
This article was updated on: 2011-06-17

Keywords

Browser compatibility rendering mode standard mode mixed mode DOCTYPE DTD

The above is the detailed content of Introduction to DOCTYPE and browser rendering. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Summarize the common time operations of phonegapNext article：Summarize the common time operations of phonegap

Related articles

See more