Gratis converter

CSS Verkleiner

Verklein en comprimeer CSS-stylesheets direct in uw browser. Verwijder opmerkingen, vouw witruimte samen en verklein de bestandsgrootte. Gratis en privé.

Sleep hier een CSS-bestand

Ondersteunt .css-bestanden. Of plak je CSS hierboven.

Of

Over deze tool

CSS-minificatie verwijdert witruimte, opmerkingen en onnodige tekens uit een stylesheet om de grootte ervan te verkleinen voordat deze aan browsers wordt weergegeven. De feitelijke regels zijn ongewijzigd: een verkleinde stylesheet geeft pagina's identiek weer aan de niet-verkleinde broncode. De besparingen komen voort uit het verwijderen van nieuwe regels, overbodige puntkomma's, opmerkingen, stenomogelijkheden in hexadecimale kleuren en snelkoppelingen met nuleenheden (waarbij 0px wordt vervangen door 0).

Op moderne websites met tientallen stijlregels bedraagt de typische reductie 20-40% vergeleken met de niet-verkleinde bron. Gecombineerd met gzip-compressie op de server krimpen de marginale besparingen – gzip comprimeert herhaalde tekst al effectief – maar de combinatie is nog steeds beter dan compressie alleen, vooral wanneer stylesheets in de cache worden opgeslagen en vele malen aan veel bezoekers worden aangeboden.

Deze minifier verwerkt CSS in één keer, waarbij commentaar buiten de url()-waarden wordt verwijderd, witruimte wordt samengevouwen, overtollige puntkomma's worden verwijderd voordat de accolades worden gesloten, een afkorting van nul-eenheden wordt toegepast en hexadecimale kleuren van zes cijfers waar mogelijk worden geconverteerd naar een driecijferige vorm (#ffffff → #fff). De uitvoer blijft geldige CSS die elke browser correct parseert.

Waarom CSS verkleinen

Kleinere CSS-bestanden worden sneller geladen en de weergaveblokkeringstijd neemt af, waardoor de scores voor Eerste Contentful Paint en Grootste Contentful Paint verbeteren. Voor sites waar Core Web Vitals de zoekresultaten beïnvloeden, is elke kilobyte aan weergaveblokkerende CSS die wordt geschoren de moeite waard.

Bandbreedtekosten zijn ook van belang op schaal. Sites die miljoenen paginaweergaven genereren, besparen meetbare hoeveelheden uitgaand verkeer wanneer hun stylesheets 30% kleiner zijn. CDN-rekeningen, mobiel datagebruik en energieverbruik profiteren allemaal lichtjes. Minificatie is in wezen gratis: een eenmalige bouwstap zonder onderhoudskosten.

Hoe te gebruiken

Plak CSS, download de verkleinde versie.

  1. Plak je CSS: Zet een .css-bestand neer of plak de CSS-bron in het invoergebied. De minifier accepteert elke geldige CSS – moderne syntaxis inclusief CSS-variabelen, calc(), grid en flexbox.
  2. Kies opties: Standaardwaarden verwijderen opmerkingen, vouwen witruimte samen en passen veelgebruikte sneltoetsen toe. U kunt specifieke transformaties uitschakelen als u opmerkingen of bepaalde opmaak wilt behouden.
  3. Verkleinen: De minifier leidt de CSS en past elke ingeschakelde transformatie toe. De uitvoer is functioneel identieke CSS met een kleinere omvang.
  4. Gebruik de uitvoer: Kopiëren of downloaden. Vervang de bron-CSS in uw build-uitvoer door de verkleinde versie, of voer minificatie uit als build-stap in uw tool.

Veelvoorkomende gebruiksscenario's

Technische details

CSS-minificatie bestaat voornamelijk uit het conservatief verwijderen van witruimte. Witruimte binnen selectors, declaraties en waarden blijft behouden waar dit significant is; witruimte buiten is samengevouwen. Reacties worden verwijderd, tenzij ze beginnen met /*! (opmerkingen over behoud van licentie).

Veelgebruikte sneltoetsen: 0px, 0em en soortgelijke waarden met nuleenheden worden 0; zescijferige hexadecimale kleuren met gepaarde cijfers (#ffffff, #336699) worden driecijferig (#fff, #369); de laatste puntkomma vóór } wordt verwijderd. Kleurnamen worden niet automatisch naar hexadecimaal geconverteerd omdat hex soms langer is (rood is korter dan #f00 in lengte; #ff0000 is langer dan rood).

De uitvoer moet elke CSS-validator passeren die de invoer accepteert. Browserondersteuning is ongewijzigd: minificatie wijzigt de regels zelf niet, alleen hun tekstweergave.

Beste praktijken

Veelgestelde vragen

Wat wordt door CSS-minificatie verwijderd?
Witruimte (spaties, tabs, nieuwe regels), commentaar (/* ... */), onnodige puntkomma's, overbodige nullen (0,5 → .5), steno-optimalisaties (#ffffff → #fff) en overtollige eenheden (0px → 0).
Is geminimaliseerde CSS veilig te gebruiken in productie?
Ja. Bij minificatie blijven alle CSS-regels, selectors en eigenschapswaarden behouden. De uitvoer is functioneel identiek; browsers interpreteren het op precies dezelfde manier. Het is een standaardpraktijk voor alle productiewebsites.
Hoeveel maatverkleining moet ik verwachten?
Typisch 20-50% voor goed geschreven CSS. Zwaar becommentarieerde code met uitgebreide opmaak kent grotere reducties. Reeds compacte CSS kan slechts 10-15% krimpen.
Moet ik CSS verkleinen als ik gzip gebruik?
Ja, allebei. Gzip comprimeert herhaalde patronen, terwijl minificatie onnodige tekens verwijdert. Samen zorgen ze voor een betere compressie dan elk afzonderlijk. Verkleinde en gzipte CSS is doorgaans 85-95% kleiner dan het origineel.
Moet ik altijd verkleinen?
Voor productie ja. Voor ontwikkelingsbronbestanden is geen leesbare CSS essentieel voor onderhoud. Voer minificatie uit tijdens het bouwen, niet tijdens het bewerken.
Wordt mijn CSS geüpload naar een server?
Nee. De minifier werkt in uw browser.
Hoe verhoudt dit zich tot cssnano of csso?
cssnano en csso zijn PostCSS-plug-ins voor productiebuilds; ze bieden agressievere transformaties, zoals het samenvoegen van overtollige regels. Deze tool omvat basisminimalisatie voor ad-hocgebruik zonder build-installatie.
Vernietigt minificatie bronkaarten?
Minificatie genereert geen bronkaarten; deze tool produceert alleen verkleinde uitvoer. Als u fouten in geminimaliseerde CSS in productie wilt opsporen, genereert u bronkaarten als onderdeel van uw build.