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.
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?
- It doesn't help the move to standardized pages (keeping the old tag-soup stuff "alive").
- Most backwards compatibility is related to layout (which conflicts with CSS standards).
- 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?
- 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)
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).
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
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:
- Standards & DTDs - An Overview - Good discussion and plenty of relevant links.
- 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.