Middle
What is quirks mode in browsers?
sobes.tech AI
Answer from AI
Compatibility mode is a browser mode in which it emulates the behavior of older versions, ignoring modern web standards (HTML5, CSS3). This is necessary for correct display of old web pages written without adhering to standards or for certain versions of Internet Explorer.
The browser determines the rendering mode based on the presence and content of the DOCTYPE:
- Quirks mode: Activated if the DOCTYPE is completely absent or has an incorrect format (for example, an outdated DOCTYPE for HTML 4.01 Transitional without a system identifier URI). In this mode, the browser applies non-standard rendering rules, such as treating
widthandheightforbox-sizingasborder-box, even without explicit indication. - Standards mode: Activated when a valid DOCTYPE is present (for example,
<!DOCTYPE html>). The browser strictly follows web standards. - Almost standards mode: An intermediate mode, activated for certain DOCTYPEs (for example, HTML 4.01 Transitional with a system identifier URI). It is close to standard mode but has minor differences (such as handling vertical margins of table cells).
Examples of incorrect DOCTYPEs that trigger quirks mode:
<!-- Absence of DOCTYPE -->
<html>
<body></body>
</html>
<!-- Incomplete DOCTYPE -->
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body></body>
</html>
Example of a valid DOCTYPE that triggers standards mode:
<!DOCTYPE html>
<html>
<body></body>
</html>
Working in compatibility mode is highly undesirable for modern development, as it leads to unpredictable behavior of CSS, JavaScript, and display issues across different browsers. Always use <!DOCTYPE html>.