CSS Minifier — CSS-minifier
Minificeer en herstructureer CSS met CSSO in je browser. Vergelijk de grootte voor en na en kopieer of download daarna het .min.css-bestand.
🔒 Draait volledig in uw browser — niets wordt geüploadWat de CSS-minifier doet
Deze tool verkleint stylesheets met CSSO (CSS Optimizer), een minifier die CSS begrijpt in plaats van het als platte tekst te behandelen. In de eerste ronde voert hij veilige opschoningen uit: witruimte en commentaar worden verwijderd, kleuren worden ingekort (#ff0000 wordt red, #ffffff wordt #fff), nulwaarden verliezen hun eenheid, overbodige aanhalingstekens en puntkomma's verdwijnen en getallen worden in hun kortste vorm geschreven. Het resultaat is exact gelijkwaardige CSS die merkbaar kleiner is.
Met restructure (herstructureren) ingeschakeld gaat CSSO nog verder en optimaliseert hij de structuur van het stylesheet. Regels met dezelfde selector worden samengevoegd, selectors met identieke declaraties worden gegroepeerd, eigenschappen die later in dezelfde regel worden overschreven, vallen weg en uitgeschreven declaraties zoals losse marges kunnen worden samengevoegd tot een verkorte notatie. CSSO bewaakt de cascade zorgvuldig: regels worden alleen verplaatst of samengevoegd als dat niet kan veranderen welke declaratie wint.
De resultaten lezen
De badges tonen de UTF-8-grootte van invoer en uitvoer en het bespaarde percentage. Handgeschreven CSS met commentaar en inspringing krimpt vaak met 20–50%. Uitvoer van frameworks die al compact is, levert minder winst op, terwijl stylesheets die dezelfde declaraties bij veel selectors herhalen het meest profiteren van herstructureren. Servers passen doorgaans ook gzip of Brotli toe, dus minificatie en compressie vullen elkaar aan in plaats van met elkaar te concurreren.
Privé en veilig
De minifier draait volledig in je browser: er wordt niets geüpload, gelogd of opgeslagen. Dat maakt hem handig voor inline critical CSS, e-mailtemplates, ingesloten widgets of snelle fixes op een computer zonder je gebruikelijke buildtools. Behoud /*! ... */-commentaar als je stylesheet licenties van derden bevat die bewaard moeten blijven. Voeg voor productiesites een minifier toe aan je build, zodat elke deployment automatisch wordt geoptimaliseerd, en controleer de uitvoer altijd visueel als je CSS afhankelijk is van browserhacks of ongebruikelijke syntaxis.
Hoe te gebruiken
- Voeg je CSS toePlak een stylesheet of sleep een .css-bestand naar de dropzone.
- Kies optiesBepaal of regels moeten worden geherstructureerd en of /*! license */-commentaar behouden blijft.
- MinificeerKlik op Minify CSS en bekijk de grootte voor, na en het bespaarde percentage.
- Kopieer of downloadKopieer de geminificeerde CSS of download deze als .min.css-bestand.