Hoe het werkt
De verkleiner verwijdert /* commentaren */, vouwt reeksen witruimte samen tot één enkele spatie, verwijdert spaties rond structurele interpunctie zoals { } : ; , >, en laat de laatste puntkomma vóór een accolade sluiten. Het hernoemt selectors niet, voegt geen regels samen en herschikt de cascade niet.
- Een conservatieve minifier: het verwijdert geen ongebruikte regels en herschrijft geen waarden. Test het stylesheet daarna altijd opnieuw.
Waarom het ertoe doet
Elke kilobyte render-blokkerende CSS vertraagt de eerste verf. Minificatie is de goedkoopste winst die beschikbaar is na het verwijderen van ongebruikte regels, en een tool die alleen aantoonbaar overtollige tekens raakt, kan worden vertrouwd in een bouwstap zonder uw stylesheet opnieuw te definiëren.
Een uitgewerkt voorbeeld
Een regel geschreven als .card { color: red; opvulling: 10px 20px; } wordt .card{color:red;padding:10px 20px}, waardoor enkele tientallen bytes per regel worden bespaard en nog veel meer in een echte stylesheet.
Veel voorkomende fouten
- Het verwijderen van spaties rond + en - binnen calc(), wat volgens de specificatie vereist is.
- SCSS of LESS verkleinen in plaats van gecompileerde CSS.
- De visuele controle overslaan na het verkleinen.
Praktische tips
Houd de niet-verkleinde broncode onder versiebeheer en verklein deze als build-uitvoer. Als u aangepaste eigenschappen met fallbacks gebruikt, vergelijk dan de berekende stijlen in DevTools ervoor en erna: de cascade blijft behouden, maar een enkele verloren ruimte kan de manier veranderen waarop een waarde wordt geparseerd.
Hoe het te gebruiken
- Open het gereedschap. Alles draait op uw browsertabblad.
- Plak of typ uw invoer en kies vervolgens de gewenste actie.
- Controleer het resultaat en kopieer het met één klik.
Veelgestelde vragen
Verwijdert het ongebruikte CSS-regels?
Nee. Het verwijdert opmerkingen en overbodige witruimte. Voor detectie van ongebruikte regels is een volledige pagina-audit vereist.
Waarom stopte calc() met werken na het verkleinen?
Spaties rond + en - binnen calc() zijn vereist door de CSS-specificatie. Test het stylesheet opnieuw na het verkleinen.
Kan het SCSS of MINDER verkleinen?
Nee. Het verwacht gewone CSS; preprocessors hebben hun eigen bouwstappen.
Is deze tool echt gratis?
Ja. Er is geen account, geen betaalmuur en geen gebruikslimiet. Tools App wordt gefinancierd door aumenso, de studio erachter.
Is er iets dat ik invoer geüpload?
Nee. De tool wordt uitgevoerd op uw browsertabblad; wat u invoert, wordt nooit naar ons verzonden en nooit opgeslagen.