CSS Minifier

Plak een stylesheet om witruimte en commentaar te verwijderen, waarden als #ff0000 → red te verkorten en dubbele regels samen te voegen met de structurele optimalisaties van CSSO.

Draait in je browserGeen account nodigNiets wordt geüpload

Geminificeerde uitvoer

Zo gebruik je de CSS Minifier

  1. Plak CSS of open een .css-bestand.
  2. Laat Herstructureren aan staan om regels en declaraties samen te voegen, of zet het uit voor een veilige ronde die alleen witruimte verwijdert.
  3. Laat Licentiecommentaar behouden aan staan om /*! … */-vermeldingen te bewaren.
  4. Vergelijk de originele, geminificeerde en gzip-grootte.
  5. Kopieer het resultaat of download output.min.css.

Hoe CSS-minificatie werkt

Deze tool gebruikt CSSO (CSS Optimizer), die je stylesheet omzet in een syntaxboom en die in de kortst mogelijke gelijkwaardige vorm weer uitschrijft. Naast het verwijderen van witruimte en commentaar past hij veilige herschrijvingen van waarden toe:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Lege regels en dubbele declaraties worden weggelaten

Wat doet „herstructureren”?

Herstructureren kijkt naar de hele stylesheet: regels met identieke declaraties worden samengevoegd tot één selectorlijst (.a,.b{color:red}) en herhaalde selectors worden gecombineerd. Dat bespaart bij echte stylesheets vaak nog eens 5–15%. CSSO voegt alleen samen als de cascadevolgorde gelijk blijft, maar als je afhankelijk bent van ongebruikelijke overrides, kun je het uitzetten voor een puur syntactische minificatie.

Waarom CSS minificeren?

CSS blokkeert het renderen: de browser kan de pagina pas tekenen als de stylesheets in de <head> zijn gedownload en geparsed. Kleinere CSS betekent een snellere First Contentful Paint en betere Core Web Vitals, wat zowel gebruikers als je positie in zoekmachines helpt. Combineer minificatie met gzip of Brotli op de server voor het beste resultaat.

Veelgestelde vragen

Is het veilig om CSS te minificeren?
Ja. Witruimte en commentaar hebben geen invloed op hoe CSS wordt weergegeven, en de herschrijvingen van waarden door CSSO zijn volgens de specificatie gelijkwaardig. Herstructureren behoudt de cascadevolgorde; schakel het uit als je de meest behoudende uitvoer wilt.
Ondersteunt het moderne CSS zoals custom properties, nesting en @layer?
Ja. Custom properties (--var), @media, @supports, @layer, @container en grid-syntax blijven behouden.
Kan ik geminificeerde CSS later weer leesbaar maken?
Geminificeerde CSS kan door elke formatter opnieuw worden ingesprongen, maar verwijderd commentaar is niet terug te halen. Bewaar je originele bronbestand en behandel het geminificeerde bestand als build-output.
Wordt mijn stylesheet ergens geüpload?
Nee. Minificatie draait in je browser; er wordt niets naar een server gestuurd.

Gerelateerde tools

JavaScript Minifier JS comprimeren en mangelen met Terser, met grootte- en gzip-statistieken. HTML Minifier Commentaar en witruimte weghalen, inline CSS/JS minificeren. SQL Formatter SQL opmaken of minificeren voor PostgreSQL, MySQL, T-SQL, BigQuery en meer. JSON Formatter JSON opmaken, minificeren en valideren met fouten per regel/kolom.