Quirks Mode and DOCTYPE

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.

DOCTYPE

Browsers now look at the DOCTYPE of the document when deciding which mode to use to parse the document.

Since 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 DOCTYPEs like <!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 document.compatMode property on the console or in your JavaScript code. It will return:

  • "CSS1Compat" if rendered in standards (or almost-standards) mode; or
  • "BackCompat" if rendered in quirks mode

Further Reading

comments powered by Disqus