Berechnete Stile und Box-Model-Inspektor

Chrome DevTools → Elements → Computed zeigt im Tab den endgültigen, berechneten Wert jeder CSS-Eigenschaft des ausgewählten Elements, nachdem Kaskade, Vererbung und Spezifität aufgelöst wurden. Es beantwortet die Frage „Was wird tatsächlich angewendet?“ und nicht „Was wurde geschrieben?“

Das Computed-Panel zeigt ein interaktives Box-Model-Diagramm mit den Abmessungen von Content, Padding, Border und Margin des ausgewählten Elements. Klicken Sie auf eine beliebige Abmessung, um die CSS-Regel hervorzuheben, die sie festgelegt hat, und zum Styles-Panel zu springen.

Geben Sie im Filterfeld einen Suchbegriff ein, um bestimmte berechnete Eigenschaften schnell zu finden. Aktivieren Sie „Show all“, um auch geerbte und browserseitige Standardeigenschaften einzubeziehen. Deaktivieren Sie die Option, um nur Eigenschaften anzuzeigen, die nicht dem Standard entsprechen – der kürzeste Weg zu den relevanten angewendeten Styles.

Im Computed-Panel grau angezeigte Eigenschaften werden von einem übergeordneten Element geerbt. Klicken Sie auf die geerbte Eigenschaft, um zum Element und zur Regel zu springen, durch die sie festgelegt wurde. So können Sie die Kaskade nachvollziehen, ohne übergeordneten Elemente manuell im Markup nachzugehen.

Aus margin: 16px 8px werden vier berechnete Werte: margin-top, margin-right, margin-bottom und margin-left. Das Computed-Panel zeigt immer die einzelnen Langform-Eigenschaften an – hilfreich beim Debuggen asymmetrischer Abstände.

Berechnete Farbwerte werden unabhängig von ihrer Schreibweise immer im Format rgb() oder rgba() angezeigt. Klicken Sie im Styles-Panel auf ein Farbfeld, um zwischen den Darstellungsformaten (hex, hsl, rgb) umzuschalten. Das Computed-Panel zeigt immer die aufgelöste Farbe an.

Prüfen Sie die berechneten Werte von font-size, font-family, line-height und letter-spacing, um sicherzustellen, dass Typografie-Tokens korrekt angewendet werden. Wenn eine angeforderte Schriftart nicht geladen werden kann, erscheinen die Fallback-Schriftarten des Browsers in der berechneten font-family.

box-sizing: border-box sorgt dafür, dass width Padding und Border einschließt; box-sizing: content-box (Standard) schließt sie aus. Das Box-Model-Diagramm in den DevTools berücksichtigt das jeweils geltende Modell. Vergleichen Sie die Content-Breite mit der Gesamtbreite, um das Verhalten von box-sizing zu bestätigen.

Vertikale Margins zwischen Block-Elementen kollabieren zum größeren der beiden Werte. Das Box-Model-Diagramm zeigt den effektiven Margin. Verwenden Sie es zusammen mit dem Layout Inspector, um kollabierte Margins zu identifizieren, die von den geschriebenen Werten abweichen.

Das Styles-Panel zeigt alle auf das Element zutreffenden Regeln in der Reihenfolge ihrer Spezifität. Durchgestrichene Regeln werden überschrieben. Um festzustellen, welche Regel einen Eigenschaftskonflikt gewinnt, suchen Sie im Styles-Panel nach der obersten nicht durchgestrichenen Deklaration.

Regeln aus dem User-Agent-Stylesheet des Browsers erscheinen am unteren Rand des Styles-Panels mit der Kennzeichnung „user agent stylesheet“. Computed zeigt ihre aufgelösten Werte. Setzen Sie diese mit einem CSS-Reset oder Normalize.css zurück, um browserübergreifend eine einheitliche Ausgangsbasis zu schaffen.

Was zeigt das Computed-Styles-Panel, das im Styles-Panel nicht angezeigt wird?

Das Computed-Styles-Panel und das Box-Model-Diagramm zeigen die endgültigen aufgelösten Werte aller CSS-Eigenschaften nach der Auflösung der Kaskade. Verwenden Sie sie, um Vererbung nachzuverfolgen, die Auflösung von Kurzschreibweisen zu debuggen, box-sizing zu untersuchen und bei Spezifitätskonflikten auf jedem Element die siegreiche Regel zu identifizieren.