How to tell if a browser is in “quirks” mode?

Question

Let's suppose you have a page with a relatively strict doctype and HTML markup that's pretty close to compliant, but perhaps misses in a few silly ways, perhaps because of user content that's out of your control... say you're working on a content management system or a theme for a content management system where you control some basic structure and need some javascript, but you're not responsible for everything else that goes into pages.

How can you tell (or: what will determine) when the browser decides to go into "quirks" mode rather than use it's more standards compliant engine?

I'm looking for answers for each of the major browsers, since IE, Chrome, Safari, and Firefox will of course all handle that differently. Is one single error enough to force it or do you have some leeway?

Answer 1

As you can query the render mode in JavaScript you can have a Bookmarklet which will tell you which render mode a page is using.

I found this render mode bookmarklet which works well for me:

javascript:m=(document.compatMode=='CSS1Compat')?'Standards':'Quirks';window.alert('You%20are%20in%20'%20+%20m%20+%20'%20mode.');

Answer 2

According to http://www.quirksmode.org/css/quirksmode.html : "The problem was that some pages written in quirks mode did have doctypes. Therefore each browser has its own list with doctypes that trigger quirks mode. See this browser comparison chart for an overview of these lists : http://hsivonen.iki.fi/doctype/"

Hope this helps

Answer 3

In IE you will see it in the developer tools (pressing F12), it says it in the menu: Document Mode:... And you can also force a different mode there.

Answer 4

If you tell IE that it should be strict (via doctype) it will not change its mind halfway through the page.

Answer 5

If I understand quirks mode correctly, a page that does not validate against its declared doctype is not enough to trigger quirks mode. It just won't display correctly.

The best resource I've found for determining how different browsers handle each doctype is here.

Answer 6

For Firefox with Web Developer Toolbar add on, you can look at the trio of icons on the right of the bar. The leftmost one tells you what mode you are in.