Rendering Mode and Doctype Switching

By: Holly Bergevin

Page 1 of 2

Set for printing


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

A 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."

Public identifier: "-//W3C//DTD HTML 4.01//EN"
System identifier: "">

When all put together, it will look like this:


"Standards" mode versus "Quirks" mode

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.

Note: Until recently, web pages generally had no doctype. Without a doctype, modern browsers automatically use "quirks" mode to render such pages.

The "Switch"

There are several differences between "quirks" and "standards" rendering modes, and different browsers may allow different non-standard behaviors when in "quirks" mode. However, probably the most significant behavior that concerns us here is that in "quirks" mode, Internet Explorer 6 (IE6) will imitate the incorrect box model of IE5.x/win. (Please see The Box Model Problem article at CMX for a discussion of this incorrect behavior.) Also, there are a number of browser-specific behaviors displayed for each browser in "quirks" mode, but these are best located by visiting browser manufacturer-specific pages. (See links at the bottom of this page.)

Note: Mozilla alone has an "almost standard" mode which handles most things in "standards" mode except sliced images in table cells. Those are handled in "quirks" mode. See "Things to keep in mind" below for information on invoking "almost standard" mode in Mozilla.

The above doctype example is but one of several that will trigger "standards" mode. There are several good references available on the web about which doctypes trigger "quirks" mode or "standards" mode. (See resource links at the bottom of this page.)

Page 1 of 2 1 2 Next

Downloads are disabled during your trial period.

Rendering Mode, Doctype Switch, "Standards" mode, "Quirks" mode, doctype, xml declaration, XHTML, HTML, CSS, cross-browser, cross browser