Haal CSS-commentaar en extra spaties weg

Webontwikkelaars gebruiken CSS-minifier wanneer ze compacte code voorbereiden voor levering of een gecontroleerde vergelijking.

Haal CSS-commentaar en extra spaties weg en krijg compacte code voor de volgende stap. Gebruik het gratis rechtstreeks in je browser, zonder account.

Hoe te gebruiken

Sleep uw stylesheet naar het invoergebied, of importeer het bestand dat u wilt comprimeren in plaats van het met de hand te plakken.
Start de minifier: opmerkingen verdwijnen en witruimte zonder syntactische rol wordt verwijderd.
Vergelijk de grootte van de uitvoer met uw oorspronkelijke bestand om te zien hoeveel de bewerking daadwerkelijk heeft bespaard.
Kopieer de compacte code naar uw project en herlaad de pagina om te bevestigen dat de lay-out niet is verschoven.
Bewaar de leesbare versie op een veilige plek, want het ingepakte bestand is bedoeld voor levering en niet voor bewerking.

Voorbeeld

Het voorbeeld bevat twee regels die over meerdere regels zijn geschreven, met uitgespreide marges, een achtergrond en padding. Vergelijk na de bewerking de twee teksten naast elkaar en controleer dat elke selector, eigenschap en waarde nog steeds in de compacte versie voorkomt.

Invoer

body {
    color: #17211d;
    margin: 0;
}

.card {
    padding: 12px;
    background: #ffffff;
}

Resultaat

body{color:#17211d;margin:0} .card{padding:12px;background:#ffffff}

Limieten en formaten

Opmerkingen worden verwijderd, dus elke notitie die u erin hebt achtergelaten komt niet terug in de uitvoer.
Compacte code is moeilijk leesbaar en lastig te repareren, dus bewaar het origineel voor toekomstige wijzigingen.
Ongebruikte regels worden niet gedetecteerd en waarden worden niet herschreven, dus de besparing komt vooral van witruimte en opmerkingen.
Test het resultaat in de browsers die u ondersteunt, vooral als het stylesheet ongebruikelijke selectors of een nooit gesloten opmerking gebruikt.

Waar de verwerking gebeurt

Het werk gebeurt in uw browser: de CSS die u plakt blijft daar, wordt nergens naartoe gestuurd en verdwijnt wanneer het tabblad wordt gesloten. Dat betekent dat u het stylesheet van een klant kunt comprimeren zonder dat het uw computer verlaat.

Veelgestelde vragen

Laadt een geminificeerd bestand sneller?

Het weegt minder omdat opmerkingen en overtollige witruimte verdwenen zijn, en een kleiner bestand downloadt sneller. Hoeveel u daarvan merkt, hangt af van de grootte van het stylesheet en van al het andere dat de pagina moet ophalen.

Kan ik de minificatie achteraf ongedaan maken?

Niet vanaf deze pagina. Opmerkingen en de oorspronkelijke inspringing gaan verloren in de bewerking, dus de leesbare lay-out kan niet worden herbouwd. Werk met een kopie, of houd uw geformatteerde bestand in versiebeheer voordat u het vervangt.

Waarom bevat de uitvoer nog steeds spaties?

Spaties die twee waarden, twee selectors of de woorden binnen een eigenschap scheiden, maken deel uit van de syntaxis. Alleen witruimte zonder grammaticale rol wordt verwijderd, waardoor het gecomprimeerde resultaat nog steeds als geldige CSS wordt geparseerd.