Minificeert CSS door commentaar en overbodige witruimte te verwijderen en dubbele regels samen te voegen, of maakt het juist weer leesbaar met één declaratie per regel. Beide richtingen gebruiken echte parsers (csso en js-beautify), zodat commentaar-achtige tekst in een content:-string, spaties in calc() en data:-URI's ongeschonden blijven.
Minify vs. Beautify
Minify verwijdert commentaar en onnodige witruimte en voegt dubbele regels veilig samen om de kleinst mogelijke CSS te maken — handig om een stylesheet te verkleinen voordat je hem uitlevert. Beautify doet het tegenovergestelde: het springt alles opnieuw in met één declaratie per regel, zodat een geminificeerd of rommelig bestand weer leesbaar wordt. Beide worden aangedreven door echte CSS-parsers (csso en js-beautify), dus lastige inhoud zoals tekst die op commentaar lijkt binnen een content:-string, spaties binnen calc() en data:-URI's blijven behouden in plaats van kapot te gaan door een naïeve zoek-en-vervang.
De CSS-minifier gebruiken
- Plakken — plak de CSS die je wilt minifyen of beautifyen in het invoerveld hierboven.
- Inspringing kiezen — kies 2 spaties, 4 spaties of een tab (alleen van toepassing op het Beautify-resultaat; het heeft geen invloed op Minify).
- Uitvoeren — klik op 'Minify' of 'Beautify' en het wordt direct in je browser verwerkt.
- Kopiëren — bekijk de grootte-uitlezing en zet het resultaat met de knop 'Kopiëren' op je klembord.
Kan minifyen mijn stijlen veranderen?
Nee. Deze tool doet geen botte zoek-en-vervang op tekst, maar begrijpt je stylesheet met een echte CSS-parser (csso) als een syntaxboom en optimaliseert die vervolgens veilig. Daardoor blijven strings binnen content:, betekenisvolle spaties binnen calc(), data:-URI's en vendor-prefixes behouden, en verandert het renderresultaat niet.
Hoeveel kleiner wordt het?
Dat hangt af van de oorspronkelijke staat, maar leesbare CSS met veel commentaar en inspringing wordt doorgaans zo'n 30–60% kleiner. Een al geminificeerd bestand krimpt maar weinig. Zodra de conversie klaar is, zie je meteen aan de grootte-uitlezing hoeveel bytes en welk percentage er ten opzichte van het origineel bespaard is. Bij verzending naar de server drukken gzip- en brotli-compressie de werkelijke overdracht nog verder omlaag.
Wanneer gebruik ik Beautify?
Beautify is handig wanneer je op één regel geminificeerde CSS of een bestand met rommelige inspringing moet lezen of bewerken. Het herschikt alles met één declaratie per regel en consistente inspringing, wat prettig is bij het debuggen van een uitgeleverde stylesheet of het begrijpen van andermans code. Wil je het weer uitleveren, dan minify je het gewoon opnieuw.
Wordt mijn CSS ergens geüpload?
Nee. Zowel de minifier als de beautifier draaien volledig in je browser met zelf-gehoste bibliotheken — je CSS wordt nooit naar een server verzonden of daar opgeslagen. Na het converteren laat de grootte-uitlezing zien hoeveel bytes het minifyen heeft bespaard, en de knop Kopiëren zet het resultaat direct op je klembord.