What Is Quirks Mode?

[blufive]

Since I've yet to find a succinct definition anywhere, and it seems to be a FAQ in web development circles, here's the answer I just wrote over on the SitePoint Forums, with apologies for those who already know or don't care:

Several modern browsers (Mozilla, IE6/Win, IE5/Mac) have two (or more) rendering modes. The browser will display the page differently depending on which mode is it is using.

In most cases, there are two main modes:

1. Standards mode - the browser does its best to display the page exactly how the W3C standards say it should. In this mode, the browser may be very unforgiving of errors in the page source code
2. Quirks mode - the browser does its best to display the page as the author intended. In many cases, the browser will mimic bugs (quirks) in older browsers (for example: IE6, in quirks mode, uses the broken IE5 CSS box model) The browser will probably be more forgiving of errors in the HTML/CSS, but may do Weird Shit™ because some web authors have become used to such behaviour.

So which one does the browser use for a particular page?

That's a complicated question, as different browsers do it differently. In most cases, including a DOCTYPE and writing mostly-valid HTML will make the browser use "standards" mode.

In general quirks mode can be rather unpredictable, and vary wildly from one browser to another. If you know HTML/CSS and want to do a good job, you should aim to trigger standards mode. For a start, when IE and mozilla are both in standards mode, making your page look good in both browsers is much easier.