CSS Minifier & Formatter

Wat is deze tool?

Een CSS-minifier herschrijft een stylesheet zo compact mogelijk zonder de weergave te veranderen: het verwijdert commentaar en witruimte, verkort kleurwaarden en nul-eenheden waar dat veilig kan, voegt dubbele regels samen en verwijdert overbodige puntkomma's.

Deze tool is gebouwd op clean-css, een CSS-optimalisator die de stylesheet echt omzet naar een AST in plaats van reguliere expressies te gebruiken — daarom kan het veilig omgaan met edge cases die naïeve minifiers om zeep helpen: CSS custom properties (--main-color: ...), inhoud binnen strings, en complexe selectors en media queries komen allemaal correct uit de bus.

Waarom gebruiken?

• AST-gebaseerde minificatie (clean-css), geen regex — veilig met custom properties, strings en geneste media queries.
• Level 2-optimalisaties voegen regels samen en vereenvoudigen ze voor extra besparing, meer dan alleen witruimte weghalen.
• Zie precies hoeveel bytes en welk percentage je hebt bespaard.
• Format-modus zet een geminifyde stylesheet weer om in leesbare CSS met consistente inspringing.
• 100% lokale verwerking — eigen of nog niet gepubliceerde stijlen verlaten nooit je browser.

Hoe te gebruiken

1. Plak je CSS in het invoerveld, of klik op "Load Example" voor een voorbeeld met een custom property en een media query.
2. Klik op "Minify" om te comprimeren, of "Format" om het leesbaar te maken met 2 spaties inspringing.
3. Bekijk het bericht onder de vakken — minify-modus toont de grootteverkleining; ongeldige CSS geeft een duidelijke foutmelding in plaats van stilletjes kapotte output.
4. Klik op "Copy" om het resultaat te kopiëren.

Voorbeeld

Invoer

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Uitvoer

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

De custom property, media query en cascade-volgorde blijven allemaal behouden — alleen witruimte, commentaar en overbodige tekens worden verwijderd.

Praktische tips

• Minify tijdens build/deploy, niet tijdens ontwikkeling — bewerk de leesbare bron en laat deze tool (of je build pipeline) de uitgeleverde versie maken.
• Als je aan het debuggen bent waarom een pagina er in productie anders uitziet, maakt het formatteren van de geminifyde CSS het verschil met je bron veel makkelijker leesbaar.
• Custom properties overleven minificatie, dus stylesheets gebaseerd op design tokens (met --spacing, --color-*, enzovoort) kunnen veilig door deze tool.
• Combineer met de HTML- en JS-minifiers hieronder als je project alles in aparte bestanden bewaart vóór een release.

Waar dit past in echte workflows

CSS is een van de meest waardevolle dingen om te minifyen, omdat stylesheets standaard render-blocking zijn — elke byte die van een stylesheet wordt afgesnoept, kan iets van de first paint afhalen, zeker op langzamere verbindingen. Het is een kleinere winst dan beeldoptimalisatie, maar in feite gratis zodra het in een build-stap is ingebouwd.

De Format-richting is handig voor het omgekeerde probleem: het bestuderen van een geminifyde stylesheet van een concurrent of een oud productiesysteem, om de structuur te begrijpen voordat je een override of redesign schrijft.

→ HTML Minifier · JS Minifier

Veelvoorkomende toepassingen

• Een stylesheet verkleinen vóór het deployen van een statische site of landingspagina.
• Een geminifyd CSS-bestand van een live site herformatteren om de structuur te bestuderen.
• CSS opschonen die uit een designtool is geëxporteerd, vaak met overmatig commentaar en witruimte.
• Snel controleren of een handgeschreven CSS-fragment correct parseert, aangezien misvormde CSS als expliciete foutmelding naar voren komt.

Veelgestelde vragen