CSS-minificator

De CSS-minificator is een gratis tool die overbodige tekens uit CSS verwijdert en het verkleinde stylesheet teruggeeft, inclusief het aantal tekens voor en na de bewerking.

Wat doet CSS-minificatie?

CSS-minificatie verlaagt het aantal tekens in een stylesheet door opmaak te verwijderen die browsers niet nodig hebben. Het gaat meestal om inspringingen, regeleinden, opmerkingen en optionele spaties rond leestekens.

De browser ontvangt nog steeds dezelfde CSS-regels, selectors en declaratiewaarden. Het beoogde visuele resultaat hoort ongewijzigd te blijven, terwijl het bestand dat naar de browser wordt verzonden kleiner is. Het praktische voordeel van CSS-minificatie hangt af van het oorspronkelijke bestand, HTTP-compressie en browsercaching. Bij een goed gecomprimeerd stylesheet kan de afname van het aantal verzonden bytes beperkt zijn.

Minificatie is nuttig vóór implementatie, bij het onderzoeken van buitensporig grote CSS van derden of als je wilt nagaan hoeveel ontwikkelopmaak aan de bestandsgrootte bijdraagt. Het is iets anders dan optimalisatie waarbij ongebruikte selectors worden verwijderd, gelijkwaardige regels worden samengevoegd of declaraties worden herschreven. Deze tool beweert zulke bredere bewerkingen niet uit te voeren.

Hoe gebruik ik de CSS-minificator?

Plak een stylesheet in het veld CSS en voer de tool uit. Kopieer daarna het resultaat uit Geminificeerde CSS naar de juiste build- of implementatieworkflow. Bewaar het leesbare CSS-bronbestand en vervang dit niet definitief door de verkleinde versie.

1. Begin met de CSS-broncode die je website of applicatie gebruikt.
2. Controleer vóór de minificatie of de CSS correct wordt geparseerd.
3. Plak de code in CSS en voer de tool uit.
4. Vergelijk CSS-tekens met Geminificeerde CSS-tekens.
5. Test het resultaat op een testpagina, inclusief responsieve weergaven, afdrukstijlen en interactieve onderdelen.

De CSS-minificatie vindt plaats op de server. De CSS die je invoert, wordt via HTTPS naar de server verzonden en niet opgeslagen. Bevat het stylesheet vertrouwelijke URL's, interne hostnamen of ander gevoelig materiaal, ga dan na of verzending naar een servertool past binnen het gegevensverwerkingsbeleid van je organisatie.

Hoe lees ik het resultaat?

Het resultaat bevat de aangepaste CSS en twee aantallen tekens. Zo kun je de uitvoer controleren en de afname direct zien. CSS-tekens is de lengte van de ingevoerde tekst, terwijl Geminificeerde CSS-tekens de lengte na minificatie aangeeft.

De aantallen zijn tekenaantallen die met een multibyte-bewuste lengtefunctie zijn berekend. Beschouw ze niet als een exacte voorspelling van de hoeveelheid gegevens die via het netwerk wordt verzonden. UTF-8-tekens kunnen uit meer dan één byte bestaan en compressie met Brotli of gzip kan de via HTTP verzonden grootte aanzienlijk veranderen.

Voor deze tool wordt geen afzonderlijk veld voor validatie of fouten weergegeven. Gebruik hem daarom niet als CSS-validator. Veelvoorkomende problemen, zoals niet-overeenkomende accolades, een ontbrekende dubbele punt, een niet-afgesloten tekenreeks, onjuist gevormde opmerkingen of ongeldige nesting, moet je controleren met de ontwikkelaarstools van de browser, een linter of een validator die rekening houdt met de standaarden. Ongeldige CSS kan compacte uitvoer opleveren die toch niet werkt zoals bedoeld.

Kleine voorbeelden van CSS-minificatie

Een gebruikelijke verkleinde versie verwijdert de opmaak, maar behoudt de regel zelf.

CSS

p { color: red; }

Geminificeerde CSS

p{color:red}

In dit voorbeeld bevat de leesbare invoer 17 tekens en de compacte vorm 12. Spaties en leestekens binnen tekenreeksen tussen aanhalingstekens moeten onderdeel van de waarde blijven.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Geminificeerde CSS

.notice,.warning{color:#c00;margin:0 1rem}

Het is niet veilig om zonder onderscheid elke spatie te verwijderen. Witruimte kan een descendant combinator voorstellen en voor rekenkundige operatoren in functies zoals calc() gelden vereisten voor witruimte. Ook tekenreeksen, data-URL's, escaped identifiers en waarden van custom properties moeten met kennis van de syntaxis worden verwerkt.

Tekens met accenten en niet-Latijnse tekens kunnen voorkomen in tekenreeksen en, binnen de regels voor CSS-identifiers, in selectors. Getallen, decimale punten, percentages en eenheden maken deel uit van de syntaxis en zijn geen decoratieve tekst. Je kunt ze dus niet zomaar inkorten zonder de declaratie te begrijpen. Een leeg stylesheet bevat geen CSS om te verkleinen. Voor zeer grote stylesheets is een minificator tijdens het buildproces meestal eenvoudiger te herhalen en te controleren dan tekst via een online formulier te kopiëren.

Wanneer is CSS-minificatie niet de moeite waard?

Minificatie opnieuw uitvoeren is meestal niet zinvol als een bestand al verkleind is of als compacte productieasset is gegenereerd. Een tweede minificatieronde levert mogelijk weinig of niets op en voegt wel een extra bewerking toe aan het releaseproces.

• Maak CSS die alleen door een browser of buildsysteem wordt gelezen niet eerst leesbaar om deze daarna opnieuw te verkleinen.
• Gebruik minificatie niet als vervanging voor het verwijderen van ongebruikte frameworkregels of dubbele declaraties.
• Verwacht niet dat een lager aantal tekens renderblokkerende verzoeken, cacheproblemen of traag ladende lettertypen aan het licht brengt.
• Gooi de opgemaakte broncode niet weg, zeker niet als je problemen met specificiteit, cascadelagen of mediaquery's moet opsporen.

Wordt CSS automatisch gebundeld, gebruik dan de minificator binnen die pipeline, zodat iedere release dezelfde instellingen volgt. Als je gerelateerde assets handmatig implementeert, kunnen de HTML-minificator en JS minificator dezelfde bewerking uitvoeren voor die bestandstypen.

Veelgestelde vragen

Verandert CSS-minificatie de specificiteit van selectors?

Correcte minificatie verandert de specificiteit van selectors niet, omdat de onderdelen en volgorde van de selectors gelijk moeten blijven. Controleer complexe selectors toch zorgvuldig als de broncode escapes, nieuwere pseudoklassen of gegenereerde syntaxis gebruikt die een oudere minificator mogelijk niet begrijpt.

Kan ik CSS custom properties verkleinen?

Je kunt custom properties meenemen, maar hun waarden kunnen tokens en spaties behouden voor latere vervanging met var(). Test declaraties met berekeningen, fallbackwaarden of ingesloten tekenreeksen in de browsers die je project ondersteunt. Ga er niet van uit dat elke schijnbaar overbodige spatie kan worden verwijderd.

Maakt de tool een source map?

Er wordt geen source-mapresultaat weergegeven. Als je voor het opsporen van productieproblemen compacte CSS moet kunnen herleiden tot Sass, Less of een andere bron, genereer dan het verkleinde bestand en de bijbehorende source map met de compiler of bundler die de oorspronkelijke bestandsstructuur kent.

Blijven licentieopmerkingen in de uitvoer staan?

Ga er niet van uit dat CSS-opmerkingen behouden blijven. Vereist de licentie van een dependency dat bij verspreide code een kennisgeving wordt meegeleverd, bewaar die kennisgeving dan afzonderlijk of controleer de gegenereerde uitvoer vóór de release.

Kan minificatie kapotte CSS repareren?

Nee. Minificatie verwijdert overbodige tekens, maar repareert geen ongeldige selector, niet-ondersteunde eigenschap, ontbrekende asset of onjuiste cascade. Los eerst parsewaarschuwingen en visuele regressies in de broncode op.

Controles vóór implementatie

Sla de verkleinde uitvoer op als afzonderlijke productieasset, controleer of URL's en inhoud tussen aanhalingstekens intact zijn en laad het bestand op een testpagina terwijl de browserconsole geopend is. Vergelijk representatieve pagina's bij smalle en brede viewportafmetingen. Controleer daarna of je server het verwachte inhoudstype, cachebeleid en de juiste HTTP-compressie toepast.