Syftet med formatering och minifiering av CSS
När du arbetar med webbdesign och webbutveckling spelar stilmallar en avgörande roll för hur en webbplats presenteras. Verktyget CSS-formaterare & minifierare är skapat för att hantera två olika skeden i denna process: att göra CSS-kod mer läsbar och lättarbetad, eller att kondensera koden för att göra filstorleken så liten som möjligt inför driftsättning.
Genom att använda detta verktyg kan du enkelt klistra in din CSS-kod och välja hur den ska bearbetas. Efter processen kan du kopiera det färdiga resultatet direkt till urklipp eller ladda ner det som en färdig fil. Verktyget riktar sig till flera olika målgrupper, däribland frontend-utvecklare, personer som underhåller befintliga stilmallar, samt användare som snabbt behöver läsa komprimerad CSS eller strukturera om röriga stilmallar för att kunna tyda dem. Det är även optimalt för användare som vill krympa sina stilmallar inför driftsättning utan att ändra hur webbsidan renderas.
Hur blanksteg, kommentarer och filstorlek påverkar din webbplats
När en människa skriver CSS används ofta indrag, blanksteg och kommentarer för att göra koden överskådlig och begriplig. För en webbläsare är dessa tecken dock helt överflödiga. Genom att ta bort onödiga blanksteg och kommentarer kan filstorleken reduceras markant, vilket i sin tur leder till snabbare laddningstider för webbsidor.
När verktyget formaterar CSS-koden (beautify) görs det motsatta: koden struktureras om med nya indrag och stilar sprids ut för att maximera läsbarheten. När verktyget minifierar koden rensas istället alla onödiga blanksteg och kommentarer bort, samtidigt som specifika värden kortas ner. Exempelvis kan färgdefinitioner skrivas om till kortare varianter, såsom att #ffffff omvandlas till #fff.
Det finns dock tillfällen då vissa kommentarer måste bevaras, exempelvis upphovsrättsinformation eller licensvillkor. Verktyget har stöd för detta: kommentarer som är markerade som /*! … */ behålls alltid i den minifierade koden, oavsett vilken komprimeringsinställning du väljer.
Skillnaden mellan säker och optimerad komprimering
När du ska minifiera din CSS erbjuder verktyget två olika komprimeringsnivåer under inställningen Komprimering:
- Säker (Safe): Detta läge tar endast bort blanksteg och kommentarer samt förkortar värden. Varje enskild regel lämnas exakt på den plats där den ursprungligen skrevs. I detta läge ändras inte heller leverantörsprefix (vendor prefixes) eller modern syntax.
- Optimerad (Optimized): Detta läge går ett steg längre för att skapa en så liten fil som möjligt. Verktyget slår då ihop dubbletter av selektorer och regler. Eftersom regler slås ihop kan detta förändra den ursprungliga ordningen på dina regler.
Valet av komprimeringsläge har betydelse för hur källkodsordningen i din CSS hanteras. Eftersom ordningen på reglerna i en stilmall kan påverka hur stilar tillämpas i webbläsaren, innebär det säkra läget att du kan minska filstorleken utan att riskera att ändra sidans rendering. Det optimerade läget ger en ännu mindre filstorlek, men kan ändra ordningen på reglerna.
Verktygets indata, gränser och inställningar
För att använda verktyget anger du din CSS i fältet för CSS-indata. Verktyget har en storleksgräns där indata kan vara maximalt 500 000 tecken.
Innan du kör processen kan du anpassa följande parametrar:
- Indrag: Välj mellan 2 mellanslag (2 spaces), 4 mellanslag (4 spaces) eller tabulator (tab) för hur koden ska struktureras vid formatering.
- Komprimering: Välj mellan Säker eller Optimerad för att bestämma hur hårt koden ska minimeras.
Om du försöker bearbeta en stilmall som överskrider storleksgränsen på 500 000 tecken, kommer verktyget att visa felmeddelandet: "Denna stilmall är för stor för att bearbetas. Prova med en mindre.".
Resultat, statistik och felhantering
När verktyget har bearbetat din CSS-kod presenteras resultatet tillsammans med detaljerad statistik över den genererade koden:
- Rader: Visar det totala antalet rader i den bearbetade koden.
- Tecken: Visar det exakta antalet tecken i den bearbetade koden.
- Storlek: Visar den resulterande storleken i UTF-8-byte.
- Minifierad —
{pct}% mindre: Denna indikator visas när koden har minifierats och anger i procent hur mycket filstorleken har reducerats.
Du kan enkelt spara ditt resultat genom att klicka på knappen Ladda ner, vilket laddar ner den bearbetade koden som en fil med namnet styles.css. Du kan också använda knappen Kopiera för att kopiera koden direkt till urklipp.
Om något går fel under bearbetningen har verktyget inbyggd felhantering:
- Om indatafältet är tomt visas meddelandet: "Kunde inte hitta någon CSS att minifiera – kontrollera indata för syntaxfel.".
- Om koden inte kan bearbetas på grund av felaktigt format visas meddelandet: "Kunde inte bearbeta denna CSS.".
- Om indata innehåller text men minifieraren resulterar i en helt tom textsträng, indikerar detta ett syntaxproblem i din ursprungliga CSS-kod.
Integritet och lokal databehandling
När du använder detta verktyg bearbetas din CSS-kod direkt i din egen webbläsare. Formateringen och minifieringen sker lokalt på din enhet, vilket innebär att ingenting laddas upp till BroBroGo.
Vanliga frågor
Vad är skillnaden mellan formatering och minifiering?
Formatering (beautify) lägger till indrag och radbrytningar i dina stilar så att de blir enkla att läsa och redigera. Minifiering gör motsatsen – det tar bort blanksteg och kommentarer som webbläsaren inte behöver samt förkortar värden som färger, vilket gör filen mindre så att den laddas snabbare. Formatera medan du arbetar, minifiera innan du publicerar.
Vad gör komprimeringsinställningarna Säker och Optimerad?
Säker (Safe) tar endast bort blanksteg och kommentarer samt förkortar värden, vilket lämnar varje regel exakt där du skrev den. Optimerad (Optimized) går längre och slår ihop dubbletter av selektorer och regler för en ännu mindre fil – detta kan ändra ordningen på regler, så på stilmallar som är beroende av källkodsordning är det värt en snabb kontroll före publicering. Kommentarer som är markerade med /*! … */ behålls i båda lägena.
Kommer minifieringen att ändra hur min sida ser ut?
I säkert läge (Safe) blir det ingen skillnad – dina stilar renderas exakt likadant. Det tar bort blanksteg, rensar vanliga kommentarer och skriver om värden till kortare motsvarigheter (som #ffffff till #fff), men ändrar aldrig dina leverantörsprefix (vendor prefixes) eller modern syntax. Det optimerade läget (Optimized) slår även ihop regler, vilket ser identiskt ut på nästan alla stilmallar men kan vara värt att verifiera om din CSS är beroende av regelordningen.