Oblikovalnik in zmanjševalnik CSS

Kako oblikovati ali zmanjšati CSS

1. Prilepi svojo slogovno datoteko ali klikni Odpri datoteko, da naložiš datoteko .css (do 10 MB).
2. Izberi Zamik (2 presledka, 4 presledki ali tabulator) in ali želiš Prazna vrstica med pravili.
3. Klikni Oblikuj (polepšaj) za berljivo kodo ali Zmanjšaj za najmanjšo različico.
4. Pri zmanjševanju pusti označeno Združi pravila pri zmanjševanju za najboljši rezultat in Ohrani komentarje /*! … */, da ohraniš glave z licenco.
5. Kopiraj ali prenesi rezultat. Vrstica stanja prikaže velikost pred in po, v bajtih, ter prihranek v odstotkih.

Če manjka zaklepaj, se orodje ustavi in ti pove, v kateri vrstici je nezaprt { ali odvečen }, namesto da bi ustvarilo pokvarjen izhod.

Polepšanje: berljiv in dosleden CSS

Oblikuj (polepšaj) uporablja js-beautify, oblikovalnik, ki ga najdeš v številnih urejevalnikih kode. Vsako deklaracijo postavi v svojo vrstico, zamakne vsebino vsakega pravila in at-pravil, kot sta @media in @supports, vsak izbirnik v skupini zapiše v svojo vrstico in doda presledek za dvopičjem vsake deklaracije. Obstoječe prazne vrstice ostanejo (največ ena zapored), tako da so logični razdelki datoteke še vedno vidni. Oblikovalnik nikoli ne spremeni vrednosti, vrstnega reda pravil ali pomena izbirnikov: spremeni le presledke.

To je uporabno za branje zmanjšanega CSS s spletne strani, za pregled slogovne datoteke, ki jo je ustvarilo orodje, ali za čiščenje datoteke, ki jo je urejalo več ljudi z različnimi navadami.

Zmanjšanje: manjši CSS s csso

Zmanjšaj uporablja csso (CSS Optimizer), strukturni zmanjševalnik. Poleg odstranitve presledkov in komentarjev slogovno datoteko prepiše v enakovredno, krajšo obliko:

• barve se skrajšajo (#ff0000 postane red, #ffffff postane #fff);
• enote in ničle se poenostavijo (0px postane 0, 0.5em postane .5em);
• podvojene deklaracije se odstranijo, okrajšane lastnosti pa se združijo, ko je to varno;
• z Združi pravila pri zmanjševanju se pravila z enakimi deklaracijami zgrupirajo (a{color:red} b{color:red} postane a,b{color:red}), preglasene deklaracije pa se izpustijo.

Prestrukturiranje je za običajne slogovne datoteke varno, vendar premika deklaracije. Če se tvoj CSS zanaša na zelo poseben vrstni red kaskade, na primer na trike za brskalnike, odznači možnost: csso bo potem stisnil samo vsako pravilo na mestu.

Komentarji se odstranijo, razen »pomembnih« komentarjev, ki se začnejo z /*! in se pogosto uporabljajo za licence. Odznači Ohrani komentarje /*! … */, da odstraniš tudi te.

Velikost pred in po

Vrstica stanja primerja velikost vnosa in rezultata v bajtih UTF-8. Polepšana koda je običajno večja od izvirne; zmanjšana koda pri ročno napisanem CSS običajno prihrani od 20 do 50 %. Ne pozabi, da strežniki datoteke stisnejo tudi z gzip ali Brotli, zato je prihranek pri prenosu manjši od surove številke, zmanjšanje pa vseeno skrajša čas razčlenjevanja in zmanjša velikost predpomnjenih datotek.