CSS-formaterare

Om CSS-formatering

Minifiering tar bort blanksteg, kommentarer och redundanta tecken från CSS för att minska filstorleken. Formatering expanderar den igen till indenterad stil med en regel per rad, lättare att överblicka och redigera.

Minifieringen här går lite längre än att bara ta bort blanktecken: värden skrivs också om till sin kortaste likvärdiga form, så background-color: white blir background-color:#fff och color: #ff0000 blir color:red, beroende på vad som tar minst antal byte. Den analyserar inte vilka regler som faktiskt tillämpas på en sida — det är en separat uppgift som kallas "borttagning av oanvänd CSS" eller tree-shaking, som kräver att känna till din HTML och JavaScript för att avgöra vad som är dödvikt, och det här verktyget behåller varje regel du skrev. Ett undantag från kommentarborttagning: en "bang-kommentar" som börjar med /*! bevaras medvetet, eftersom det är konventionen byggverktyg använder för licenstexter som måste överleva minifiering.

Var du stöter på det

• Minska ett stilmallsark innan det driftsätts i produktion
• Formatera om en minifierad CSS-fil för att läsa eller redigera den
• Städa upp stilar kopierade från webbläsarens granskningspanel
• Standardisera formateringen innan en CSS-diff granskas

Vanliga frågor

Ändrar minifiering hur min sida ser ut?
Nej. Bara blanksteg och kommentarer tas bort — varje selektor, egenskap och värde förblir exakt som skrivet.

Stöder detta SCSS eller LESS?
Nej, bara ren CSS. Kompilera din SCSS eller LESS till CSS först.

Sparas min stilmall?
Nej. Konverteringen sker på servern enbart för den begäran och inget sparas efteråt.

Tar det här bort CSS-regler som min sida egentligen inte använder?
Nej. Det är en annan uppgift — vanligtvis kallad "borttagning av oanvänd CSS" eller tree-shaking — som kräver att jämföra din CSS mot den faktiska HTML:en och JavaScript:en för att veta vilka selektorer som någonsin matchar. Det här verktyget tar bara bort blanktecken och överflödig syntax och kortar värden till sin minsta likvärdiga form; varje regel du skrev kommer ut på andra sidan, bara mer kompakt. Om en kommentar behöver överleva minifiering — en licenstext, till exempel — börja den med /*! i stället för /*, så bevaras den.