There are
generally two ’modes’ modern browsers can use to interpret your CSS. The Doctype tag of
HTML is used by most modern browsers to decide the modes
and to handle your CSS according.
The design of a webpage (or at least how it looks), is
determined by a number of factors:
- How the page has been designed, e.g. layout,
typefaces and media-types used;
- The language used to author the
page, e.g. HTML,XML;
- The software used to view the webpage (web browser);
To make sure that their websites rendered correctly in the
various browsers, web developers had to implement CSS according to the wishes
of these browsers. Thus, most websites used CSS in ways that didn’t quite match
the specifications.
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.
Therefore, when standards compliancy became important browser
vendors faced a tough choice. Moving closer to the W3C specifications was the
way to go, but following standards perfectly by performing changes in their CSS
implementations was resulting in websites which was break to a greater or
lesser extent.
So moving closer to standards compliance would cause problems.
The final point is where the concept of ‘modes’ comes in.
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.
Changing the web browser’s rendering mode is referred to as doctype switching.
To
enable backward-compatibility (old webpages working in new web browsers),
contemporary web browsers can be directed to render webpages in different
modes.
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.
