CSS minifier online: compacte CSS in je browser
Deze CSS minifier maakt je stylesheet kleiner door commentaar, regeleinden en elke spatie die de browser niet nodig heeft weg te halen. Plak je CSS hierboven en de compacte versie verschijnt binnen een fractie van een seconde, met precies het aantal bytes dat je bespaart. Niets te installeren, geen buildstap, en wat je plakt wordt nooit geüpload: alles gebeurt online, in je browser.
CSS minify online in drie stappen
- Plak of typ je CSS in het vak Ruwe CSS.
- Kort nadat je stopt met typen, verschijnt de compacte CSS eronder, samen met de oorspronkelijke grootte, de nieuwe grootte en het bespaarde percentage. Er is geen knop om op te drukken.
- Tik op Kopiëren naar klembord om het resultaat in je project te plakken, of op .min.css downloaden om het als bestand op te slaan.
Foutieve CSS laat de tool nooit vastlopen: de code wordt bewerkt zover die te lezen is. Je kunt dus halfafgemaakte code plakken en die daarna verbeteren.
Wat de CSS minifier weghaalt en wat blijft
Elke regel werkt daarna precies zoals voorheen; alleen wat er voor menselijke ogen staat verdwijnt. Commentaar gaat weg, witruimte wordt samengevoegd, spaties rond accolades, dubbele punten en komma's verdwijnen, en de laatste puntkomma voor een sluitende accolade valt weg. Tekst tussen aanhalingstekens, url()-waarden en escapetekens worden ongewijzigd overgenomen, dus "a b" houdt zijn spatie.
Voor: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Na: .btn{color:#fff;margin:0 auto}
CSS compressor: hoeveel kleiner wordt je bestand?
Dat hangt af van hoeveel commentaar en witruimte het bestand bevat. Een stylesheet met veel commentaar en nette inspringing wordt vaak een kwart tot de helft kleiner. Onder het resultaat zie je de oorspronkelijke grootte, de nieuwe grootte en het exacte percentage dat je bespaart.
Een kleiner bestand is sneller gedownload en de pagina staat eerder in beeld. Wil je nog minder versturen, dan kan je webserver het compacte bestand ook met gzip of Brotli uitleveren.
Licentiecommentaar houden of weghalen
Commentaar dat begint met /*! bevat meestal de licentie of copyrightvermelding van een bibliotheek. Dat blijft standaard staan, omdat veel licenties eisen dat die vermelding met de code meegaat.
Vink Licentiecommentaar behouden onder het invoervak uit om ook dat commentaar weg te halen en het kleinst mogelijke bestand te krijgen.
Is compacte CSS veilig voor een live site?
Ja: er ontbreken alleen tekens die niets veranderen aan hoe de browser de stylesheet leest. Bewaar je leesbare bestand als bron en zet de .min.css-versie online, bijvoorbeeld style.css naast style.min.css.
Veelgestelde vragen
Wat doet een CSS minifier?
Een CSS minifier haalt alles weg wat de browser niet nodig heeft om je stijlen te lezen: commentaar, regeleinden, inspringing, spaties rond accolades, dubbele punten en komma's, en de laatste puntkomma van elke regel. Het resultaat werkt precies als het origineel, maar is kleiner en dus sneller gedownload.
Hoe gebruik ik deze CSS minifier online?
Plak je CSS in het vak ‘Ruwe CSS’. De compacte versie verschijnt er even later onder, samen met het aantal bespaarde bytes. Tik op ‘Kopiëren naar klembord’ om hem in je project te plakken, of op ‘.min.css downloaden’ om hem als bestand op te slaan.
Is een CSS compressor hetzelfde als een CSS minifier?
In het dagelijks gebruik wel: beide maken de tekst kleiner zonder te veranderen wat hij doet. Plak de stylesheet hier en kopieer of download het resultaat. Voor nog minder dataverkeer kan je webserver het bestand daarnaast met gzip of Brotli versturen.
Hoe haal ik al het commentaar uit mijn CSS?
Plak je CSS en vink ‘Licentiecommentaar behouden’ uit. Dan verdwijnt al het commentaar, ook wat met /*! begint. Laat je de optie aangevinkt, dan blijven alleen die licentievermeldingen staan.
Is compacte CSS veilig in productie?
Ja. Er verdwijnen alleen tekens die geen invloed hebben op hoe de browser de stylesheet leest. Tekst tussen aanhalingstekens, url()-waarden en escapetekens blijven precies zoals je ze schreef. Bewaar je originele bestand als bron en gebruik de .min.css-versie online.
Wat is een .min.css-bestand?
Een .min.css-bestand is de compacte kopie van een stylesheet, volgens afspraak zo genoemd zodat hij naast de leesbare bron staat, zoals style.css en style.min.css. Bewerk het leesbare bestand en link op je live site naar het .min.css-bestand.
Kan ik compacte CSS weer leesbaar maken?
Niet precies zoals het was, want de oorspronkelijke opmaak is weg, maar wel weer leesbaar. Plak de compacte code in de Code Formatter om hem opnieuw in te laten springen. Weggehaald commentaar komt niet terug, dus bewaar altijd je bronbestand.
Wat gebeurt er met CSS met fouten?
De tool loopt niet vast. Je CSS wordt bewerkt zover die te lezen is, dus je kunt onafgemaakte code plakken en later verbeteren.
Aanbevolen
-
Amazon Basics opvouwbare laptopstandaardZet je scherm op ooghoogte terwijl je je code opschoont.
-
Web Performance Fundamentals (Nadia Makarevich)Kleinere CSS is pas het begin: leer de hele site te meten en te versnellen.
-
Logitech MX Master 3S draadloze muisNauwkeurig en stil voor lange dagen front-end-werk.
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
