What is quirks mode?
Asked Answered
D

6

65

In a lot of articles about design, quirks mode is mentioned. Anybody have an idea about this thing in plain text and in a development prospective?

Dineric answered 8/11, 2009 at 8:38 Comment(0)
D
45

you can read in this links :

http://en.wikipedia.org/wiki/Quirks_mode

http://www.quirksmode.org/css/quirksmode.html

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Modern browsers generally try to render HTML content according to the W3C recommendations. However, to provide compatibility with older web pages, and to provide additional "intuitive" functionality, all browsers support an alternative "quirks mode".

Quirks mode is not, however, a standard. The rendering of any page in quirks mode in different browsers may be different. Whenever possible, it is better to adhere to the W3C standards and try and avoid depending on any past or present browser quirks.

Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML - with respect to the chosen DOCTYPE - can also cause the browser to switch to quirks mode.

More information on the different quirks modes in different browsers can be found at QuirksMode.org

Donettedoney answered 8/11, 2009 at 8:39 Comment(2)
Where does this quoted material come from? I can't find it at any of the links you have included.Witless
Can you supply any evidence for the assertion that invalid HTML can trigger quirks mode even with a valid and standards mode triggering Doctype? It isn't something I've ever encountered.Witless
P
11

Quirks mode means your page is running without a document type declared, the document type is defined at the very top of a page and it denotes how the browser should read the HTML. This is StackOverflow's doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

w3.org specifies web standards and document types, because Stack Overflow uses this doctype it must adhere to the specification of that doctype.

This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

Physiognomy answered 8/11, 2009 at 8:40 Comment(3)
As of this writing, StackOverflow uses the standard <!DOCTYPE html>Sleeper
"Quirks mode means your page is running without a document type declared" — This is very misleading. Only specific doctypes trigger Standards mode (or Almost Standards mdoe).Witless
"how the browser should read the HTML" — I struggle to remember any differences in how the HTML is handled in quirks/standards/almost standards mode. The differences are almost entirely in how CSS is handled.Witless
R
9

In past days when web browsers did not have full/correct implementations of CSS, developers relied on these idiosyncrasies to make their pages render properly. However, as browsers became more standards-compliant, these pages no longer rendered correctly, as they were written for what bascially was a different type of CSS. This is where quirks mode comes in, as it handles pages written for these broken CSS implementations.

So in 2009, you don't really need to worry about quirks mode unless you're handling older CSS, or older browsers. Just write your CSS to current web standards, and you be OK.

Raff answered 8/11, 2009 at 8:44 Comment(1)
That being said, if you want to support IE6 or 7, you will need to support almost standards modePosen
L
8

Quirks mode also known as Compatibility Mode - means your page is running without a document type declared(this is old school, so this is most likely not needed anymore) The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5. In quirks mode, the web browser attempts to render/make code based on a ‘best-guess’, this includes a generous interpretation of code that may be non-standard or poorly-formed. if you don't declare a doctype, the browser will have to guess what version of HTML/CSS you're running Quirks mode enables older HTML documents to still ‘work its a technique used by web browsers to maintain backward compatibility with older webpages.

if you write a correct doctype, that will trigger standard mode and not Quirks mode older browsers like Netscape 4, are permanently locked in quirks mode

Quirks mode enables your browser to behave as if it is an older browser

It's a mode in which the browser is not law-abiding. It accepts any malformed mark-up in this mode and is not strict with syntax, tags and elements basically means it'll accept your code even if its not-correctly written

In quirks mode, browsers behave as they did in the early days of the web. This was done to prevent old sites from breaking too much in new browsers.

there is a difficulty in writing a page that looks the same in all browsers. In point of fact, that's impossible. Many browsers were written with special features that only they could handle. Or they have special ways of handling things that are different from how other browsers handle them Using a non-standard will cause every browser to run in quirks mode. But not all browsers behave the same in quirks mode, each browser reverts to its own unique rendering engine which is why it's very difficult to get a page looking alike in different browsers.

also all your html5 css won't work because it won't be compatible

Quirks mode supports the JavaScript functionality of IE6, It is similar to the behavior of IE5 and the Quirks mode behavior of IE6, IE7 and IE8.

in quirks mode, document.body (the body-element) is the root element and in standard mode it's the html-element (document.documentElement). quirks mode is for the old rules of browsers, they made it so that old websites that were written before the world wide web came and before HTML5 was invented don't break. so quirks mode is just to support those websites that had incorrect CSS features. so now developers had a choice. go with standard (todays browsers) or quirks mode for older browsers and websites. in quirks mode a lot of CSS/HTML features that we have today don't work correctly.

Leaseback answered 13/8, 2016 at 8:54 Comment(1)
"they made it so that old websites that were written before the world wide web came" I'm confused. You're saying HTML came before the world wide web?Hausmann
Y
2

http://www.motive.co.nz/glossary/quirks-mode.php

  • In quirks mode, the web browser attempts to render code based on a ‘best-guess’, this includes a generous interpretation of code that may be non-standard or poorly-formed.
  • A web browser may switch to quirks mode if a webpage has no document type declaration or has an incomplete document type declaration (for example, if the URI to the DTD is omitted).
  • Quirks mode enables older HTML documents to still ‘work’, and should be triggered when the code that has been used is known to fail contemporary technical standards (and when there is no intention/budget to revise legacy content).
Yeung answered 5/1, 2017 at 6:43 Comment(2)
Why answer such an old question? This was asked and answered 7 years ago when quirks mode was kind of a big deal - your answer does not add a different perspective or any new value.Domeniga
I found this question on a "HTML Questions for interviews" site. Maybe OP did too.Tarra
F
2

In addition to other answers, the mode can be checked by

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

Fellini answered 3/5, 2020 at 9:26 Comment(4)
Since this question has popped back onto my frontpage because your edit complaining about down votes was rolled back again, I'll point out that the question asks "What is quirks mode?". It doesn't ask "How can I detect quirks mode?". It deserves downvotes because it doesn't answer the question!.Witless
Your code is also wrong. See the documentation. When the document is in CSS1Compat mode, your code reports that it is in standards mode, but that value indicates it may be in standards mode or limited standards mode.Witless
@Witless you can go through with the other answers.Fellini
You posted this as an answer, it should answer the question, not tell people to read other (real) answers.Witless

© 2022 - 2024 — McMap. All rights reserved.