Beregnet typografi og inspektør til box-modellen

Chrome DevTools → Elements → fanen Computed viser den endelige, beregnede værdi for hver CSS-egenskab på det valgte element efter løsning af kaskade, nedarvning og specificitet. Det besvarer spørgsmålet "hvad anvendes faktisk?" i stedet for "hvad blev skrevet?"

Computed-panelet viser et interaktivt boksmodeldiagram med dimensionerne for indhold, padding, kant og margen på det valgte element. Klik på en dimension for at fremhæve den CSS-regel, der angav den, og gå til Styles-panelet.

Skriv i filterfeltet for hurtigt at finde bestemte beregnede egenskaber. Markér "Show all" for også at medtage nedarvede egenskaber og egenskaber med browserens standardværdier. Fjern markeringen for kun at vise egenskaber, der ikke har standardværdier — den korteste vej til de relevante anvendte stile.

Egenskaber, der vises med gråt i Computed, er nedarvet fra en forælder. Klik på den nedarvede egenskab for at gå til det element og den regel, der angav den, så du kan følge kaskaden uden manuelt at inspicere forældre i opmærkningen.

Når du skriver margin: 16px 8px, udvides det til fire beregnede værdier: margin-top, margin-right, margin-bottom og margin-left. Computed-panelet viser altid de enkelte egenskaber med fulde navne — nyttigt til fejlfinding af problemer med asymmetriske afstande.

Beregnede farveværdier vises altid i formatet rgb() eller rgba(), uanset hvordan de blev skrevet. Klik på en farveprøve i Styles-panelet for at skifte visningsformat (hex, hsl, rgb). Computed-panelet viser altid den opløste farve.

Undersøg de beregnede værdier for font-size, font-family, line-height og letter-spacing for at bekræfte, at typografiske tokens anvendes korrekt. Browserens reserveskrifttyper vises i den beregnede font-family, når en ønsket skrifttype ikke kan indlæses.

box-sizing: border-box gør, at width omfatter padding og kant; box-sizing: content-box (standardværdien) udelader dem. Boksmodeldiagrammet i DevTools afspejler den model, der gælder — sammenlign indholdets bredde med den samlede bredde for at bekræfte boksstørrelsens adfærd.

Vertikale margener mellem blokelementer falder sammen til den største af de to værdier. Boksmodeldiagrammet viser den effektive margen — brug det sammen med Layout Inspector for at finde sammenfaldende margener, der adskiller sig fra de skrevne værdier.

Styles-panelet viser alle regler, der rammer elementet, i specificitetsrækkefølge. Regler med gennemstregning er tilsidesat. Sådan finder du den regel, der vinder en egenskabskonflikt: Se efter den øverste deklaration uden gennemstregning i Styles-panelet.

Browserens user-agent-stylesheet-regler vises nederst i Styles-panelet med etiketten "user agent stylesheet." Computed viser deres opløste værdier. Nulstil dem med et CSS-reset eller Normalize.css for at etablere et ensartet udgangspunkt på tværs af browsere.

Computed Styles-panelet og boksmodeldiagrammet viser de endelige, opløste værdier for alle CSS-egenskaber efter løsning af kaskaden. Brug dem til at spore nedarvning, fejlfinde udvidelse af kortnotation, undersøge box-sizing og identificere, hvilken regel der vinder specificitetskonflikter på et element.