CSS-minifier

Slik bruker du det

1. Lim inn CSS-en din, åpne en .css-fil, eller start med eksempelet.
2. Den minifiserte CSS-en vises mens du skriver, med størrelsen før og etter.
3. Kopier den eller last den ned som styles.min.css.

Hva det gjør

CSS-minifier bruker CSSO, som gjør mer enn å fjerne mellomrom og kommentarer:

• Forkorter verdier: #ff0000 blir red, 0px blir 0, og padding: 0 16px 0 16px blir padding: 0 16px.
• Slår sammen regler med samme selektor, og selektorer med de samme deklarasjonene.
• Fjerner deklarasjoner som overstyres av en senere i samme regel.

Det gjør bare endringer som bevarer meningen i stilarket, så sidene ser like ut.

Er det verdt det?

Stilark hindrer siden i å vises til de er lastet, så mindre CSS betyr raskere første visning. Minifisering sparer vanligvis ytterligere 5 til 15 % i tillegg til gzip- eller Brotli-komprimeringen verten din bruker, mer når stilarket har mange kommentarer. Bruker du et byggeverktøy som Vite, minifiserer det allerede CSS for produksjon; denne siden er for stilark du skriver og publiserer for hånd.

Ofte stilte spørsmål

Kan minifisering ødelegge CSS-en min?

Endringene CSSO gjør, bevarer meningen i gyldig CSS. Hack som er avhengige av ugyldig syntaks for gamle nettlesere, overlever kanskje ikke. Behold den lesbare versjonen som kilde og minifiser en kopi.

Fjerner det ubrukt CSS?

Nei: det kan ikke se hvilke selektorer sidene dine bruker. Verktøy som PurgeCSS gjør det under et bygg.

Hvordan får jeg den lesbare versjonen tilbake?

Behold originalen. CSS-formaterer rykker inn minifisert CSS igjen, men kommentarer er borte for godt.

Lastes CSS-en min opp?

Nei. Den minifiseres i nettleseren din.