CSS-minifier

Zo gebruik je het

1. Plak je CSS, open een .css-bestand, of begin met het voorbeeld.
2. De geminificeerde CSS verschijnt terwijl je typt, met de grootte ervoor en erna.
3. Kopieer hem of download hem als styles.min.css.

Wat het doet

De CSS-minifier gebruikt CSSO, dat verder gaat dan witruimte en commentaar weghalen:

• Verkort waarden: #ff0000 wordt red, 0px wordt 0, en padding: 0 16px 0 16px wordt padding: 0 16px.
• Voegt regels met dezelfde selector samen, en selectors met dezelfde declaraties.
• Verwijdert declaraties die een latere in dezelfde regel overschrijft.

Het maakt alleen wijzigingen die de betekenis van het stylesheet behouden, dus pagina's zien er hetzelfde uit.

Is het de moeite waard?

Stylesheets houden de pagina tegen tot ze geladen zijn, dus kleinere CSS betekent een snellere eerste weergave. Minificeren bespaart doorgaans nog eens 5 tot 15% bovenop de gzip- of Brotli-compressie van je host, meer als het stylesheet veel commentaar heeft. Gebruik je een buildtool zoals Vite, dan minificeert die CSS al voor productie; deze pagina is voor stylesheets die je met de hand schrijft en publiceert.

Veelgestelde vragen

Kan minificeren mijn CSS kapotmaken?

De wijzigingen van CSSO behouden de betekenis van geldige CSS. Hacks die voor oude browsers op ongeldige syntaxis leunen, overleven het misschien niet. Houd de leesbare versie als bron en minificeer een kopie.

Verwijdert het ongebruikte CSS?

Nee: het kan niet zien welke selectors je pagina's gebruiken. Tools zoals PurgeCSS doen dat tijdens een build.

Hoe krijg ik de leesbare versie terug?

Bewaar het origineel. De CSS-formatter laat geminificeerde CSS weer inspringen, maar commentaar is voorgoed weg.

Wordt mijn CSS geüpload?

Nee. Hij wordt in je browser geminificeerd.