Minifikátor a skrášľovač CSS zadarmo

Ako to funguje

Tento nástroj používa ručne napísaný, bezzávislostný tokenizér CSS napísaný celý v JavaScripte — bez externých knižníc, bez volaní servera. Tokenizér klasifikuje každý znak ako kód, komentár, reťazec v úvodzovkách alebo hodnotu url() ešte pred aplikovaním akýchkoľvek transformácií, čo zabraňuje tomu, aby pravidlá pre biele znaky pokazili obsah reťazcov, dátových URI alebo výrazov calc().

1. 1
   Fáza tokenizácie

   Vstupné CSS sa prehľadáva znak po znaku a rozdeľuje na typované tokeny: surové úseky kódu, komentáre /* ... */, reťazce v úvodzovkách (so zachovaním únikových sekvencií) a bloky url(...). Toto zaisťuje, že transformácie v ďalšom kroku sa dotýkajú iba skutočnej syntaxe CSS — nikdy nie obsahu reťazcového literálu alebo dátovej URI.
2. 2
   Minifikácia alebo skrášlenie

   V režime minifikácie sa bežné komentáre odstránia (komentáre /*! license */ sa zachovávajú), sledy bielych znakov v kódových tokenoch sa zbalia na jednu medzeru a biele znaky priľahlé k interpunkcii okolo { } : ; , > ~ sa odstránia. Medzery okolo + a - sa zámerne ponechávajú, aby sa neporušili výrazy calc(). V režime skrášlenia sa kód najprv minifikuje na čistý základ a potom sa znova tokenizuje a znova odsadí so sledovaním hĺbky po dvoch medzerách a rozpoznávaním deklaratívnej dvojbodky, aby sa dvojbodka property: value odlíšila od selektorovej dvojbodky ako a:hover.
3. 3
   Odhad veľkosti gzip

   Po vytvorení výstupu sa použije natívne API CompressionStream prehliadača na kompresiu výsledku pomocou gzip a zmeranie výsledného počtu bajtov. To poskytuje realistický odhad veľkosti prenosu zodpovedajúci tomu, čo by cez sieť odoslal webový server s gzip kompresiou.
4. 4
   Kopírovať alebo stiahnuť

   Spracovaný CSS sa zapíše do schránky cez Clipboard API, alebo sa stiahne ako styles.min.css (režim minifikácie) alebo styles.css (režim skrášlenia) pomocou Blob s MIME typom text/css. Percento zníženia veľkosti sa zobrazuje živo počas písania.

Súvisiace nástroje