12.3. Keep the Quirks: DOCTYPE Switching
Web pages that are coded to display in earlier browsers (versions that don't offer full CSS support) may look ugly, or fail to display at all in later browsers that do support CSS. Badly formed HTML, which earlier browsers forgave, breaks in newer browsers that must render HTML more meticulously because of the strict rules that come with standards like CSS.
The opposite is also true, as we've seen. Pages designed to display well in recent and new browsers may not display well, or may fail to display at all, in older browsers. IE5 for Macintosh, IE6 for Windows, Netscape 6, and Mozilla browsers support a technology called DOCTYPE Switching. Simply stated, this technology allows these browsers to adapt their display characteristics based on the document type (DOCTYPE) declared at the beginning of a Web page.
I should point out that this DOCTYPE statement has always been recommended for inclusion on Web pages. Most Web designers have ignored the advice, and Web design tool manufacturers have failed to enforce it. As a result, updating all your current Web pages with this type of statement may be a bit of a task. If you're using a good editor or design tool, the burden won't be onerous.
A browser that supports DOCTYPE Switching gives the appearance of supporting two different compatibility modes: a standards mode, and a quirks mode. The former is more strict about its interpretation of tags and CSS instructions than is the latter.
Assuming your pages don't already make use of this feature, you can add a DOCTYPE statement as the first statement on every Web page you've designed. If the page uses style sheet rules, whether embedded, external, or both, you should provide a "strict" DOCTYPE statement like this one for the HTML 4.0 standard:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
The equivalent DOCTYPE for the newer, XHTML 1.0 standard is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
If one or more pages on your site does not support CSS, but requires older-style rendering using embedded HTML tags, the following DOCTYPE will ensure that most browsers that support DOCTYPE Switching will render the page cleanly and correctly:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
And, if you prefer to adhere to the new XHTML 1.0 standard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Notice that the second pair of DOCTYPE statements refers to the "loose" or "transitional" versions of the two standards, both through the public identifiers and URLs provided. The result is that browsers that support DOCTYPE Switching technology act in "quirks" mode and, again, display the documents correctly even if there are standards compliance issues with the HTML on the page.
Unfortunately, Internet Explorer 6 requires a little more mangling of the DOCTYPE statement before it will switch into "quirks" mode. In addition to specifying the "transitional" version of HTML 4.0, you must also leave out the URL portion of the DOCTYPE to enable "quirks" mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Any HTML DOCTYPE that specifies a URL, and any XHTML DOCTYPE whatsoever will put IE6 in "strict" mode, so if you do want it to operate in compatibility mode you must use this last DOCTYPE. For full details, consult MSDN.
Most browsers (including IE6) will also go into "quirks" mode if the DOCTYPE statement is missing; however, as both the HTML and XHTML standards specify that this statement is required, I don't recommend this practice.