Gratis CSS-minifier og -formatter

Sådan fungerer det

Værktøjet bruger en håndskrevet CSS-tokenizer uden afhængigheder, bygget helt i JavaScript — ingen eksterne biblioteker, ingen serverkald. Tokenizeren klassificerer hvert tegn som kode, kommentar, citeret streng eller url()-værdi, før der anvendes transformationer, hvilket forhindrer, at blanktegnsregler ødelægger strengindhold, data-URI'er eller calc()-udtryk.

1. 1
   Tokeniseringsgennemløb

   CSS-inputtet gennemgås tegn for tegn og deles i typede tokens: rå kodesegmenter, /* ... */-kommentarer, citerede strenge (med bevarede escape-sekvenser) og url(...)-blokke. Det sikrer, at transformationerne i næste trin kun rører ved egentlig CSS-syntaks — aldrig ved indholdet af en strengkonstant eller data-URI.
2. 2
   Minificering eller forskønnelse

   I minificeringstilstand fjernes almindelige kommentarer (/*! license */-kommentarer beholdes), sammenhængende blanktegn i kodetokens samles til ét mellemrum, og blanktegn omkring tegnsætning som { } : ; , > ~ fjernes. Mellemrum omkring + og - lades bevidst urørt for ikke at ødelægge calc()-udtryk. I forskønnelsestilstand minificeres koden først til et rent udgangspunkt og tokeniseres og indrykkes derefter igen med sporing af dybde i to mellemrum og genkendelse af deklarationskolon for at skelne egenskab: værdi-koloner fra selektorkoloner som a:hover.
3. 3
   Anslået gzip-størrelse

   Efter outputtet er lavet, bruges browserens indbyggede CompressionStream API til at komprimere resultatet med gzip og måle antallet af bytes. Det giver et realistisk skøn over overførselsstørrelsen, svarende til hvad en webserver med gzip-komprimering ville sende over netværket.
4. 4
   Kopiér eller download

   Den behandlede CSS skrives til udklipsholderen via Clipboard API eller downloades som styles.min.css (minificering) eller styles.css (forskønnelse) med en Blob med MIME-typen text/css. Den procentvise størrelsesreduktion vises live, mens du skriver.

Relaterede værktøjer