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?
In computing, quirks mode is a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for old web browsers instead of strictly complying with W3C and IETF standards in standards mode.
Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older. In HTML5, the only purpose of the DOCTYPE is to activate full standards mode.
Quirks Mode is a mode of operation of web browsers such as Internet Explorer (IE), Firefox, and Opera. Basically, Quirks Mode (also called Compatibility Mode ) means that a relatively modern browser intentionally simulates many bugs in older browsers, especially IE 4 and IE 5.
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)
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.');
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With