CSS-minifierare & formaterare

Vad är detta verktyg?

En CSS-minifierare skriver om en stilmall så att den blir så liten som möjligt utan att ändra hur den renderas: den tar bort kommentarer och mellanslag, förkortar färgvärden och nollenheter där det är säkert, slår samman dubbletter av regler och tar bort överflödiga semikolon.

Verktyget bygger på clean-css, en CSS-optimerare som faktiskt tolkar stilmallen till ett AST istället för att använda reguljära uttryck, vilket gör att den säkert kan hantera specialfall som förstör naiva minifierare — CSS-egna variabler (--main-color: ...), innehåll i strängar och komplexa selektorer och mediefrågor blir alla korrekta.

Varför använda det?

• AST-baserad minifiering (clean-css), inte reguljära uttryck — säker med egna variabler, strängar och nästlade mediefrågor.
• Nivå 2-optimeringar slår samman och förenklar regler för extra besparingar utöver enkel borttagning av mellanslag.
• Se exakt hur många byte och hur många procent du sparade.
• Formateringsläget gör om en minifierad stilmall till läsbar CSS med konsekvent indentering.
• 100 % lokal bearbetning — proprietär eller opublicerad styling lämnar aldrig din webbläsare.

Så använder du det

1. Klistra in din CSS i inmatningsrutan, eller klicka på "Ladda exempel" för att prova ett exempel med en egen variabel och en mediefråga.
2. Klicka på "Minifiera" för att komprimera den, eller "Formatera" för att snygga till den med 2-mellanslags indentering.
3. Kontrollera meddelandet under rutorna — minifieringsläget visar storleksminskningen; ogiltig CSS visar ett tydligt felmeddelande istället för att tyst producera trasig utdata.
4. Klicka på "Kopiera" för att hämta resultatet.

Exempel

Inmatning

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Resultat

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Den egna variabeln, mediefrågan och kaskadordningen bevaras alla — endast mellanslag, kommentarer och överflödiga tecken tas bort.

Praktiska tips

• Minifiera vid bygge/publicering, inte under utveckling — redigera den läsbara källkoden och låt detta verktyg (eller din byggpipeline) skapa den publicerade versionen.
• Om du felsöker varför en sida ser annorlunda ut i produktion gör formatering av den minifierade CSS:en diffen mot din källkod mycket lättare att läsa.
• Egna variabler överlever minifiering, så designtoken-baserade stilmallar (med --spacing, --color-* osv.) är säkra att köra genom detta verktyg.
• Kombinera med HTML- och JS-minifierarna nedan om ditt projekt håller allt i separata filer inför en release.

Var detta passar in i verkliga arbetsflöden

CSS är en av de mer lönsamma sakerna att minifiera eftersom stilmallar som standard blockerar rendering — varje byte som trimmas från en stilmall kan minska tiden till första målning något, särskilt på långsammare uppkopplingar. Det är en mindre vinst än bildoptimering, men det är i princip gratis när det väl är inbyggt i ett byggsteg.

Formateringsriktningen är användbar för det motsatta problemet: att inspektera en konkurrents eller en äldre produktionsstilmall som publicerats minifierad, för att förstå dess struktur innan man skriver en override eller en omdesign.

→ HTML-minifierare · JS-minifierare

Vanliga användningsfall

• Krympa en stilmall innan en statisk webbplats eller landningssida publiceras.
• Omformatera en minifierad CSS-fil hämtad från en live-webbplats för att studera dess struktur.
• Städa upp CSS exporterad från ett designverktyg, som ofta innehåller överflödiga kommentarer och mellanslag.
• Snabbt kontrollera om ett handskrivet CSS-utdrag tolkas korrekt, eftersom felaktig CSS visas som ett tydligt fel.

Vanliga frågor