Quirks… we all have them, but rather than get too personal, we’ll constrain the domain for this post to web browsers. 

In the early days of the web – pre-HTML and CSS (cascading style sheet) standards – browsers varied considerably over what features they implemented and how.  Over time standards matured, and browser vendors have sought to come into full compliance with developing HTML and CSS standards (which is a good thing); however, it leaves a number of old and often broken pages out there which demand backward compatibility.

That’s where quirks mode comes in.  It’s not an IE-specific concept, and essentially defines a baseline, pre-standards behavior for web page rendering.  In any recent version of IE, for example, quirks mode means a page will display as it would in IE 5.5.  The alternative to quirks mode is known as standards (or strict mode), and different browsers have different rules for determining which rendering mode to use.  Those rules are founded in a concept known as doctype sniffing or doctype switching introduced with IE 5.0 for the Macintosh.

In IE8 (and IE7 for that matter), the presence of a <!DOCTYPE> declaration will often trigger standards (strict) mode.  For instance, the Microsoft home page includes this declaration indicating standards mode:

<!-- DOCTYPE html PUBLIC 
   "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->

The absence of such a declaration will always trigger quirks mode, which makes sense since old-school pages, the ones relying on pre-standards behavior, were written before <!DOCTYPE> was a twinkle in Microsoft’s eye.  Knowing which <!DOCTYPE> declarations indicate standards mode versus quirks mode in IE can be a bit of a challenge, so consult this table on MSDN for specifics.  (For Mozilla-based browsers, like Firefox, check here, and for Opera, see here).

If you want to know what mode a given page is displayed in, you can use the nifty new Developer Tools in IE8 (accessible via Tools>Developer Tools or F12), which displays the Document Mode in its menu bar.   For sake of example, the Amazon site does not have a <!DOCTYPE> tag and therefore renders in quirks mode, as the toolbar shows below:

You can also determine the mode of a page by executing a little JavaScript right from the URL text box in the browser.  Below, the response of 5 indicates quirks mode.  Other options are 7 and 8, indicating the standards mode operations of IE 7 and 8.  For more detail on these modes, as well as how they work hand-in-hand with IE8’s compatibility view, check out my IE blog post of a couple of weeks ago.

Now as I mentioned before, quirks mode is not an IE-specific thing.  For instance, it turns out that default home page for Firefox displays in quirks mode as well.  In Firefox, you can use the View Page Info context menu option on the page to determine the mode:

What about other browsers?  Opera?  Safari?  Use the document.compatMode property, which returns one of two values

• BackCompat indicating quirks mode, or
• CSS1Compat indicating standard mode (or almost-standards mode, more on that here)

For instance, Opera 9.64 reports the mode of amazon.com as follows

while Safari 4 shows microsoft.com as:

Now, you might be wondering why we used document.documentMode in the IE sample earlier, but document.compatMode here.  With IE8, compatMode is deprecated in favor of documentMode, which has more granularity to differentiate between IE7 standards mode and IE8 standards mode.  Of course, since this is an IE-specific DOM extension, it’s not going to work cross-browser.

Now, don’t let all this discussion distract you from what should be a goal of creating standards-compliant sites from now on.  Quirks mode is there to support existing sites, kind of like the VHS player I keep around at home.  If you haven’t graduated to updated standards (like DVDs) for your mainstream requirements, then yeah, you are a bit quirky yourself!