Rendering Mode
From CSS Discuss
The Doctype Switch is used by most modern browsers to decide how to handle your CSS. There are generally two choices: Quirks Rendering Mode and Strict Rendering Mode. In Quirks Rendering Mode, a browser will try to handle sloppy authoring and to act as browsers did back in the mid- to late 90s. In Strict Rendering Mode, the browser will do its best to follow standards, even if that leads to unexpected results.
For example, suppose the following rule exists:
a { color: "#823726";}
a:visited { color: "#823726";}
a:hover { color: "#FCFEF3";}
According to the standards, the color values should not be quoted.
When in Quirks Rendering Mode, the quotes are ignored by some browsers. When in Strict Rendering Mode, they prevent the browser from recognizing your values as valid colors, and so the whole declaration is ignored. What ends up being rendered depends on the other declarations in this sheet, and the CSS Cascade.
What mode is this in?
In Mozilla, hit CTRL-I for the page information dialog, which lists the rendering mode.
In IE6 or Opera you can test for which mode is being used in the current document, by typing the following in the address bar:
javascript:alert(document.compatMode);
You should get an alertbox with the string "BackCompat" or "Quirks Mode" if Quirks Rendering Mode is in effect, and "CSS1Compat" if Strict Rendering Mode is in effect.
Internet Explorer 8 introduces a third rendering mode, and a meta and HTTP header switch in addition to the traditional Doctype [1].
It is also worth noting that an XML declaration such as:
<?xml version="1.0" encoding="UTF-8"?>
at the top of XHTML documents will throw IE6 and Opera 7.0x into Quirks Rendering Mode. The XML declaration is not required, so omit it unless you want IE6 and Opera 7.0x in Quirks Rendering Mode. The XML declaration will not by itself throw IE7 into Quirks Rendering Mode.
Note: the XML declaration can be omitted only if you are encoding in UTF-8, UTF-16 or a subset of UTF-8 (like US-ASCII). If your document is in French and you do not use entities for your accented characters (you are therefore encoding in iso-8859-1), then the XML declaration is mandatory. -- Stephanie Booth 01.03.2003
Correction: UTF-8 is perfectly capable of supporting the accented characters used in French (along with most other characters used in any language on the planet). Just make sure your editor is configured to save the file as UTF-8, or you run it through a converter before serving it up to the client. -- David Dorward 22.10.2008
Correction: if you omit the XML declaration, you should specify the encoding through the right http-header :-) -- Ralf Mueller 12.07.2004
Correction: If you omit the XML declaration, you should use UTF-8 or UTF-16 (required by the XML spec). You should specify the encoding through the right htt-header no matter what encoding you use (since the rules for working out the encoding for XML served as text/html are fuzzy to say the least). -- David Dorward 22.10.2008
An XML declaration can also cause problems in other browsers: IE4/Mac can try to download instead of displaying a page with one, and some older browsers will display it as plain text.
If you want to force IE6 into quirks mode without using an XML declaration, try inserting an HTML comment before the doctype declaration, like
<!-- --><!DOCTYPE html PUBLIC ...>
IE7 will revert to Quirks Rendering Mode if it encounters a comment before the doctype declaration. Therefore if you are aiming to have IE6 in Quirks Rendering Mode, and IE7 in Strict Rendering Mode, the XML declaration is the way to go.
Some relevant resources suggested by Eric Meyer on css-discuss:
- Article and table of rendering modes in some browsers
- www.meyerweb.com/eric/dom/dtype/dtype-grid.html
- developer.apple.com/internet/html/doctype.html
- www.oreillynet.com/pub/a/network/2000/04/14/doctype/
- www.mozilla.org/docs/web-developer/quirks/
- msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
- www.opera.com/docs/specs/doctype/
- Opera Documents Specs type
- dhtmlkitchen.com/js/measurements/index.jsp
- Rendering Mode and Doctype Switching
- www.hut.fi/u/hsivonen/doctype.html
Mozilla has an 'Almost Standards' mode now too:
- devedge-temp.mozilla.org/viewsource/2002/almost-standards/
- evolt.org/article/New_DOCTYPE_sniffing_in_upcoming_Mozilla_releases/1/32271/
Differences between quirks and strict mode
- www.quirksmode.org/css/quirksmode.html : Explanations and test pages for some differences between Quirks and Strict Mode.
