CSS-minifierare

Klistra in en stilmall för att ta bort blanksteg och kommentarer, förkorta värden som #ff0000 → red och slå ihop dubblettregler med CSSO:s strukturella optimeringar.

Körs i din webbläsareIngen registreringInget laddas upp

Minifierad utdata

Så använder du CSS-minifierare

  1. Klistra in CSS eller öppna en .css-fil.
  2. Låt Omstrukturera vara på för att slå ihop regler och deklarationer, eller stäng av det för en säker körning som bara tar bort blanksteg.
  3. Låt Behåll licenskommentarer vara på för att bevara /*! … */-noteringar.
  4. Jämför originalstorleken, den minifierade storleken och gzip-storleken.
  5. Kopiera resultatet eller ladda ner output.min.css.

Så fungerar CSS-minifiering

Det här verktyget använder CSSO (CSS Optimizer), som tolkar din stilmall till ett syntaxträd och skriver ut den igen i kortast möjliga likvärdiga form. Utöver att ta bort blanksteg och kommentarer gör den säkra omskrivningar av värden:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Tomma regler och dubblerade deklarationer tas bort

Vad gör ”omstrukturera”?

Omstruktureringen ser på hela stilmallen: regler med identiska deklarationer slås ihop till en selektorlista (.a,.b{color:red}), och upprepade selektorer kombineras. Det sparar ofta ytterligare 5–15 % på verkliga stilmallar. CSSO slår bara ihop när kaskadordningen förblir densamma, men om du förlitar dig på ovanliga överskrivningar kan du stänga av det för en rent syntaktisk minifiering.

Varför minifiera CSS?

CSS blockerar renderingen: webbläsaren kan inte rita sidan förrän stilmallarna i <head> har laddats ner och tolkats. Mindre CSS ger snabbare First Contentful Paint och bättre Core Web Vitals, vilket hjälper både användare och sökrankning. Kombinera minifiering med gzip eller Brotli på servern för bästa resultat.

Vanliga frågor

Är det säkert att minifiera CSS?
Ja. Blanksteg och kommentarer påverkar inte hur CSS renderas, och CSSO:s omskrivningar av värden är likvärdiga enligt specifikationen. Omstruktureringen behåller kaskadordningen; stäng av den om du vill ha den mest försiktiga utdatan.
Stöds modern CSS som custom properties, nesting och @layer?
Ja. Custom properties (--var), @media, @supports, @layer, @container och grid-syntax bevaras.
Kan jag av-minifiera CSS senare?
Minifierad CSS kan indenteras igen av vilken formaterare som helst, men borttagna kommentarer går inte att återskapa. Behåll din ursprungliga källfil och betrakta den minifierade filen som ett byggresultat.
Laddas min stilmall upp någonstans?
Nej. Minifieringen körs i din webbläsare; ingenting skickas till en server.

Relaterade verktyg

JavaScript Minifier Komprimera och mangla JS med Terser, med storlek och gzip-statistik. HTML Minifier Ta bort kommentarer och blanktecken, och minifiera inline CSS/JS. SQL-formaterare Formatera eller minifiera SQL för PostgreSQL, MySQL, T-SQL, BigQuery m.fl. JSON Formatter Formatera, minifiera och validera JSON med fel per rad/kolumn.