CSS Inspektorius

Nesvarbu, ar derinate maketo problemą, ar bandote „perinžineriškai“ suprasti dizainą, kuris jums patinka, ar tiesiog greitai norite pasitikrinti tarpų ir tipografijos reikšmes — CSS Inspektorius suteikia viską, ko reikia, švariame plaukiojančiame skydelyje. Skirtingai nei naršyklės DevTools, jis netrukdo — jokių prisegtų skydelių, jokio permatuoto lango dydžio. Tiesiog užveskite pelę, spustelėkite ir tirkite. Įrankis rodo apskaičiuotus (computed) stilius — tai, ką naršyklė realiai atvaizduoja, o ne tik parašytą CSS kodą. Tai reiškia, kad matote tikras reikšmes po to, kai išspręstas paveldėjimas, specifiškumas ir kaskadiškumas — tas pačias reikšmes, kurios lemia, ką vartotojai mato ekrane.

Elemento tikrinimas niekada nesukelia puslapio perpaišymo (repaint) ar perkompiliavimo (reflow), todėl galite laisvai tyrinėti nerimaudami dėl slinkties pozicijos, animacijų ar JavaScript būsenos sutrikdymo. Palaikomi ir pseudoelementai, tokie kaip ::before bei ::after — užvedus pelę ant tėvinio elemento, skydelis atskirai rodo sugeneruoto turinio stilius, atskirai nuo paties elemento stilių. CSS custom properties (kintamieji) išsprendžiami iki galutinės apskaičiuotos reikšmės, tačiau skydelis taip pat parodo kintamojo pavadinimą, iš kurio ši reikšmė kilo, todėl galite atsekti spalvą ar tarpo reikšmę iki jos dizaino žetono (design token) šaltinio, o ne tiesiog matyti neapdorotą pikselių skaičių.

Kasdieniame darbe dauguma kūrėjų per vieną sesiją CSS Inspektoriumi naudojasi dešimtis kartų — tikrindami, kodėl sugriuvo (collapsed) paraštė, patvirtindami šešioliktainį (hex) kodą prieš įklijuodami jį į stilių lentelę, arba įsitikindami, kad medijos užklausos (media query) lūžio taškas iš tiesų pritaikė numatytus stilius. Kadangi tai plaukiojantis skydelis, o ne viso naršyklės lango režimas, galite palikti jį atidarytą persijungdami tarp skirtukų — patikrinti savo kodo redaktorių ar dizaino failą — ir grįžti tiesiai prie to paties elemento, ant kurio buvo užvesta pelė, nepametant vietos.