Lasketut tyylit ja laatikkomallin tarkastelu

Chrome DevTools → Elements → Computed -välilehti näyttää jokaisen CSS-ominaisuuden lopullisen lasketun arvon valitussa elementissä, kun kaskadi, periytyminen ja täsmällisyys on ratkaistu. Se vastaa kysymykseen "mitä todella käytetään?" eikä kysymykseen "mitä kirjoitettiin?"

Computed-paneeli näyttää vuorovaikutteisen boksimallikaavion, jossa näkyvät valitun elementin sisältö, sisäys, reunus ja ulkomarginaali mittoineen. Napsauttakaa mitä tahansa mittaa korostaaksenne sen määrittäneen CSS-säännön ja siirtyäksenne Styles-paneeliin.

Etsikää tiettyjä laskettuja ominaisuuksia nopeasti kirjoittamalla suodatinkenttään. Valitkaa "Show all", jos haluatte mukaan perityt ja selaimen oletusominaisuudet. Poistakaa valinta, jos haluatte näyttää vain muut kuin oletusarvot — näin löydätte nopeimmin olennaiset käytössä olevat tyylit.

Computed-paneelissa harmaina näkyvät ominaisuudet on peritty ylätason elementiltä. Napsauttakaa perittyä ominaisuutta siirtyäksenne sen määrittäneeseen elementtiin ja sääntöön. Näin voitte seurata kaskadia tutkimatta vanhempia elementtejä käsin merkintäkoodista.

Kirjoitus margin: 16px 8px laajennetaan neljäksi lasketuksi arvoksi: margin-top, margin-right, margin-bottom ja margin-left. Computed-paneeli näyttää aina erilliset pitkän muodon ominaisuudet, mikä helpottaa epäsymmetristen välitysongelmien selvittämistä.

Lasketut väriarvot ovat aina rgb()- tai rgba()-muodossa riippumatta siitä, miten ne kirjoitettiin. Napsauttakaa väri-ilmaisinta Styles-paneelissa vaihtaaksenne näyttömuotoa (hex, hsl, rgb). Computed-paneeli näyttää aina ratkaistun värin.

Tutkikaa laskettuja font-size-, font-family-, line-height- ja letter-spacing-arvoja varmistaaksenne, että typografiset tunnisteet on otettu oikein käyttöön. Jos pyydetyn fontin lataus epäonnistuu, laskettu font-family näyttää selaimen käyttämät varafontit.

box-sizing: border-box sisällyttää leveyteen sisäyksen ja reunuksen; box-sizing: content-box (oletus) jättää ne sen ulkopuolelle. DevToolsin boksimallikaavio vastaa käytössä olevaa mallia — verratkaa sisällön leveyttä kokonaisleveyteen varmistaaksenne box-sizing-toiminnan.

Lohkoelementtien väliset pystysuuntaiset marginaalit yhdistyvät suuremmaksi näistä kahdesta arvosta. Boksimallikaavio näyttää todellisen marginaalin — käyttäkää sitä yhdessä Layout Inspectorin kanssa tunnistaaksenne yhdistyneet marginaalit, jotka poikkeavat kirjoitetuista arvoista.

Styles-paneeli näyttää kaikki elementtiin kohdistuvat säännöt täsmällisyysjärjestyksessä. Yliviivatut säännöt on ohitettu. Kun selvitätte, mikä sääntö voittaa ominaisuuksia koskevassa ristiriidassa, etsikää Styles-paneelin ylin yliviivaamaton määritys.

Selaimen user-agent-tyylitiedoston säännöt näkyvät Styles-paneelin alaosassa tunnisteella "user agent stylesheet". Computed näyttää niiden ratkaistut arvot. Nollatkaa nämä arvot CSS-resetillä tai Normalize.cssillä, jotta selainten välille saadaan yhtenäinen lähtötaso.

Computed Styles -paneeli ja boksimallikaavio paljastavat kaikkien CSS-ominaisuuksien lopulliset ratkaistut arvot kaskadin ratkaisemisen jälkeen. Käyttäkää niitä periytymisen jäljittämiseen, lyhennysmerkintöjen laajentamisen vianmääritykseen, box-sizing-toiminnan tutkimiseen ja sen selvittämiseen, mikä sääntö voittaa täsmällisyysristiriidat missä tahansa elementissä.