CSS Minificeerder
Minificeer uw CSS-code voor productie
Invoer-CSS
Geminificeerde CSS
Voorbeelden van CSS-minificatie
Geformatteerde CSS is leesbaar; geminificeerde CSS is compact voor productie. Voorbeeld:
Container- en knopstijlen
Geformatteerde invoer:
Geminificeerde uitvoer:
Gebruik Voorbeeld hierboven om meer voorbeeldgegevens te laden.
Wat is een CSS-minificeerder?
CSS-bestanden gebruiken witruimte, opmerkingen en inspringing voor leesbaarheid. In productie laden kleinere bestanden sneller. Een CSS-minificeerder verwijdert onnodige witruimte, opmerkingen en verkort waarden waar veilig om de bestandsgrootte te verkleinen. De W3C CSS-specificaties definiëren de taal; minificatie behoudt het gedrag terwijl het bytes vermindert.
Dit hulpmiddel parseert uw CSS en produceert een compacte versie. Minificatie vindt volledig plaats in uw browser. Er wordt niets naar een server gestuurd. Voor het formatteren van geminificeerde CSS gebruikt u de CSS Formatter. Voor validatie de CSS Validator.
Hoe dit hulpmiddel te gebruiken
Plakken of uploaden CSS
Kopieer uw CSS en plak het in de linker editor. U kunt ook op Uploaden klikken om een .css-bestand te laden. De knop Voorbeeld laadt voorbeeldgegevens. Ongeldige CSS toont een fout.
Bekijk de geminificeerde uitvoer
Het rechterpaneel toont de compacte CSS. Witruimte en opmerkingen worden verwijderd. De uitvoer is geldige CSS—het gedrag blijft behouden. Ongeldige CSS toont een fout in de uitvoer.
Kopiëren of downloaden
Gebruik Kopiëren om het resultaat op het klembord te zetten, of Downloaden om op te slaan. Voor SCSS of Less compileert u eerst met SCSS naar CSS of Less naar CSS, daarna minificeren.
Hoe de minificeerder werkt
Het hulpmiddel verwijdert witruimte, regeleinden en opmerkingen uit uw CSS. Waarden kunnen waar veilig worden verkort (bijv. 0px naar 0, #ffffff naar #fff). De uitvoer blijft geldig volgens de W3C CSS-specificatie. Buildtools zoals cssnano of PostCSS bieden agressievere optimalisatie; dit hulpmiddel biedt snelle, browsergebaseerde minificatie.
Wanneer CSS-minificatie helpt
Productiewebsites profiteren van kleinere CSS-bestanden. Minificatie vermindert de payloadgrootte, verbetert laadtijden en bespaart bandbreedte. Buildtools zoals Webpack, Vite of Parcel minificeren vaak automatisch, maar dit hulpmiddel is handig voor losse bestanden, snelle controles of wanneer geen buildstap beschikbaar is.
E-mailtemplates, ingesloten stijlen of CDN-gehoste CSS hebben vaak handmatige minificatie nodig. Uw stylesheet hier doorlaten geeft productieklare uitvoer. Voor het toevoegen van vendorprefixen vóór minificatie gebruikt u de CSS Prefixer. Voor het formatteren van geminificeerde CSS terug naar leesbare vorm de CSS Formatter.
Veelgestelde vragen
Breekt minificatie CSS?
Nee. Alleen witruimte en opmerkingen worden verwijderd. Selectors, eigenschappen en waarden blijven hetzelfde. De uitvoer is geldige CSS. Sommige minificeerders kunnen waarden verkorten (bijv. 0px naar 0)—het gedrag blijft behouden.
Zijn mijn gegevens privé?
Ja. Minificatie vindt volledig plaats in uw browser. Er worden geen gegevens naar een server gestuurd.
Hoe zit het met source maps?
Dit hulpmiddel genereert geen source maps. Voor productiebuilds met source maps gebruikt u een buildtool zoals PostCSS, cssnano of de minificeerder van uw bundler.
Ondersteunt het SCSS of Less?
Dit hulpmiddel minificeert gewone CSS. Voor SCSS of Less compileert u eerst met SCSS naar CSS of Less naar CSS, daarna minificeert u de uitvoer.
Hoeveel kleiner wordt het?
Typisch 20–40% kleiner afhankelijk van witruimte en opmerkingen. Zwaar gecommentarieerde of geformatteerde CSS kan grotere besparingen opleveren. De exacte reductie hangt af van uw invoer.
Gerelateerde hulpmiddelen
Voor de CSS-specificatie: W3C CSS. MDN CSS is de referentie. cssnano en PostCSS bieden geavanceerde build-time minificatie.