Rensa CSS från kommentarer och extra blanksteg

Webbutvecklare använder CSS-minifiering när de förbereder kompakt kod för leverans eller en kontrollerad jämförelse.

Rensa CSS från kommentarer och extra blanksteg och få kompakt kod redo för nästa steg. Använd det gratis direkt i webbläsaren, utan konto.

Så använder du

Släpp din stilmall i inmatningsområdet, eller importera filen du vill komprimera i stället för att klistra in den för hand.
Kör minifieringen: kommentarer försvinner och blanksteg utan syntaktisk roll tas bort.
Jämför storleken på utdata med din originalfil för att se hur mycket körningen faktiskt sparade.
Kopiera den kompakta koden till ditt projekt och ladda om sidan för att bekräfta att layouten inte har förskjutits.
Behåll den läsbara versionen på ett säkert ställe, eftersom den packade filen är avsedd för leverans snarare än för redigering.

Exempel

Exemplet innehåller två regler skrivna över flera rader, med marginaler, en bakgrund och utfyllnad utspridda. Efter körningen jämför du de två texterna sida vid sida och kontrollerar att varje selektor, egenskap och värde fortfarande finns med i den kompakta versionen.

Indata

body {
    color: #17211d;
    margin: 0;
}

.card {
    padding: 12px;
    background: #ffffff;
}

Resultat

body{color:#17211d;margin:0} .card{padding:12px;background:#ffffff}

Gränser och format

Kommentarer tas bort, så anteckningar du lämnade inuti dem kommer inte tillbaka i utdata.
Kompakt kod är svår att läsa och besvärlig att rätta, så behåll originalet för framtida ändringar.
Oanvända regler upptäcks inte och värden skrivs inte om, så besparingen kommer främst från blanksteg och kommentarer.
Testa resultatet i de webbläsare du stöder, särskilt om stilmallen använder ovanliga selektorer eller en kommentar som aldrig stängdes.

Var bearbetningen sker

Arbetet sker i din webbläsare: CSS:en du klistrar in stannar där, den skickas ingenstans och försvinner när fliken stängs. Det betyder att du kan komprimera en kunds stilmall utan att den lämnar din dator.

Vanliga frågor

Laddas en minifierad fil snabbare?

Den väger mindre eftersom kommentarer och onödiga blanksteg är borta, och en mindre fil laddas ned snabbare. Hur mycket du märker beror på stilmallens storlek och på allt annat sidan måste hämta.

Kan jag ångra minifieringen efteråt?

Inte från den här sidan. Kommentarer och den ursprungliga indenteringen försvinner i körningen, så den läsbara layouten kan inte byggas upp igen. Arbeta på en kopia, eller behåll din formaterade fil i versionshantering innan du ersätter den.

Varför innehåller utdata fortfarande blanksteg?

Blanksteg som skiljer två värden, två selektorer eller orden inuti en egenskap åt är en del av syntaxen. Endast blanksteg utan grammatisk roll tas bort, vilket är anledningen till att det komprimerade resultatet fortfarande tolkas som giltig CSS.