Besplatan CSS minifikator i uljepšivač

Kako radi

Ovaj alat koristi ručno napisan CSS tokenizator bez zavisnosti izgrađen u potpunosti u JavaScriptu — bez vanjskih biblioteka, bez poziva serveru. Tokenizator klasifikuje svaki znak kao kod, komentar, citiran niz, ili url() vrijednost prije primjene bilo kakvih transformacija, što sprječava da pravila razmaka pokvare sadržaj niza, data URI-je, ili calc() izraze.

1. 1
   Prolaz tokenizacije

   Ulazni CSS se skenira znak-po-znak i dijeli na tipizirane tokene: sirove segmente koda, /* ... */ komentare, citirane nizove (čuvajući nizove za bijeg), i url(...) blokove. Ovo osigurava da transformacije u sljedećem koraku dotiču samo stvarnu CSS sintaksu — nikada sadržaj niza ili data URI-ja.
2. 2
   Minifikacija ili uljepšavanje

   U modu minifikacije, obični komentari se uklanjaju (/*! license */ komentari se zadržavaju), nizovi razmaka u tokenima koda se sažimaju u jedan razmak, i razmaci uz interpunkciju oko { } : ; , > ~ se uklanjaju. Razmaci oko + i - se namjerno ostavljaju netaknuti kako se ne bi pokvarili calc() izrazi. U modu uljepšavanja, kod se prvo minifikuje do čiste osnove, zatim ponovo tokenizuje i ponovo uvlači sa praćenjem dubine od dva razmaka i detekcijom dvotačke deklaracije da razlikuje dvotačke svojstvo: vrijednost od dvotačaka selektora poput a:hover.
3. 3
   Procjena gzip veličine

   Nakon proizvodnje izlaza, native CompressionStream API preglednika se koristi da komprimuje rezultat sa gzip i izmjeri rezultujući broj bajtova. Ovo daje realističnu procjenu veličine prijenosa koja odgovara onome što bi web server sa gzip kompresijom poslao preko mreže.
4. 4
   Kopiraj ili preuzmi

   Obrađeni CSS se zapisuje u međuspremnik putem Clipboard API-ja, ili preuzima kao styles.min.css (mod minifikacije) ili styles.css (mod uljepšavanja) koristeći Blob sa MIME tipom text/css. Procenat smanjenja veličine se prikazuje uživo dok kucate.

Povezani alati