Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

About Quirks-Mode

Filed in:The Web

About Quirks-Mode

March 12th, 2007  · stk

I recently had to fight with CSS for a web page served in Quirks-Mode. What is quirks? Why is it bad? How do you tell if a page is in quirks-mode? All this (plus a couple of extra cents, tools & links)


Using PZ3 in Quirks-Mode

A reader wanted to use PZ3 for a page that was authored in "quirks-mode". In an effort to help, I found a way to make it work in IE6.

browser quirks mode

Now that IE7 is out, I wish I hadn't. Let me just say that it's awful thing to do (author pages in "quirks-mode") and I recommend against it. You will thank me, your children with thank me and your descendants will visit my grave and thank me!

However, even though it goes against my own advice, I have found a way to render a very-close approximation to PZ3 for BOTH IE6 and IE7, in quirks mode. If you absolutely must deploy PZ3 on a quirks-mode page, you will want to see the work-a-round (and maybe even the quirky problem).

PZ3 aside, I thought this a good time to weigh in on quirks-mode.

  • What is "quirks-mode"?
  • Why is quirks-mode bad?
  • Why do people need quirks-mode at all?
  • How do you tell if a page is in quirks-mode?
  • How does an author pick the mode (standards -vs- quirks)?

For all this (and a tad more) ... carry on.



What is "Quirks-Mode" ?

Before web-standards (XHTML and CSS), different browser companies were using their own (browser-specific) HTML tags (e.g., IE's <marquee> tag or Netscape's <layer> tag). Only their browser understood them. It became kind of a tag-race, as each browser company fought for market share, using new tags as a form of one-upsmanship.

Remember seeing "This page is best viewed using [insert your favorite browser here]"? This dark development path of Internet history is known as the "tag-soup-ages".

Standardization of the HTML tags, via XHTML, helps to rectify the tag-soup problem. However, there's still lots of old tag-soup pages on the Internet. In an effort to allow modern browsers a way to understand tag-soup AND standardized pages, major browsers companies offer two viewing modes ("Quirks-mode", which attempts at backward-compatibility for reading sloppily coded, tag-soup pages and "Standards Mode", which expects cleanly-written, standardized HTML).


What's Bad About Quirks-Mode?

Several things.

  1. It doesn't help the move to standardized pages (keeping the old tag-soup stuff "alive").
  2. Most backwards compatibility is related to layout (which conflicts with CSS standards).
  3. Most important: Quirks is a moving target. (i.e., Different browsers implement different quirks. For example, IE quirks tries to emulate IE 5.x, while Mozilla tries to imitate Netscape 4.x.)

With quirks, you're in a kind of no-mans land, one foot in Standards-compliance world and the other in a sloppy coding, browser-specific, archaic, tag-soup world. It's not a good place to be. Pages become difficult to author and visitors don't get a consistent viewing experience.


Why Run Quirks-Mode at All?

The ONLY reason to author a quirks-mode page is to avoid breaking old code.

For authoring brand-new pages, there's no reason for serving it in quirks mode, other than web standards ignorance. (Not a strong argument, given the number of free XHTML and CSS tutorials on the web).

Do yourself (and your visitors) a favor - learn XHTML! It's really not that hard. (If this 45+ year-old can do it, so can you). ;)


How Do You Determine the Page Mode?

Good question.

There's three ways, all of which involve javascript (so it will need to be enabled for the browser you're checking).

  1. Pull up the page you want to check and type  javascript:alert(document.compatMode)  into the address bar of your browser. Hit return and a pop up alert window should show. It'll say either "CSS1Compat", which indicates Standards-Mode, or "BackCompat", which indicates Quirks-Mode.
  2. Quirks-Mode CheckRemembering that is a tad onerous. A simpler way is to right-click and bookmark (add to favorites) the link on the right. Functionality is the same. Navigate to the page you want to check, pull up this favorites link (named "Quirks-Mode Check"). It should tell you which mode the page has triggered in your browser. (Source)
  3. Add a link (like the one above) to YOUR page, so visitors can click it (or bookmark it), in order to check the compatibility mode. It's easy! Just swipe the following code (and paste it into your page).


    <a href="" onclick="javascript:m= ( document.compatMode == 'CSS1Compat' ) ? 'Standards' : 'Quirks'; window.alert('Page rendered in '+m+'-mode.'); return false;" title=" Quirks-Mode Check ">Quirks-Mode Check</a> 


How do You Choose the Mode?

Browsers determine which mode to use (Standards or Quirks) by the DTD statement, included in the HTML page. In essence, the DTD statement says to the browser, "Hey, here comes some some HTML. Expect it to be this HTML version."

The DTD is the very first line of an (X)HTML page. (And if it's missing, the browser will automatically go into Quirks-Mode).

We use PHP to serve up two different DTDs. One is served to all flavors of IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

The other is served to all other browsers (FireFox, Opera, Safari, etc.):

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">

The reason for this is that we use the latest XHTML v1.1 standard and elect to serve our pages with the (recommended) application/xhtml+xml MIME type.

Rather than go into great detail about DocTypes and which DTD do what to which browsers, let me point to you a couple of excellent references:

  1. Standards & DTDs - An Overview - Good discussion and plenty of relevant links.
  2. Activating Layout Mode Using the DTD - A table of DTD -vs- Browser & Layout Modes. Also a good discussion.



I hope my explanations have helped and that you find the tools and references useful. Trying to make a web page that looks the same in all browsers is tough enough using Standards-Mode. Trying to do so in Quirks-Mode is nearly impossible.

If nothing else, if I've convinced you that Quirks-mode has a place, but that new pages should be authored in Standards-Mode, then this article has been worth the time it took to make. It really IS worth learning XHTML and CSS. By avoiding deprecated & proprietary tags and by using clean coding techniques, you'll not only be building web pages that provide a more consistent viewing experience, but you'll also be building pages that will be viewable for a long time to come.

Views: 40761 views
5 Comments · GuestBook
default pin-it button
Updated: 24-Oct-2008
Web View Count: 40761 viewsLast Web Update: 24-Oct-2008

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.

Subscribe to Comments

Auto convert line breaks to <br />

1.flag Michael Comment
Hi Scott,

Awhile back, you helped me work around an issue that I was having running PZ3 that was caused by the fact that I run my site in quirks mode. I happened by wander by your site to see if there were any updates and happened across your page about PZ3's quirks mode work around. I was intrigued since it was no doubt my problem that initiated the "fix" (and the article).

As I read on, it seemed like your assessment of quirks mode (and the reasons to use it) was overly aggressive and not entirely accurate -- though I'll be the first to admit that you've probably forgotten more about the technical intricacies of web design than I will ever know.

"There is very little reason to do so (save for rendering deprecated, browser-specific or sloppily-coded HTML)." Every page on my site is valid XHTML and CSS. So far as I can tell, none of them qualifies as deprecated or sloppily coded, and the browser-specific CSS not only validates, but is served by conditional comment and not some kind of hack. And yet I still need quirks mode.

I'm sure you know that it's not just the DTD that puts a browser into quirks mode. And if you compare the chart entries for browser behavior with and without an XML declaration (one way of forcing quirks mode) you'll see that the differences are virtually negligible.

With XHTML Transitional as my DTD, the only change with an XML declaration is that IE6 (and Opera 7.1) goes into quirks mode. Why do I use quirks mode at all? Because of the CSS used to create the fixed navigation sidebar. IE6 (and less) doesn't support the position:fixed style rule, though using quirks mode to circumvent the box model bug can yield positive results. So far as I can tell, that doesn't qualify as "deprecated, browser-specific or sloppily-coded HTML".

I'm not actually able to use an XML declaration for reasons to do with the way browsers (e.g. IE) interpret content type. From what I've read, the only way to work around this is to do all manner of hairy things on the server to insure that specific browsers get served specific content types. And in my case, that's just not feasible.

For what it's worth, your fix produced perfect results in Firefox 1.5 and 2, as well as IE6 and 7. (It didn't work so well in an older version of FF, but when I checked it was something like version .8 -- and I was more than willing to let that slide.) I tried running the updated code, but there were problems of cross-compatibility, so I simply reverted to the original fix and things were happy, once again.

All the best,
2.flag stk Comment

You're correct, it was your quirks-mode PZ3 question that led to the work-a-round and the article. However, you were not my intended audience and I understand how you might feel my position is "overly agressive".

I certainly didn't mince words about how I feel about quirks-mode! This stems, in part, from my every-day encounters with folks who serve pages in quirks-mode without knowing why, or not having a DTD declaration at all, or who can't be bothered to learn XHTML. It also stems from that fact that most of my encounters with quirks-mode involve problems, rather than, in your situation, a solution.

While helping you last October, I recognized that you are an intelligent and thorough individual. This is in evidence on your website - the nature of the topic, the attention to detail, the liberal use of commenting throughout the code, thoughtful consideration contained in your colophon (thank you) and the careful wording in your written communications.

I stand behind what I said about quirks-mode, however. Please consider: What if you didn't need quirks-mode to overcome IE6 and its inability to fathom the "display:fixed" rule? Would that help to change your mind about your "need" for quirks-mode? (I hope so.)

Please have a look at this page (I think you might find it interesting). quirks-mode wink

That I made the demonstration in a format that mimicked your own page was not a coincidence and I hope that you find it useful.

Your pages are neatly coded. They appear to avoid deprecated, browser-specific tags. They are written to XHTML and CSS standards. I just can't find a reason why your pages shouldn't be authored in the superior, standards-mode!


P.S. - I don't claim to know it all and there may be perfectly good reasons to utilize quirks-mode. I've just not heard one yet.

If you took the time to write, I will take the time to study.

CSS is my thing. Is a Dutchman in Tuscany working his way up from Sawmill, Mason, Carpenter, Jewellery to computer forging any good to contribute to this important discussion?.

The answer is yes. Once (from 1953 on) working your way around with different plugging systems in Europe just to get your soup cooking or ironing your shirt, once you're a survivor from this Kafka world and still suffer from it even in "sophisticated" places, you'll get wiser and will sacrifice to improve on this pre_Etruscan nightmare.

Don't know if I'm good enough, but I will try.


PS Ain't no communist, but sure like people to get together. Info is helping a lot if readable.
4.flag Yabba Comment

Ain't no communist, but sure like people to get together. Info is helping a lot if readable.

No worries, I think Scott's more worried about deer than reds ;)

5.flag stk Comment

I'm no political animal and I have no idea of your CSS skills, but it sounds like you're a person who's done and seen a lot! I'm sure you can contribute and I hope that you find the information on Randsco, both understandable and useful.


PS - I received your recent email saying "WOW" about Photo-caption Zoom. Glad you like it!