CSS Minifier — CSS-minifierare

Vad CSS-minifieraren gör

Det här verktyget krymper stilmallar med CSSO (CSS Optimizer), en minifierare som förstår CSS i stället för att behandla det som vanlig text. I första steget gör den säkra rensningar: blanksteg och kommentarer tas bort, färger förkortas (#ff0000 blir red, #ffffff blir #fff), nollvärden blir av med sina enheter, överflödiga citattecken och semikolon försvinner och tal skrivs i sin kortaste form. Resultatet är exakt likvärdig CSS som är märkbart mindre.

När restructure (omstrukturering) är aktiverat går CSSO längre och optimerar stilmallens struktur. Regler med samma selektor slås ihop, selektorer som delar identiska deklarationer grupperas, egenskaper som skrivs över längre fram i samma regel tas bort och utskrivna deklarationer, till exempel separata marginaler, kan slås ihop till en kortform. CSSO är noga med att bevara kaskaden: regler flyttas eller slås ihop bara när det inte kan ändra vilken deklaration som vinner.

Så läser du resultaten

Märkena visar UTF-8-storleken på indata och utdata samt hur många procent som sparats. Handskriven CSS med kommentarer och indrag krymper ofta med 20–50 %. Ramverksutdata som redan är kompakt vinner mindre, medan stilmallar som upprepar samma deklarationer över många selektorer har mest nytta av omstrukturering. Servrar lägger vanligtvis på gzip eller Brotli ovanpå, så minifiering och komprimering kompletterar varandra i stället för att konkurrera.

Privat och säkert

Minifieraren körs helt i din webbläsare – ingenting laddas upp, loggas eller sparas. Det gör den praktisk för inline kritisk CSS, e-postmallar, inbäddade widgets eller snabba fixar på en dator utan dina vanliga byggverktyg. Behåll /*! ... */-kommentarer om din stilmall innehåller licenser från tredje part som måste finnas kvar. För produktionssajter bör du lägga till en minifierare i ditt bygge så att varje driftsättning optimeras automatiskt, och alltid kontrollera resultatet visuellt när din CSS bygger på webbläsarhack eller ovanlig syntax.