CSS minificeren en formatteren

Plak je stylesheet en klik op "Minificeren" om overbodige opmerkingen, spaties en regeleinden te verwijderen, of op "Formatteren" om gecomprimeerde CSS om te zetten in leesbare, netjes ingesprongen code. Alles gebeurt in je browser.

Wat doet de minifier?

Hij verwijdert alles wat de browser niet nodig heeft: opmerkingen, inspringing, regeleinden, spaties rond accolades, dubbele punten, komma's en combinators, en de laatste puntkomma van elk blok. Het resultaat is meestal 15 tot 30% kleiner en werkt precies hetzelfde.

We laten ongemoeid wat niet mag veranderen: de inhoud van strings (content: "…"), paden in url(), de verplichte spaties in calc() en media queries, en opmerkingen die beginnen met /*!, die volgens afspraak licenties bevatten en bewaard moeten blijven.

Minificeren in productie

Minder bytes betekent sneller downloaden en betere Core Web Vitals, vooral op mobiel. Zet naast minificeren ook gzip- of Brotli-compressie aan op de server, die CSS nog veel kleiner maakt, en lever de bestanden met een lange cacheduur.

In een project met een buildstap (Vite, webpack, PostCSS…) gebeurt het minificeren automatisch met cssnano of Lightning CSS; deze tool is handig voor eenvoudige websites, templates of om de geminificeerde CSS van een andere site leesbaar te maken.