Rendering Mode and Doctype Switching

"Standards" mode versus "Quirks" mode

Link: http://www.communitymx.com/content/article.cfm?cid=85fee

Generally, there are two choices for rendering mode, "standards" mode and "quirks" mode. In "standards" mode, a modern browser will do its best to render the document according to the W3C recommendations, even if it leads to unexpected results. In "quirks" mode, a modern browser will try to handle an (x)HTML document like older browsers from the mid-to late '90s did. It will do its best to imitate the parsing, rendering, and bugs of earlier browsers when encountering sloppy or invalid code authoring. And, it will display those quirky pages in the same way as those earlier browsers do.

So how does a browser decide whether it should use "standards" mode or "quirks" mode? Why, by examining the doctype, or lack thereof on the web page.

Depending on the doctype present in the (x)HTML document, the browser will choose either "quirks" mode or "standards" mode. If there is no doctype declaration present, or if the doctype is incomplete or outdated, the browser will switch to "quirks" mode. Using a current, modern doctype, or perhaps an unknown (new?) one, will trigger "standards" mode.


Even though today's browsers have moved toward more standards-compliant behavior, it is still necessary to allow older pages to display as they have in the past, regardless of proprietary features and invalid markup. However, this can cause problems with modern pages written to (x)HTML and CSS standards, especially if a browser cannot determine how to best render the page.

So, here is the problem: How can a browser tell if the page it is parsing should be treated as standards-compliant or not? The solution that browser manufacturers settled upon was to create two different rendering modes, enabled by what is known as a "Doctype Switch."

The Doctype

document type declaration, or doctype, informs the browser, and the validator for that matter, what version of (x)HTML you are using. It must appear at the top of every modern web page. Doctypes are essential to the proper rendering and functioning of web documents in modern, standards-compliant browsers. Your markup also won't validate without a doctype (and a character encoding as well).

A recent doctype that includes a full URI (system identifier), tells modern browsers to render your page in standards-compliant mode, treating your (x)HTML, CSS, and even DOM (Document Object Model) as you expect them to be treated.

What does a correct doctype look like?

A complete doctype tells us first that it is a doctype and what kind of document to expect. Then it also contains a public identifier and a system identifier, sometimes referred to as "with URI" or "with address."

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

When all put together, it will look like this:

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


Comments