Computed styles en boxmodel-inspector

Chrome DevTools → Elements → het tabblad Computed toont de uiteindelijke, berekende waarde van elke CSS-eigenschap op het geselecteerde element, nadat cascade, overerving en specificiteit zijn verwerkt. Het beantwoordt de vraag "wat wordt daadwerkelijk toegepast?" en niet "wat is geschreven?"

Het paneel Computed toont een interactief diagram van het boxmodel met de afmetingen van de inhoud, padding, border en marge van het geselecteerde element. Klik op een afmeting om de CSS-regel te markeren die deze heeft ingesteld en naar het paneel Styles te gaan.

Typ in het filtervak om snel specifieke berekende eigenschappen te vinden. Schakel "Alles weergeven" in om overgeërfde en standaardeigenschappen van de browser mee te nemen. Schakel het uit om alleen eigenschappen te tonen die niet de standaard zijn — de kortste weg naar relevante toegepaste stijlen.

Eigenschappen die in Computed grijs worden weergegeven, zijn overgeërfd van een bovenliggend element. Klik op de overgeërfde eigenschap om naar het element en de regel te gaan die deze heeft ingesteld. Zo traceer je de cascade zonder de bovenliggende elementen handmatig in de mark-up te inspecteren.

Het schrijven van margin: 16px 8px wordt uitgebreid naar vier berekende waarden: margin-top, margin-right, margin-bottom en margin-left. Het paneel Computed toont altijd afzonderlijke uitgebreide eigenschappen — handig bij het opsporen van problemen met asymmetrische tussenruimte.

Berekende kleurwaarden staan altijd in de indeling rgb() of rgba(), ongeacht hoe ze zijn geschreven. Klik op een kleurstaal in het paneel Styles om te wisselen tussen indelingen (hex, hsl, rgb). Het paneel Computed toont altijd de opgeloste kleur.

Inspecteer de berekende waarden van font-size, font-family, line-height en letter-spacing om te controleren of typografische tokens correct zijn toegepast. Terugvallettertypen van de browser verschijnen in de berekende waarde van font-family wanneer een aangevraagd lettertype niet kan worden geladen.

box-sizing: border-box zorgt ervoor dat width padding en border omvat; box-sizing: content-box (de standaard) sluit ze uit. Het boxmodeldiagram in DevTools weerspiegelt het model dat van toepassing is — vergelijk de breedte van de inhoud met de totale breedte om het gedrag van box-sizing te bevestigen.

Verticale marges tussen blokelementen vallen samen tot de grootste van de twee waarden. Het boxmodeldiagram toont de effectieve marge — gebruik het samen met Layout Inspector om samenvallende marges te vinden die afwijken van de geschreven waarden.

Het paneel Styles toont alle regels die op het element zijn gericht, in volgorde van specificiteit. Doorgestreepte regels zijn overschreven. Wil je bepalen welke regel een conflict tussen eigenschappen wint, zoek dan naar de bovenste niet-doorgestreepte declaratie in het paneel Styles.

Regels uit het stijlblad van de browser-user-agent verschijnen onderaan het paneel Styles met het label "stijlblad van de user-agent". Computed toont hun opgeloste waarden. Reset deze met een CSS-reset of Normalize.css om in alle browsers een consistente basis in te stellen.

Het paneel met berekende stijlen en het diagram van het boxmodel tonen de uiteindelijke opgeloste waarden van alle CSS-eigenschappen nadat de cascade is verwerkt. Gebruik ze om overerving te traceren, de uitbreiding van verkorte notaties te debuggen, box-sizing te onderzoeken en te bepalen welke regel een specificiteitsconflict op een element wint.