7

What is the difference between Quirks Mode and Internet Explorer 5 quirks in IE10 developer tools, JavaScript & CSS-wise?

Which of these 2 modes can be triggered from HTML (as opposed to the devtools)?

IE10 Document Mode

I read this blog post on MSDN, but couldn't understand when this IE5 quirks mode can be in action on real world websites. It says all they have to do is not include the doctype and the browser must be in Compatibility View. Is the latter enabled manually or via HTML or what?

I'm a plugin author, and I'm worried about other people having my plugin broken with their document/browser mode.

Spudley
  • 166,037
  • 39
  • 233
  • 307
katspaugh
  • 17,449
  • 11
  • 66
  • 103
  • possible duplicate of [Does the windows 8 internet explorer 10 still have quirksmode?](http://stackoverflow.com/questions/11865188/does-the-windows-8-internet-explorer-10-still-have-quirksmode) – epascarello Oct 10 '13 at 13:32
  • 6
    @brandonjordan: Do they also have better tools to see how your site looks on IE? – Jon Oct 10 '13 at 13:33
  • 1
    @brandonjordan, sometimes it's not a question of "what is better" but rather "what is needed"... Some things don't work correctly in other browsers, unfortunately.. Also, if you're building websites, you should have your site compatible with as many browsers as possible. I can't see a way for your comment to be valid to OPs question at all... – walther Oct 10 '13 at 13:34
  • 3
    @brandonjordan, talk about a useless comment. Do you actually do web development or just troll people who do? – epascarello Oct 10 '13 at 13:34
  • quirksmode refers to a technique for the sake of maintaining backward compatibility with web pages designed for older browsers – john Smith Oct 10 '13 at 13:34
  • 1
    Don't answer @brandonjordan just flag it as not constructive. – Knerd Oct 10 '13 at 13:36
  • @brandonjordan: really? So you've _never_ worked for/in a business environment, huh? You just take for granted that _everyone and their brother_ use something other than IE? – Brad Christie Oct 10 '13 at 13:52
  • 2
    @brandonjordan: [IE 10 supports a fair bit of HTML5 and CSS3](http://msdn.microsoft.com/en-us/library/ie/hh673549(v=vs.85).aspx). – Paul D. Waite Oct 10 '13 at 13:54
  • A fair bit..but not everything. I know their are some that use IE but most people who do are moving on to Chrome, and firefox – electrikmilk Oct 10 '13 at 14:06
  • @katspaugh: "I read this blog post on MSDN but couldn't understand when this IE5 quirks mode can be in action on real world websites." - in case you're worried that you need to make your website look okay if IE goes into Quirks or IE 5 Quirks modes, you don't. As an HTML author, you only need to [do what you can to make IE render in standards mode](http://stackoverflow.com/a/13287226/20578). The other modes are designed to let end users view websites that rely on bugs in older versions of IE. – Paul D. Waite Oct 10 '13 at 14:06
  • 2
    This is a meaningless argument. Lets just move on to helping @katspaugh – electrikmilk Oct 10 '13 at 14:06
  • 1
    @brandonjordan: There is no browser in existence that supports everything, and in fact there *cannot be* one. So yes, this is a meaningless argument. – BoltClock Oct 10 '13 at 14:07
  • 1
    @PaulD.Waite, I'm a plugin author, I'm worried about other people having my plugin broken with their document/browser mode. – katspaugh Oct 10 '13 at 14:07
  • @BoltClock What about Chrome? – electrikmilk Oct 10 '13 at 14:07
  • @brandonjordan: sure, but no browser supports every HTML5/CSS3 feature (and no browser is ever likely to, as HTML is a living standard now). If you think Opera matters more because more people use it than Internet Explorer, then, well, you're wrong. – Paul D. Waite Oct 10 '13 at 14:08
  • @PaulD.Waite I said Chrome, I never said Opera was perfect, I know it's not. Chrome has gorgeous HTML5, and CSS3 Capabilities, WebGL, and an amazing frame rate. – electrikmilk Oct 10 '13 at 14:11
  • 1
    @katspaugh: ah, I see. I've edited your question to be a bit more specific, and include that detail. – Paul D. Waite Oct 10 '13 at 14:11
  • @PaulD.Waite Good work. I apologize for the off-topic argument. – electrikmilk Oct 10 '13 at 14:13
  • @brandonjordan: I never said you said Opera was perfect. What you did say was "how you're site looks on modern browsers like Chrome, Firefox, Safari, *& Opera* matters more" (emphasis mine). That's what I was referring to. Glad to hear you like Chrome so much. – Paul D. Waite Oct 10 '13 at 14:13
  • I do, I believe Chrome has the best web capabilities, what I meant when I said that is that Opera is a more modern browser than IE – electrikmilk Oct 10 '13 at 14:14
  • @brandonjordan: gotcha. Now that Opera's adopted Chrome's new rendering engine, I'm not sure it counts a separate browser as far as standards support goes. But in general you're totally right: Opera has historically been much quicker with standards support than IE, and Blink seems likely to keep it that way. – Paul D. Waite Oct 10 '13 at 14:17

1 Answers1

7

IE versions prior to IE10 has just a single Quirks Mode. This mode is now known as IE5 Quirks In IE10 and higher.

IE10 introduced a second Quirks mode which it simply calls Quirks.

Both of these modes change the rendering mode to use the old "quirks" box model, among other layout changes. This much is consistent between them.

The original Quirks Mode was basically a backward-compatibility mode to emulate IE5. Because of this, in addition to changing the box model, etc, it also disabls the majority of the browser features that have been introduced since IE5 -- so in this mode, none of the new HTML5 features will work.

The newer Quirks mode uses the same rendering rules as the old quirks mode, but does not disable all the browser features.

That is the basic difference between them.

The question could then be asked as to why bother having both modes?

The answer to this is that other browsers (eg Chrome) also have a Quirks mode, which is triggered (just like IE) when a page doesn't have a doctype. But other browsers have never disabled any of their features for backward compatibility in the way that IE did.

The result was that a site in quirks mode could look quite different in IE compared with other browsers, even when the basic rendering rules were the same.

The newer quirks mode was therefore introduced by IE in an effort to improve cross-browser compatibility for sites in quirks mode.

But as a result, the newer quirks mode will render some pages differently to the older quirks mode, so the older one was still needed in order for MS to support users whose sites were written for it.

Ultimately one should, if at all possible, avoid using quirks mode (either of them). Despite the cross-browser efforts MS put in by introducing the extra mode, there are still major differences between browsers when you are in quirks mode.

Best practice is always to use Standards mode, wherever possible.

Quirks mode should be unnecessary anyway: If you need the Quirks mode box model, this can be accessed in standards mode by using CSS box-sizing:border-box.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Leave it to Microsoft to include two different Quirks modes in the same browser...what a mess! – daGUY Oct 10 '13 at 14:48
  • 2
    @daGUY: It's what they always do: Add new stuff but leave existing features in place to support legacy users. You can complain about that, but there are people out there relying on it. Doing the opposite can also be bad; Google is a case in point: they are known for often deprecating features (and even discontinuing entire products) even while they still have a significant user base. I'm sure there could be a happy medium somewhere between those extremes, but it's not really fair to knock MS for taking the conservative approach. Quirks mode may be there, but it's not like you have to use it. – Spudley Oct 10 '13 at 15:02
  • 1
    @daGUY: and if you count ['Almost Standards' mode](http://meyerweb.com/eric/thoughts/2008/01/24/almost-target/) as a quirks mode, then IE at least wasn't the first to include two different quirks modes in the same browser. Open standards tend to be messy. – Paul D. Waite Oct 10 '13 at 15:12
  • Great, thank you! What about how to enable one mode or the other? I did some testing and it appears that when you remove the doctype, IE reports it's in the Compatibility *Browser* Mode but in the same time in the Standards *Document* Mode. If you include the http-equiv meta tag, it says it's in IE5 quirks mode. Confusing. – katspaugh Oct 10 '13 at 15:14
  • @katspaugh: Only *Document mode* is relevant here; *Browser Mode* refers to how IE identifies itself to the server (ie the User Agent String); it's not related to the rendering mode. – Spudley Oct 10 '13 at 15:20
  • I'm still unsure what triggers the new quirks mode. Is it the same as compatibility view? – katspaugh Oct 10 '13 at 15:32
  • @katspaugh: it definitely is **not** the same a compatibility view. Compatibility view is the IE7/8/9 compatibility modes, which is quite different to quirks mode. – Spudley Oct 10 '13 at 15:49
  • 2
    How to trigger the two quirks modes: IE10 by default will only use the new Quirks mode when you miss out the doctype. The old Quirks mode must be loaded *explicitly* using `X-UA-Compatible` with `IE=5`. It can also be triggered from compatibility mode. If your site defaults to compat mode (ie via the intranet settings), then the missing doctype will trigger the old quirks mode, because that is what would have been triggered in the old IE version that you've told IE to be 'compatible' with. This is how corporate users can configure things to keep using the same mode without any code changes. – Spudley Oct 10 '13 at 15:51