Detailed explanation
Quirks mode and standards mode are browser rendering modes that determine how HTML and CSS are interpreted for compatibility. Standards mode, also called no-quirks mode, follows modern web standards as closely as the browser implements them. Quirks mode preserves selected behaviours of older browsers so legacy pages remain usable. It does not completely emulate Internet Explorer or Netscape; modern browsers apply specific compatibility rules. This matters because identical CSS can produce different layout results depending on the document’s mode, making otherwise reasonable styles difficult to debug.
For normal HTML documents served as text/html, the browser selects the mode while parsing the beginning of the document, primarily from the DOCTYPE. Put <!DOCTYPE html> before the root <html> element to request standards mode. Omitting the DOCTYPE normally triggers quirks mode. However, saying that every malformed or older DOCTYPE triggers quirks mode is too broad: browsers use defined matching rules, and some historical declarations select standards mode or limited-quirks mode. The DOCTYPE is a parsing declaration, not an HTML element, and the modern declaration does not download a schema or validate the document.
One important difference is box-model behaviour. In standards mode, an ordinary block using box-sizing: content-box treats its declared width as the content width; padding and borders add to its outer size. Quirks mode can apply legacy sizing rules to certain elements, where the declared width includes padding and borders. Other compatibility rules affect areas such as table layout and CSS value handling. There is also limited-quirks mode, historically called almost-standards mode, which mostly follows standards but retains a small number of legacy behaviours, notably around table-cell sizing with images.
To check a page, inspect document.compatMode in JavaScript: BackCompat indicates quirks mode, while CSS1Compat indicates either standards or limited-quirks mode. For new projects, consistently include <!DOCTYPE html>. If you want widths to include padding and borders, explicitly use box-sizing: border-box rather than relying on quirks. Interviewers generally expect you to explain the compatibility purpose, identify the DOCTYPE’s role, describe a practical layout consequence, and avoid confusing standards mode with a guarantee that all browsers render every feature identically.
Key points to remember
- Standards mode uses modern standards-based rendering; quirks mode retains selected legacy behaviours.
- Use <!DOCTYPE html> at the start of new HTML documents to select standards mode.
- A missing DOCTYPE normally triggers quirks mode; historical or malformed declarations follow specific selection rules.
- Limited-quirks mode is a third mode with a narrow set of legacy layout behaviours.
- document.compatMode returns BackCompat for quirks and CSS1Compat for standards or limited-quirks.
Common mistakes candidates make
- Claiming quirks mode fully emulates an old browser or affects only Internet Explorer.
- Saying every older or malformed DOCTYPE necessarily triggers quirks mode.
- Treating standards mode as HTML validation or assuming it removes all cross-browser differences.
Likely follow-up questions
Is box-sizing: border-box the same as enabling quirks mode?
No: border-box explicitly makes an element’s specified dimensions include its padding and borders without changing the document’s rendering mode. Quirks mode enables a broader set of compatibility behaviours.
Can document.compatMode distinguish all three rendering modes?
No: it distinguishes quirks mode from the other two modes. Both standards and limited-quirks mode return CSS1Compat.
Can adding <!DOCTYPE html> break an existing legacy page?
Yes, if the page relies on quirks-mode layout behaviours, switching to standards mode can change its appearance. Add the declaration, test affected layouts, and update the CSS rather than assuming the change is purely cosmetic.
Interview tip: Start with the compatibility distinction, show <!DOCTYPE html>, then explain one box-model consequence and how to check document.compatMode.