Browser rendering modes: standards and quirks
Posted Aug 7, 2004 at 12:18 AM
As the browsers have matured, thier makers have recognized the problems that the browser wars created and they are now taking steps to assist in the rendering of standards-driven sites. The primary mechanism by which this is achieved is by doctype switching of rendering mode.
If I knew then what I know now, I would have written a whole heck of a lot less browser-specific stylesheets. If you don’t know what the difference between standard and quirks mode rendering and you author stylesheets, you’re going to absolutely love this information.
The doctype switch is used by most modern browsers to decide how to handle a given page’s CSS and markup.
As a simple example, consider the following CSS rule, noting that color values should not be quoted in CSS according to the standard: a {color: ”#ff0000”;}
There are generally two modes of rendering that current browsers support: quirks and standards mode.
Quirks mode
- In this mode, the browser will be forgiving of invalid and sloppy markup and styles, and render as browsers did back in the mid and late 1990’s.
- In the CSS example, the browser is forgiving, rendering the anchor tags with a red foreground color.
Strict (standards) mode
- In this mode, the browser will do its best to follow standards, even if that leads to unexpected results.
- In the CSS example, the browser does not recognize the color as a valid value, so the declaration is ignored. The rendered anchor tag color is therefore determined by other declarations in the stylesheet that may be valid and applicable from the cascade, or in the browser’s default if no valid and applicable declarations are found.
Detecting which rendering mode the browser is using
To determine which mode is being used for the current page, do the following:
- For IE6 or Opera, type the following into the address bar: javascript:window.alert(document.compatMode);
- A return value of “BackCompat” or “QuirksMode” indicates that quirks mode is being used.
- “CSS1Compat” is returned for strict mode.
- For Mozilla based browsers, press CTRL-I to bring up the page information dialog, which shows the current rendering mode.
Avoid the XML prolog
An XML prolog sometimes starts the top of the document, like so:
<?xml version=”1.0” encoding=”UTF-8”?>
There are problems in doing this, as follows:
- Doing this will cause IE6 and Opera 7 to enter Quirks mode.
- Mac IE4 will try to download the page instead of rendering it.
- Some legacy browsers will display the content as plain text instead of rendering it as HTML.
Doctype and rendering mode
The doctype is required for XHTML, and should be returned at the absolute top of all XHTML pages, like so: <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
IE6 enforces this, in fact, if anything comes before the doctype, IE 6 will enter quirks mode.
Further reading
*Update! If you’re interested in reading more about how Internet Explorer 6 and later change under standards mode, check out the CSS Enhancements in Internet Explorer 6 article on MSDN
About this page
This page contains a single post from Daniel Boerner's blog, of which Boot Camp + Windows Vista = no more Airport Extreme reboots is the latest post.
Are there more posts like this one?
Possibly. Within this blog, this post is categorized under webdev and it was posted on August 7, 2004. Those would be good places to start looking for related posts.
This post is closed to new comments.