Document.compatMode is a read-only instance property that tells you whether the page is rendered in quirks mode or standards (no-quirks / limited-quirks) mode. Learn the BackCompat and CSS1Compat values, how the doctype chooses the mode, and how to check it in JavaScript—with five examples and try-it labs.
Read-only
string
BackCompat
CSS1Compat
<!DOCTYPE html>
Baseline widely
When a browser loads HTML, it chooses a rendering mode. Pages with a proper doctype (such as <!DOCTYPE html>) usually run in standards mode. Pages without a doctype may fall into quirks mode, where layout rules behave more like old browsers.
document.compatMode exposes that choice as a simple string. It is useful when debugging weird box-model or percentage-height bugs on legacy pages—or when confirming a template always ships a doctype.
Put <!DOCTYPE html> as the first line of every modern HTML document. That is the simplest way to get CSS1Compat (standards) rendering.
Related Document tutorials: children, characterSet, Document constructor.
Document.compatModeA read-only instance property on Document. Its value is a string describing the document’s compatibility (rendering) mode.
"BackCompat" — quirks mode (MDN)."CSS1Compat" — no-quirks (standards) or limited-quirks (almost standards) mode (MDN).document.compatModeA string that is one of:
"BackCompat" — quirks mode"CSS1Compat" — no-quirks or limited-quirks modeif (document.compatMode === "BackCompat") {
// in Quirks mode
}| Goal | Code / note |
|---|---|
| Read mode | document.compatMode |
| Detect quirks | document.compatMode === "BackCompat" |
| Detect standards-like | document.compatMode === "CSS1Compat" |
| Force standards (HTML) | <!DOCTYPE html> as first line |
| Change from JS? | No — read-only |
| MDN status | Baseline Widely available |
Four facts about document.compatMode.
stringRead-only
BackCompatLegacy layout
CSS1CompatPreferred
baselineStandard API
| Topic | Quirks (BackCompat) | Standards (CSS1Compat) |
|---|---|---|
| Box model history | May follow older IE-like rules | Standard CSS box model |
| Percentage heights | Often more forgiving / surprising | Strict ancestor height chain |
| Modern CSS | Harder to reason about | Predictable for tutorials & apps |
| New projects | Avoid | Always aim for this |
Examples follow MDN Document: compatMode. Use View Output or Try It Yourself for each case.
Read the compatibility mode string for the current document.
document.compatModeLog the raw value returned by the browser.
console.log(document.compatMode);
// Usually "CSS1Compat" on pages with <!DOCTYPE html>The try-it editor documents include a doctype, so you should see standards mode.
Branch when compatMode is BackCompat.
if (document.compatMode === "BackCompat") {
console.log("Quirks mode — check the doctype");
} else {
console.log("Not quirks mode");
}This is the exact MDN pattern for detecting quirks mode in legacy debugging.
Friendly messages and what to fix in HTML.
Treat CSS1Compat as the healthy modern result.
const isStandardsLike = document.compatMode === "CSS1Compat";
console.log("Standards-like mode:", isStandardsLike);
console.log("compatMode:", document.compatMode);MDN: CSS1Compat covers both no-quirks and limited-quirks modes.
Map the raw string to a beginner-friendly message.
function describeCompatMode(mode) {
if (mode === "BackCompat") return "Quirks mode";
if (mode === "CSS1Compat") return "Standards / almost-standards mode";
return "Unknown: " + mode;
}
console.log(describeCompatMode(document.compatMode));Useful in support dashboards or teaching demos that show layout mode at a glance.
Pair compatMode with document.doctype for debugging.
const hasDoctype = document.doctype !== null;
console.log("Has doctype:", hasDoctype);
console.log("compatMode:", document.compatMode);
if (!hasDoctype) {
console.log("Tip: add <!DOCTYPE html> as the first line");
}Missing doctype is the classic path into quirks mode. Fix markup first; do not try to override mode from JS.
CSS1Compat.compatMode in bug-report bundles.Browser begins parsing the document.
Missing/odd doctype may select quirks mode.
Layout rules follow quirks or standards-like behavior.
compatModeJavaScript reports BackCompat or CSS1Compat.
BackCompat = quirks; CSS1Compat = no-quirks or limited-quirks.<!DOCTYPE html> as the first line of new HTML.Document.compatMode is marked Baseline Widely available on MDN (since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only quirks vs standards mode string — essential for doctype and layout debugging.
Bottom line: Use document.compatMode to detect quirks mode. Prefer CSS1Compat by always including . Do not try to set the mode from JavaScript.
Document.compatMode is the standard way to ask whether a page is in quirks mode (BackCompat) or standards-like mode (CSS1Compat). Use it for diagnostics—and keep modern pages in standards mode with a proper HTML5 doctype.
Continue with contentType, ownerDocument, characterSet, or the JavaScript hub.
<!DOCTYPE html>compatMode when debugging mysterious layout bugsCSS1Compat for all new projectsdocument.doctype during supportdocument.compatMode = "CSS1Compat"CSS1Compat page is perfectly modern CSSdocument.compatModeRead-only mode string — prefer CSS1Compat with an HTML5 doctype.
string
APIbaseline
StandardBackCompat
LegacyCSS1Compat
PreferredDOCTYPE
HTMLQuirks mode was invented so old pages without doctypes would keep looking roughly like they did in 1990s browsers. Modern sites almost never want that—which is why a one-line <!DOCTYPE html> is still one of the most important habits in web development.
Learn how to read the document MIME type (such as text/html).
6 people found this page helpful