JavaScript Document compatMode Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word COMPATMODE

Definition

Document.compatMode is a read-only string that tells you whether the document is rendered in quirks mode or standards-like mode (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.compatMode. Start with this line.

JavaScript
document.compatMode
CallWhat it does
document.compatModePrimary signature.

Built into the browser. Read or assign document.compatMode — no import required.

Library declarations
JavaScript
document.compatMode

Parameters

ParameterDescription
compatModeRequired. Read-only mode label string
Branch / logOptional. Warn in legacy pages or support tools

Return Value

Return ValueDescription
*The current value of document.compatMode.

JavaScript Examples

Example 1 — Read document.compatMode

Log the raw mode string returned by the browser.

JavaScript
console.log(document.compatMode);
// Usually "CSS1Compat" on pages with <!DOCTYPE html>
Try It Yourself

How It Works

  1. Read the property. No arguments—just document.compatMode.
  2. Get a string. Either BackCompat or CSS1Compat.
  3. Modern default. Pages with an HTML5 doctype usually report CSS1Compat.
  4. Debug aid. Unexpected quirks mode often explains odd CSS layout bugs.

Example 2 — Detect Quirks Mode (MDN)

Branch when the document is in quirks mode.

JavaScript
if (document.compatMode === "BackCompat") {
  console.log("Quirks mode — check the doctype");
} else {
  console.log("Not quirks mode");
}
Try It Yourself

How It Works

  1. Compare to BackCompat. That exact string means quirks mode (MDN).
  2. Else branch. Any other value here is standards-like (CSS1Compat).
  3. Try-it pages. These demos include a doctype, so you usually hit the else path.
  4. Action. If quirks is true in production, inspect the first lines of the HTML file.

Example 3 — Pair with document.doctype

Confirm whether a doctype node exists alongside the mode string.

JavaScript
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");
}
Try It Yourself

How It Works

  1. Check doctype. document.doctype is null when no doctype node exists.
  2. Read mode. Log compatMode next to that boolean for a clear debug pair.
  3. Healthy case. HTML5 pages usually have both a doctype and CSS1Compat.
  4. Fix tip. Missing doctype? Add <!DOCTYPE html> as the first line of the file.
Compatibility

Browser Support

Document.compatMode is Baseline Widely available on MDN (since July 2015). It works across modern browsers for detecting quirks vs standards-like rendering.

✓ Baseline · Widely available

Document.compatMode

Read-only string: BackCompat (quirks) or CSS1Compat (standards / almost-standards).

99% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
compatMode Excellent

Bottom line: Safe everywhere you teach DOM APIs. Always ship <!DOCTYPE html> so production pages stay in standards mode (CSS1Compat).

Frequently Asked Questions

A read-only string: "BackCompat" when the document is in quirks mode, or "CSS1Compat" when it is in no-quirks (standards) mode or limited-quirks (almost standards) mode.
No. MDN marks Document.compatMode as Baseline Widely available (since July 2015). It is a standard way to detect rendering mode.
Usually a missing or incomplete HTML doctype. Modern pages should start with <!DOCTYPE html> so the browser uses standards (CSS1Compat) mode.
MDN: the document is in no-quirks mode (standards) or limited-quirks mode (almost standards). Both report CSS1Compat via compatMode.
They are historical. MDN notes that these modes are now standardized, so older "standards" / "almost standards" marketing names are less meaningful today.
No. It is read-only. Fix the doctype (and related markup) so the browser chooses the mode you want — typically standards mode with <!DOCTYPE html>.

Next: contentType

Learn how to read the document’s MIME type string from JavaScript.

contentType tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document children Property JavaScript Document contentType Property