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.
Verklein en comprimeer CSS-stylesheets direct in uw browser. Verwijder opmerkingen, vouw witruimte samen en verklein de bestandsgrootte. Gratis en privé.
Ondersteunt .css-bestanden. Of plak je CSS hierboven.
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.
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.
Plak CSS, download de verkleinde versie.
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.