CSS-formaterare och minifierare

Så formaterar eller minifierar du CSS

1. Klistra in din stilmall, eller klicka på Öppna en fil för att läsa in en .css-fil (upp till 10 MB).
2. Välj Indrag (2 mellanslag, 4 mellanslag eller tabb) och om du vill ha Tom rad mellan regler.
3. Klicka på Formatera (beautify) för att få läsbar kod, eller på Minifiera för att få den minsta versionen.
4. Vid minifiering låter du Slå ihop regler vid minifiering vara ikryssad för bästa resultat, och Behåll /*! kommentarer */ ikryssad för att bevara licenshuvuden.
5. Kopiera eller ladda ner resultatet. Statusraden visar storleken före och efter i byte, och hur många procent du sparat.

Om en klammer saknas stoppar verktyget och talar om på vilken rad den ostängda { eller den överflödiga } finns, i stället för att ge trasig utdata.

Formatera: läsbar och konsekvent CSS

Formatera (beautify) använder js-beautify, formateraren som finns i många kodredigerare. Den lägger varje deklaration på en egen rad, gör indrag för innehållet i varje regel och i at-regler som @media och @supports, skriver varje selektor i en grupp på en egen rad och lägger till ett mellanslag efter kolonet i varje deklaration. Befintliga tomma rader behålls (högst en i rad), så att de logiska avsnitten i filen syns. Formateraren ändrar aldrig värden, reglernas ordning eller selektorernas betydelse: den ändrar bara blanksteg.

Det är praktiskt när du vill läsa minifierad CSS från en webbplats, granska en stilmall som genererats av ett verktyg eller städa upp en fil som redigerats av flera personer med olika vanor.

Minifiera: mindre CSS med csso

Minifiera använder csso (CSS Optimizer), en strukturell minifierare. Förutom att ta bort blanksteg och kommentarer skriver den om stilmallen till en likvärdig, kortare form:

• färger kortas (#ff0000 blir red, #ffffff blir #fff);
• enheter och nollor förenklas (0px blir 0, 0.5em blir .5em);
• dubbla deklarationer tas bort och kortformsegenskaper slås ihop när det är säkert;
• med Slå ihop regler vid minifiering grupperas regler med identiska deklarationer (a{color:red} b{color:red} blir a,b{color:red}) och deklarationer som skrivs över tas bort.

Omstruktureringen är säker för vanliga stilmallar, men den flyttar deklarationer. Om din CSS är beroende av en mycket specifik kaskadordning, till exempel webbläsarhack, avmarkerar du alternativet: då komprimerar csso bara varje regel där den står.

Kommentarer tas bort, utom ”viktiga” kommentarer som börjar med /*!, som ofta används för licenser. Avmarkera Behåll /*! kommentarer */ för att ta bort även dem.

Storlek före och efter

Statusraden jämför storleken på indata och resultat i UTF-8-byte. Formaterad kod blir oftast större än originalet, medan minifierad kod brukar spara 20 till 50 % på handskriven CSS. Tänk på att servrar dessutom komprimerar filer med gzip eller Brotli, så besparingen vid överföringen är mindre än den råa siffran. Minifiering minskar ändå tolkningstiden och storleken på cachade filer.