Document.compatMode — Eigenschaft · JavaScript-Referenz

Signatur

Document.compatMode

Beschreibung

Die Eigenschaft document.compatMode gibt als Zeichenkette zurück, in welchem Render-Modus der Browser das aktuelle Dokument darstellt. Der Wert ist nur lesbar und wird beim Parsen des Dokuments festgelegt, hauptsächlich anhand der Doctype-Deklaration.

Mögliche Werte:

"CSS1Compat": Standards-Modus oder beinahe-Standards-Modus (limited quirks), z. B. bei <!DOCTYPE html>.
"BackCompat": Quirks-Modus, z. B. wenn der Doctype fehlt oder veraltet ist.

Nützlich ist die Eigenschaft vor allem bei der Fehlersuche in Layout-Problemen, in Bibliotheken, die Maße des Viewports ermitteln (im Quirks-Modus liefert document.body statt document.documentElement die relevanten Werte für clientWidth oder scrollTop), sowie in Browser-Erweiterungen oder Analyse-Tools, die fremde Seiten untersuchen.

Da der Modus nach dem Laden nicht mehr geändert werden kann, ist compatMode ein reiner Diagnosewert. Wer im Quirks-Modus landet, sollte den Doctype korrigieren statt per Skript darauf zu reagieren.

Rückgabewert

Typ

"CSS1Compat" | "BackCompat"

Beschreibung

"CSS1Compat" im Standards- bzw. beinahe-Standards-Modus, "BackCompat" im Quirks-Modus.

Beispiele

Render-Modus prüfen und warnen

// In der Entwicklung auf fehlenden Doctype hinweisen
if (document.compatMode === 'BackCompat') {
  console.warn('Seite läuft im Quirks-Modus – bitte <!DOCTYPE html> ergänzen!');
} else {
  console.log('Standards-Modus aktiv:', document.compatMode);
}

Standards-Modus aktiv: CSS1Compat

Richtiges Wurzelelement für Viewport-Maße ermitteln

// Im Quirks-Modus liefert <body> die Viewport-Werte
const getScrollRoot = () =>
  document.compatMode === 'CSS1Compat'
    ? document.documentElement
    : document.body;

const root = getScrollRoot();
console.log(`Viewport: ${root.clientWidth}×${root.clientHeight}px`);
console.log(`Scroll-Position: ${root.scrollTop}px`);

Viewport: 1280×720px Scroll-Position: 0px

Modus eines neu erzeugten Dokuments vergleichen

const parser = new DOMParser();

const mitDoctype = parser.parseFromString('<!DOCTYPE html><p>Hallo</p>', 'text/html');
const ohneDoctype = parser.parseFromString('<p>Hallo</p>', 'text/html');

console.log(mitDoctype.compatMode);
console.log(ohneDoctype.compatMode);

CSS1Compat BackCompat

// Wichtig · Fallstricke

Kein Unterschied zwischen Standards- und beinahe-Standards-Modus: Beide liefern "CSS1Compat". Der limited-quirks-Modus (z. B. bei HTML-4.01-Transitional-Doctype) weicht nur beim Zeilenhöhen-Verhalten von Bildern in Tabellenzellen ab und lässt sich über compatMode nicht erkennen.
Nur lesbar: Eine Zuweisung wird ignoriert (im Strict Mode ohne Fehler, da nur ein Getter existiert). Der Modus lässt sich ausschließlich über den Doctype steuern.
XML- bzw. XHTML-Dokumente (application/xhtml+xml) werden immer im Standards-Modus gerendert und liefern "CSS1Compat".
Der Wert von iframe-Dokumenten ist unabhängig vom Elterndokument und wird durch den Doctype des eingebetteten Dokuments bestimmt (Ausnahme: about:blank/srcdoc-Sonderregeln).
Kompatibilität: in allen aktuellen Browsern unterstützt; historisch lieferte Opera gelegentlich "QuirksMode" – heute irrelevant.

Siehe auch

Document.doctype Document.body ContactAddress.postalCode Document.lastModified Document.designMode