Before the CSS specifications become standard, there were two major players in the browser arena - Netscape, and Microsoft Internet Explorer (IE). They both had different conventions for their stylesheets, and so developers have to write one version for Navigator, and one for IE. You can see how that's troublesome, and so the World Wide Web Consortium (W3C) sets out to standardize it all.
When the W3C finalized the CSS1 web standards on 17 December 1996, they were, inevitably, different than the conventions used in either Netscape 4 or IE 4.
Luckily, everyone did converge on the new standards.
So now, standards-compliant sites began to spring up, while the old sites were still prevalent. So, browsers must be able to parse sites differently, depending on whether it is standard-compliant or not. These two parsing modes was named:
- Quirks mode - to cater for sites written for Netscape 4 and IE5
- Standards mode - to cater for sites written which complies with the then-new HTML and CSS standards
There's also an almost-standards mode which is basically standards mode, but caters for a small number of quirk mode syntax.
Browsers now look at the
DOCTYPE of the document when deciding which mode to use to parse the document.
DOCTYPE was introduced in the standards, and websites catering for Netscape 4 and IE4 don't have a
DOCTYPE, so documents without a
DOCTYPE will trigger quirks mode, and those with
DOCTYPEs will trigger standards mode.
However, if you have a complicated
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, then those can trigger quriks mode and/or almost-standards mode in some browsers. I've only ever had to use this once (thank goodness!) when maintaining a really old system.
Hopefully no one has to code for IE4 anymore, so just remember to use
<!DOCTYPE html> for your
DOCTYPE, and make sure it's the first thing in your document, before any comments or whitespace; this ensures the browser will use standards mode.
Checking the mode
You can check the mode your site (the
window.document object) is being rendered in by checking the
"CSS1Compat"if rendered in standards (or almost-standards) mode; or
"BackCompat"if rendered in quirks mode