Hur det fungerar
Minifieraren tar bort /* kommenterar */, kollapsar rader av blanksteg till ett enda mellanslag, tar bort mellanslag runt strukturella skiljetecken som { } : ; , >, och släpper det sista semikolonet före ett avslutande klammerparentes. Den byter inte namn på väljare, slår samman regler eller omordnar kaskaden.
- En konservativ minifierare: den tar inte bort oanvända regler eller skriver om värden. Testa alltid stilmallen igen efteråt.
Varför det spelar roll
Varje kilobyte av renderingsblockerande CSS fördröjer första målningen. Minifiering är den billigaste vinsten som finns efter att ha tagit bort oanvända regler, och ett verktyg som bara rör bevisligen överflödiga tecken kan litas på i ett byggsteg utan att omdefiniera din stilmall.
Ett fungerande exempel
En regel skriven som .card { color: red; stoppning: 10px 20px; } blir .card{color:red;padding:10px 20px}, vilket sparar några dussin byte per regel och mycket mer i en riktig stilmall.
Vanliga misstag
- Ta bort mellanslag runt + och - inuti calc(), vilket specen kräver.
- Minifiera SCSS eller LESS istället för kompilerad CSS.
- Hoppa över den visuella kontrollen efter minifiering.
Praktiska tips
Behåll den ofminifierade källan i versionskontroll och minifiera som en byggutgång. Om du använder anpassade egenskaper med reservdelar, jämför de beräknade stilarna i DevTools före och efter — kaskaden bevaras, men ett enda förlorat utrymme kan ändra hur ett värde analyseras.
Hur man använder det
- Öppna verktyget. Allt körs på din webbläsarflik.
- Klistra in eller skriv in din inmatning och välj sedan den åtgärd du behöver.
- Kontrollera resultatet och kopiera det med ett klick.
Vanliga frågor
Tar den bort oanvända CSS-regler?
Nej. Det tar bort kommentarer och överflödiga blanksteg. Detektering av oanvänd regel kräver en helsidesgranskning.
Varför slutade calc() att fungera efter minifiering?
Mellanslag runt + och - inuti calc() krävs av CSS-specifikationen. Testa stilmallen igen efter minifiering.
Kan det förminska SCSS eller LESS?
Nej. Den förväntar sig vanlig CSS; förprocessorer har sina egna byggsteg.
Är detta verktyg verkligen gratis?
Ja. Det finns inget konto, ingen betalvägg och ingen användningsgräns. Tools App finansieras av aumenso, studion bakom.
Är något jag anger uppladdat?
Nej. Verktyget körs på din webbläsarflik; det du anger skickas aldrig till oss och lagras aldrig.