Ctrl K

CSS minify online

Minimaliseer CSS in je browser: niets wordt geüpload, er is geen limiet op de grootte en je ziet de besparing in tekens en procenten. Commentaar en overbodige spaties verdwijnen; je stijlen werken precies hetzelfde.

Zo werkt het

  1. Plak je code

    Plak de code in het linkervak of open een bestand. Geen code bij de hand? Klik op Voorbeeld.

  2. Direct resultaat

    De uitkomst verschijnt terwijl je typt. Is er een fout, dan zie je op welke regel en welk teken.

  3. Kopieer of download

    Kopieer het resultaat met één klik of sla het op als bestand voor je editor of project.

Wat wordt er verwijderd?

Commentaar, regeleinden, inspringing en de spaties rond {, }, :, ; en ,. De laatste puntkomma van elk blok verdwijnt ook. Spaties die ertoe doen blijven: in strings, in url(), in calc(100% - 2rem) (waar de spaties rond - verplicht zijn) en tussen de delen van een waarde zoals margin: 0 auto.

Licentiecommentaar

Commentaar dat met /*! begint bevat meestal een licentie die moet blijven staan. Zet de optie aan om commentaar dat met /*! begint te behouden en het blijft in de uitvoer.

Hoeveel bespaar je?

Dat hangt af van hoe de stylesheet is geschreven. Een bestand met veel commentaar en inspringing wordt vaak een kwart tot een derde kleiner; een bestand dat al compact was bespaart veel minder. De groottesamenvatting geeft de exacte cijfers voor jouw CSS. Bedenk dat webservers CSS normaal ook met gzip of Brotli comprimeren, dus de echte besparing over het netwerk is kleiner dan je hier ziet, maar de twee tellen bij elkaar op.

Wat minificeren niet doet

Deze tool haalt witruimte en commentaar weg. Hij voegt geen selectors samen, verwijdert geen ongebruikte regels en hernoemt niets; dat doen bundlers en tools als cssnano of Lightning CSS. Heb je een buildproces, zet minificatie dan daar. Voor een snelle klus, zoals een fragment voor een e-mailsjabloon of een CMS-veld dat maar één regel accepteert, is deze pagina de snelste weg.

Test het resultaat

Kijk na het minificeren één keer naar de pagina. Het meest voorkomende probleem is een ontbrekende puntkomma in de bron die de browser vroeger vergaf, maar die nu twee regels samenvoegt. Maak het resultaat weer netjes met de CSS beautify als je dat wilt opsporen.

Zie ook: CSS Beautify · HTML Formatter.

Veelgestelde vragen

Is geminimaliseerde CSS veilig?

Ja, als het origineel geldig is. Strings, url()-waarden en spaties in calc() blijven precies behouden.

Blijft licentiecommentaar behouden?

Commentaar dat met /*! begint kun je met de bijbehorende optie bewaren, zodat licenties in het bestand blijven.

Heb ik gzip nog nodig?

Ja. Minificeren en servercompressie werken samen; gebruik beide.

Wordt mijn CSS geüpload?

Nee. Hij wordt in je browser geminimaliseerd en nergens heen gestuurd.