CSS formatteren en minifyen

Zo formatteer of minify je CSS

1. Plak je stylesheet, of klik op Bestand openen om een .css-bestand te laden (maximaal 10 MB).
2. Kies de Inspringing (2 spaties, 4 spaties of een tab) en of je een Lege regel tussen CSS-regels wilt.
3. Klik op Formatteren (beautify) voor leesbare code, of op Minifyen voor de kleinst mogelijke versie.
4. Laat bij het minifyen CSS-regels samenvoegen bij minifyen aangevinkt voor het beste resultaat, en /*! commentaar */ behouden aangevinkt om licentiekoppen te bewaren.
5. Kopieer of download het resultaat. De statusregel toont de grootte voor en na, in bytes, en het percentage dat je bespaart.

Ontbreekt er een accolade, dan stopt de tool en vertelt hij op welke regel de niet-gesloten { of de overtollige } staat, in plaats van kapotte uitvoer te geven.

Formatteren: leesbare, consistente CSS

Formatteren (beautify) gebruikt js-beautify, de formatter die in veel code-editors zit. Hij zet elke declaratie op een eigen regel, laat de inhoud van elke regel en van at-rules zoals @media en @supports inspringen, schrijft elke selector van een groep op een eigen regel en zet een spatie na de dubbele punt van elke declaratie. Bestaande lege regels blijven staan (maximaal één achter elkaar), zodat de logische secties van je bestand zichtbaar blijven. De formatter verandert nooit waarden, de volgorde van regels of de betekenis van selectors: hij past alleen witruimte aan.

Dat is handig om geminifyde CSS van een website te lezen, om een door een tool gegenereerd stylesheet na te kijken, of om een bestand op te schonen dat door meerdere mensen met verschillende gewoontes is bewerkt.

Minifyen: kleinere CSS met csso

Minifyen gebruikt csso (CSS Optimizer), een structurele minifier. Naast het weghalen van witruimte en commentaar herschrijft hij het stylesheet in een gelijkwaardige, kortere vorm:

• kleuren worden ingekort (#ff0000 wordt red, #ffffff wordt #fff);
• eenheden en nullen worden vereenvoudigd (0px wordt 0, 0.5em wordt .5em);
• dubbele declaraties worden verwijderd en shorthand-eigenschappen worden samengevoegd als dat veilig is;
• met CSS-regels samenvoegen bij minifyen worden regels met identieke declaraties gegroepeerd (a{color:red} b{color:red} wordt a,b{color:red}) en overschreven declaraties weggelaten.

Herstructureren is veilig voor normale stylesheets, maar het verplaatst declaraties. Leunt je CSS op een heel specifieke cascadevolgorde, bijvoorbeeld voor browserhacks, vink de optie dan uit: csso comprimeert dan alleen elke regel op zijn plek.

Commentaar wordt verwijderd, behalve “belangrijk” commentaar dat begint met /*!, wat vaak voor licenties wordt gebruikt. Vink /*! commentaar */ behouden uit om ook dat te verwijderen.

Grootte voor en na

De statusregel vergelijkt de grootte van de invoer en van het resultaat in UTF-8-bytes. Geformatteerde code is meestal groter dan het origineel; geminifyde code bespaart bij handgeschreven CSS doorgaans 20 tot 50%. Bedenk dat servers bestanden ook met gzip of Brotli comprimeren, dus de besparing bij het overdragen is kleiner dan het ruwe getal. Minifyen verkort wel de parsetijd en de grootte van bestanden in de cache.