Hogyan működik a CSS szépítés
A szépítő karakterről karakterre olvassa a stíluslapodat, nyomon követi, hogy az egyes blokkok milyen mélyen vannak egymásba ágyazva, és újra kibocsátja őket egységes térközzel. Soha nem változtatja meg, hogy a stílusok mit csinálnak — csak azt, hogy hogyan néznek ki a fájlban.
- Tokenizálás. A könyvtár tokenek sorozatává alakítja a bemenetet: szelektorok, tulajdonságnevek, értékek, at-szabályok, megjegyzések, valamint a kapcsos zárójelek, kettőspontok és pontosvesszők, amelyek elválasztják őket. A karakterláncok és url() értékek egyetlen egységként kerülnek felismerésre.
- Beágyazás követése. Ahogy halad a token folyamban, a szépítő nyilvántartja a behúzási szintet. Minden nyitó kapcsos zárójel mélyíti a szintet, és minden záró zárójel visszaállítja.
- Beállítások alkalmazása. A behúzási választásod (2 szóköz, 4 szóköz vagy tab) beállítja egy szint szélességét. A zárójel-stílus beállítás eldönti, hogy a nyitó zárójel a szelektor sorában marad-e vagy külön sorba kerül.
- Újrakibocsátás. Végül a formázó visszaírja a tokeneket a kiszámított behúzással és sortörésekkel, soronként egy deklarációval és egyetlen szóközzel minden kettőspont után. Az eredmény ugyanaz a stíluslap, csak emberileg olvasható formában.
Miért érdemes CSS-t szépíteni
- Tömörített stíluslapok olvasása. Az éles CSS egy sorban érkezik, szabályok közötti térköz nélkül. A szépítés visszaállítja a sortöréseket és a behúzást, így megtalálhatod a szelektort egy elrendezési hiba mögött.
- Inkonzisztens fájlok rendbetétele. Egy több ember által szerkesztett stíluslap eltérő behúzásokat és zárójel stílusokat halmoz fel. Egyetlen áthúzás a szépítőn normalizálja az egész fájlt.
- Ez az eszköz nem terheli az oldalad. A legtöbb online formázó a teljes könyvtárat betölti az oldal megnyitásakor. Ez csak akkor tölti be a js-beautify-t, amikor rákattintasz a Szépítés gombra vagy bekapcsolod az Élő módot.
- Semmi sem hagyja el a böngésződet. A szépítő teljes mértékben az eszközödön fut. A CSS-ed soha nem kerül feltöltésre szerverre, ami számít, ha a stíluslap egy ügyfélhez tartozik.
Gyakori alkalmazások
A CSS szépítés akkor jön elő, amikor valakinek el kell olvasnia egy stíluslapot, amit nem olvasásra írtak.
- Éles hibakeresés: tömörített stíluslap beillesztése a Network lapról a szabály megtalálásához.
- Kódellenőrzés előkészítése: egy közreműködő inkonzisztens stíluslapjának újraformázása a pull request megnyitása előtt.
- Tanulás és auditálás: egy keretrendszer stíluslapjának kibontása a szerkezet tanulmányozásához.
Egy kidolgozott példa
Vegyünk egy tömörített egysorost: a{color:red;margin:0}b{padding:0}. Illeszd be fent 2 szóköz behúzással és Egysoros zárójel stílussal, majd kattints a Szépítésre. Olvasható blokkokat kapsz vissza. Válts Külön sorban stílusra és minden nyitó zárójel külön sorba kerül.
FAQ
Ez a böngészőmben fut?
Igen. A js-beautify könyvtár az első Szépítés kattintáskor vagy az Élő mód bekapcsolásakor töltődik be, majd gyorsítótárba kerül. A CSS-ed soha nem hagyja el az oldalt.
A szépítés ugyanaz, mint a tömörítés feloldása?
Visszaállítja az olvasható formázást — behúzást, sortöréseket és térközt — de nem hozza vissza a tömörítés által eltávolított megjegyzéseket.
A szépítés megváltoztatja a stílusok megjelenését?
Nem. A szépítés csak szóközöket és sortöréseket ad hozzá és távolít el; a stílusok érintetlenek maradnak.
Mit jelentenek a zárójel-stílus opciók?
Az Egysoros a nyitó zárójelet a szelektorral egy sorban tartja (a {). A Külön sorban minden nyitó zárójelet külön sorba tesz a szelektor alá.
A böngészőoldali CSS szépítés olvasható stíluslapot ad anélkül, hogy build lépésre vagy feltöltésre lenne szükség. Illessz be egy tömörített vagy rendetlen fájlt, válaszd ki a behúzást és a zárójel stílust, majd másold ki vagy töltsd le az eredményt.