Minifikátor a krásník CSS zdarma

Jak to funguje

Tento nástroj používá ručně napsaný tokenizér CSS bez závislostí, postavený zcela v JavaScriptu — bez externích knihoven, bez volání serveru. Tokenizér klasifikuje každý znak jako kód, komentář, řetězec v uvozovkách nebo hodnotu url(), než aplikuje jakékoli transformace, což zabraňuje tomu, aby pravidla pro bílé znaky poškodila obsah řetězců, datové URI nebo výrazy calc().

1. 1
   Průchod tokenizací

   Vstupní CSS se prochází znak po znaku a rozděluje se do typovaných tokenů: surové úseky kódu, komentáře /* ... */, řetězce v uvozovkách (se zachováním escape sekvencí) a bloky url(...). To zajišťuje, že transformace v dalším kroku ovlivňují jen skutečnou syntaxi CSS — nikdy obsah řetězcového literálu nebo datové URI.
2. 2
   Minifikace nebo zkrášlení

   V režimu minifikace se běžné komentáře odstraní (komentáře /*! license */ zůstávají), řady bílých znaků v kódových tokenech se sloučí do jediné mezery a bílé znaky sousedící s interpunkcí kolem { } : ; , > ~ se odstraní. Mezery kolem + a - se záměrně ponechávají, aby se nerozbily výrazy calc(). V režimu zkrášlení se kód nejprve minifikuje na čistý základ, poté se znovu tokenizuje a znovu odsadí se sledováním hloubky po dvou mezerách a rozpoznáváním dvojtečky v deklaraci, aby se odlišily dvojtečky vlastnost: hodnota od selektorových dvojteček jako a:hover.
3. 3
   Odhad velikosti po gzip

   Po vytvoření výstupu se pomocí nativního API CompressionStream prohlížeče výsledek zkomprimuje pomocí gzip a změří výsledný počet bajtů. To dává realistický odhad velikosti přenosu odpovídající tomu, co by přes síť poslal webový server s kompresí gzip.
4. 4
   Kopírovat nebo stáhnout

   Zpracované CSS se zapisuje do schránky přes Clipboard API, nebo se stahuje jako styles.min.css (režim minifikace) nebo styles.css (režim zkrášlení) pomocí Blob s typem MIME text/css. Procento zmenšení velikosti se zobrazuje živě, jak píšete.

Související nástroje