: HTML and "quirks" vs. "standards compliance" modes: Explain, and tell us why we should care? What is the difference between "quirks" mode and "standards compliance" mode, when building HTML web

@Shelley277

It's choice between:


IE5 engine (or bug-for-bug emulation of thereof)
Something more modern (best effort in non-IE, long story in IE8…)


If you like to write CSS like it's 1999, without centering working properly, then use quirks.

Vote Up Vote Down

@Cugini213

Quirks Mode makes IE 6 and 7 render CSS differently than the standards say they should.

Standards mode makes IE 6 & 7 render CSS closer to the standards than Quirks Mode does, and thus closer to how Firefox, Safari, Chrome, Opera, and IE 8/9 render it.

Using standards mode means you have fewer weird old IE issues to hold in your head when you’re trying to make a freaking page work. It means you can use books like CSS: The Definitive Guide by Eric Meyer to look up what your page should be doing. IE’s Quirks Mode doesn’t have the same sort of comprehensive documentation.

Vote Up Vote Down

@Twilah146

I have found that if you are using CSS resets or frameworks, if you don't include the doctype to switch the affected browsers (usually IE7 and IE8) in to Standards Mode, a lot of positional stuff starts going wrong. It is nearly always best to set the doctype declaration and use Standards Mode.

Vote Up Vote Down

@Sue5673885

As @txwikinger said, quirksmode is the site to see here.

The only additional information that should be of help is this article on how to detect which mode your browser is using on a certain page: Detecting Compat Mode. There are also browser extensions that can do this, like Web Developer Toolbar. There is a version for FF and Chrome.

Vote Up Vote Down

@Sarah324

If you develop in quirks mode, then you are effectively asking the browser to emulate pre-IE6 bugs. Is that really something you want to be doing?

Wikipedia explains the basics of triggering quirks mode, but there are a number of special cases it doesn't cover. The link provided by txwikinger gives a good explanation of the history and the main differences.

Jukka Korpela explains the differences in more detail and also how to check the compatibility mode:


Checking the mode To check which mode
(Quirks vs. Standards) a browser is
in,

On Firefox, use the command View/Page Info (and see the General
pane); or if you have Web Developer
Extension, just check an icon in its
toolbar (third icon from the right).

For IE, type javascript:alert(document.compatMode)
in the address bar, and check whether
the popup window then says CSS1Compat
(indicating Standards Mode) or
BackCompat (indicating Quirks Mode);
alternatively, download and install
the simple Quirks or Standards Mode
Bookmarklet.


It is worth noting that many browsers have two modes other than quirks mode - almost standards mode and standards mode. Unfortunately, IE6 and IE7 only run in almost standards mode and so if you need to support these browsers, it is tempting to try to use almost standards mode in all browsers. However, it is probably better to develop against the standards and then try to fix up browser quirks. HTML5 will only offer the strict mode, so you really should try to develop against this for future compatibility.

Vote Up Vote Down

@Dunderdale272

Quirks mode is where a browser does not render pages as expected per the HTML spec. At one point, web browsers gained what is essentially a switch - the inclusion of a doctype at the top of a page. Absent that doctype, the browser goes into quirks mode. The presence of a valid doctype forces the browser into standard mode, the "correct" mode.

It is preferable to use standards mode - so, use a doctype! - for moving forward, as this ensures your pages will work correctly and consistently across as many browsers as possible.

Vote Up Vote Down

@Jamie184

Here is probably the best article about quirks mode that I have found. I personally try to always use standard mode whenever possible since it has the best chances to work with the majority of browsers.

Vote Up Vote Down