Minifikator in ulepševalnik CSS — brezplačno

Kako deluje

To orodje uporablja ročno napisan CSS tokenizator brez odvisnosti, zgrajen v celoti v JavaScriptu — brez zunanjih knjižnic, brez klicev strežnika. Tokenizator razvrsti vsak znak kot kodo, komentar, niz v narekovajih ali vrednost url(), preden uporabi kakršne koli transformacije, kar preprečuje, da bi pravila za presledke poškodovala vsebino nizov, podatkovne URI-je ali izraze calc().

1. 1
   Faza tokenizacije

   Vhodni CSS se pregleda znak za znakom in razdeli na tipizirane žetone: surovi odseki kode, komentarji /* ... */, nizi v narekovajih (z ohranjenimi ubežnimi zaporedji) in bloki url(...). To zagotavlja, da transformacije v naslednjem koraku vplivajo le na dejansko skladnjo CSS — nikoli na vsebino nizovnega literala ali podatkovnega URI-ja.
2. 2
   Minifikacija ali polepšanje

   V načinu minifikacije se navadni komentarji odstranijo (komentarji /*! license */ se ohranijo), sledi presledkov v kodnih žetonih se strnejo na en presledek, presledki ob interpunkciji okoli { } : ; , > ~ pa se odstranijo. Presledki okoli + in - so namerno pustljeni, da se ne pokvarijo izrazi calc(). V načinu polepšanja se koda najprej minificira do čiste osnove, nato znova tokenizira in znova zamakne z dvopresledkovnim sledenjem globine in zaznavanjem dvopičja deklaracije, da se dvopičje property: value loči od selektorskega dvopičja, kot je a:hover.
3. 3
   Ocena velikosti gzip

   Po ustvarjanju izpisa se nativni API CompressionStream brskalnika uporabi za stiskanje rezultata z gzip in merjenje nastalega števila bajtov. To daje realistično oceno velikosti prenosa, ki ustreza temu, kar bi spletni strežnik s gzip stiskanjem poslal po omrežju.
4. 4
   Kopiraj ali prenesi

   Obdelan CSS se zapiše v odložišče prek Clipboard API, ali prenese kot styles.min.css (način minifikacije) ali styles.css (način polepšanja) z uporabo Blob s tipom MIME text/css. Odstotek zmanjšanja velikosti je prikazan v živo med tipkanjem.

Sorodna orodja