How to tell if a browser is in "quirks" mode?

A

9

137

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?

Amoritta answered 9/3, 2009 at 16:57 Comment(0)

A

167

In Firefox and Opera you can determine if your browser is in "quirks mode" by checking page info.

Using document.compatMode, will tell you the mode you are in with most browsers.

In Chrome, Safari, and IE, run this javascript in the address bar:

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

(note that you'll need to re-type the javascript: portion after pasting into your address bar, due to recent security changes)

Article answered 9/3, 2009 at 17:2 Comment(4)

There is another potential value in IE which I came across when forcing an old page into "EDGE" mode. The value was "BackCompat" – Joyejoyful 10/6, 2016 at 11:56

I got BackCompat in Chrome as well when setting DOCTYPE to something completely invalid. According to the code in this answer, if the value is anything other than CSS1Compat, it is in quirks mode. Is that really true? What are all the possible values? – Quotidian 16/9, 2016 at 19:25

Apparently BackCompatible is the standard value for "quirks" / "compatibility" mode. There are only the 2 values: developer.mozilla.org/en-US/docs/Web/API/Document/compatMode – Quotidian 16/9, 2016 at 19:47

It's harder to get to Firefox "page info" than it used to be. The easiest way now is Ctrl+I. – Uterus 20/9, 2021 at 6:59

W

20

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.');

Wahhabi answered 30/10, 2009 at 9:53 Comment(0)

S

13

The full answer to your actual specific question of 'Is one single error enough to force it or do you have some leeway?' is that it totally depends on the error. For example,

<!-- Comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

will force quirks mode in IE 6 & 7 despite not really being an error (they just throw a total wobbly when the very first line of the file is not a declaration). A quick list of types/quirks can be found here

Try sticking the following line in your HTML for testing (very bad javascript behavious I'm passing on here - sorry...make sure this never goes live :)

<a href="javascript:alert(document.compatMode);">What mode am I?</a>

Sejant answered 9/3, 2009 at 17:23 Comment(2)

Thanks for the javascript tester, because my first two tries to escape quirks mode didn't work. – Gyrostatics 16/2, 2013 at 16:54

css1compat != quirks mode? – Deyoung 2/10, 2013 at 20:24

A

4

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

Alfonso answered 9/3, 2009 at 17:6 Comment(0)

H

2

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

Henning answered 9/3, 2009 at 17:2 Comment(0)

A

2

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.

Allix answered 9/3, 2009 at 17:23 Comment(0)

K

2

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.

Kreg answered 15/7, 2011 at 8:14 Comment(0)

S

2

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.

Sherrilsherrill answered 7/8, 2013 at 13:39 Comment(3)

This misses the point of the question. That doesn't help you write javascript that executes down one path for quirks mode and a different path for standards mode. – Amoritta 7/8, 2013 at 14:10

Actually you didn't ask how to do it in Javascript but how to know what mode the browser uses. Anyhow even if you didn't mean it, it may help others that look for it, I myself needed to know how to know it in Firefox and got to this question. – Sherrilsherrill 7/8, 2013 at 18:15

@JoelCoehoorn The actual problem is that you never explained what a "relatively strict doctype" is! – Delcine 15/11, 2013 at 20:58

A

0

in html5 page, write "<!DOCTYPE html>" start with page can change to document.compatMode='CSS1Compat'

Azarcon answered 5/3, 2013 at 8:9 Comment(0)

Recommended topics

Hot tags