Was ist das CSS Object Model (CSSOM)?

Was ist das CSSOM?

Das CSS Object Model (CSSOM) ist die Darstellung aller auf eine Seite angewendeten CSS-Regeln im Arbeitsspeicher des Browsers, zusammen mit JavaScript-APIs zum Lesen und Ändern. Es ist das Stil-Gegenstück zum DOM: Das DOM beschreibt den Inhalt, das CSSOM beschreibt, wie dieser Inhalt gestaltet ist. Siehe die MDN-Referenz.

So funktioniert es

Während der Browser HTML zum DOM parst, parst er auch jedes gefundene Stylesheet ins CSSOM. Beide ergeben zusammen den Render-Baum, der nur die sichtbaren Knoten mit ihren geltenden Stilen enthält. Danach berechnet der Browser das Layout und zeichnet den Baum. Diese Abfolge heißt Critical Rendering Path.

Ein Unterschied ist für die Geschwindigkeit wichtig: Das DOM wird schrittweise aufgebaut, das CSSOM wird aber erst genutzt, wenn es vollständig geparst ist, weil eine spätere Regel eine frühere überschreiben kann. Darum blockiert CSS standardmäßig das Rendern: Der Browser stellt verarbeiteten Inhalt erst dar, wenn das CSSOM fertig ist.

Beispiel

Eine Seite bindet im Head ein großes Stylesheet ein. Das HTML kommt schnell an, das Stylesheet braucht deutlich länger, und der Bildschirm bleibt bis dahin leer. Lagern Sie Stile nur für Druck oder große Bildschirme mit einem media-Attribut wie media="print" aus, blockieren sie das erste Rendern nicht. Der Browser lädt sie trotzdem, mit niedrigerer Priorität.

Stile per JavaScript lesen und ändern

• document.styleSheets und CSSStyleSheet erlauben es, Regeln zu prüfen und zu bearbeiten.
• element.style setzt Inline-Stile.
• getComputedStyle() liefert ein aktuelles, schreibgeschütztes Objekt mit den aufgelösten Werten nach Anwendung der Stylesheets.

Häufige Fehler

• Ein riesiges Stylesheet: Alles darin blockiert das erste Zeichnen. Halten Sie kritisches CSS klein und markieren Sie den Rest per Media Query als nicht blockierend.
• Stile in einer Schleife lesen und schreiben: Liest man einen Layoutwert wie offsetHeight direkt nach einer Stiländerung, muss der Browser sofort das Layout berechnen. In einer Schleife heißt das Layout Thrashing. Lesen Sie zuerst alles, schreiben Sie danach.
• Viele Eigenschaften einzeln umschalten: Ändern Sie stattdessen einmal eine Klasse.
• Spät ladendes CSS: Stile, die nach dem Inhalt eintreffen, können das Layout verschieben und schaden dem Cumulative Layout Shift.

CSSOM und Performance-Messung

Ein langsames CSSOM verzögert das erste Zeichnen und damit Kennzahlen wie Largest Contentful Paint. Das Gesamtbild finden Sie unter Rendering. Diese Werte behalten Sie im Blick mit dem Page-Speed-Monitoring, das Lighthouse-Werte und Core Web Vitals planmäßig erfasst und bei Verschlechterung alarmieren kann, und dem Core-Web-Vitals-Checker für eine schnelle Einzelmessung. Weiterlesen: Website-Geschwindigkeit verbessern und Core Web Vitals überwachen.

Häufige Fragen zum CSSOM

Was ist der Unterschied zwischen DOM und CSSOM?

Das DOM ist ein Baum des Seiteninhalts (Elemente und Text). Das CSSOM enthält die Stilregeln. Der Browser kombiniert beide zum Render-Baum, mit dem er die Seite berechnet und zeichnet.

Blockiert CSS das Rendern?

Ja, standardmäßig. Der Browser stellt verarbeiteten Inhalt erst dar, wenn das CSSOM aufgebaut ist. Stylesheets mit einem nicht zutreffenden Medientyp oder einer nicht zutreffenden Media Query, etwa Druckstile, blockieren das erste Rendern nicht.

Ändert getComputedStyle Stile?

Nein. Es liefert ein aktuelles, schreibgeschütztes Objekt mit den aufgelösten Werten. Zum Ändern nutzen Sie element.style, Klassen oder die Stylesheet-APIs.

Enthält das CSSOM Stile mit display: none?

Das CSSOM enthält die Regeln. Erst der Render-Baum lässt Elemente mit display: none und deren Nachfahren weg.