CSS-minifikator og Formaterer

Hva er dette verktøyet?

En CSS-minifier skriver om et stilark til å bli så lite som mulig uten å endre hvordan det rendres: den fjerner kommentarer og mellomrom, forkorter fargeverdier og null-enheter der det er trygt, slår sammen dupliserte regler, og fjerner overflødige semikolon.

Dette verktøyet er bygget på clean-css, en CSS-optimalisator som faktisk parser stilarket til et AST i stedet for å bruke regex, og det er derfor det trygt kan håndtere kanttilfeller som ødelegger naive minifiserere — CSS egendefinerte egenskaper (--main-color: ...), innhold inni strenger, og komplekse selektorer og media queries kommer alle ut korrekt.

Hvorfor bruke det?

• AST-basert minifisering (clean-css), ikke regex — trygt med egendefinerte egenskaper, strenger og nøstede media queries.
• Nivå 2-optimaliseringer slår sammen og forenkler regler for ekstra besparelser utover enkel fjerning av mellomrom.
• Se nøyaktig hvor mange bytes og hvilken prosentandel du sparte.
• Formater-modus gjør et minifisert stilark om til lesbar CSS igjen, med konsekvent innrykk.
• 100 % lokal behandling — proprietære eller ikke-utgitte stiler forlater aldri nettleseren din.

Slik bruker du det

1. Lim inn CSS-en din i innboksen, eller klikk «Load Example» for å prøve et eksempel med en egendefinert egenskap og en media query.
2. Klikk «Minify» for å komprimere den, eller «Format» for å gjøre den vakker med 2-mellomroms innrykk.
3. Sjekk meldingen under boksene — minify-modus viser størrelsesreduksjonen; ugyldig CSS viser en tydelig feilmelding i stedet for å stille produsere ødelagt resultat.
4. Klikk «Copy» for å hente resultatet.

Eksempel

Inndata

: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 egendefinerte egenskapen, media query-en og rekkefølgen på kaskaden bevares alle — bare mellomrom, kommentarer og overflødige tegn fjernes.

Praktiske tips

• Minifiser ved bygging/utrulling, ikke under utvikling — rediger den lesbare kildekoden og la dette verktøyet (eller byggepipelinen din) produsere den versjonen som leveres.
• Hvis du feilsøker hvorfor en side ser annerledes ut i produksjon, gjør formatering av den minifiserte CSS-en først diffen mot kildekoden din mye lettere å lese.
• Egendefinerte egenskaper overlever minifisering, så stilark basert på designtokener (med --spacing, --color-* osv.) er trygge å kjøre gjennom dette verktøyet.
• Kombiner med HTML- og JS-minifisererne under hvis prosjektet ditt holder alt i separate filer før en utgivelse.

Hvor dette passer inn i virkelige arbeidsflyter

CSS er en av de tingene det lønner seg mest å minifisere, fordi stilark som standard er render-blokkerende — hver byte som trimmes fra et stilark kan barbere av litt tid fra første maling, spesielt på tregere tilkoblinger. Det er en mindre gevinst enn bildeoptimalisering, men i praksis gratis når det først er koblet inn i et byggetrinn.

Format-retningen er nyttig for det motsatte problemet: å inspisere et konkurrerende eller et eldre produksjonsstilark som er levert minifisert, for å forstå strukturen før du skriver en overstyring eller et redesign.

→ HTML-minifikator · JS-minifisering

Vanlige bruksområder

• Krympe et stilark før du ruller ut en statisk side eller landingsside.
• Reformatere en minifisert CSS-fil hentet fra et live nettsted for å studere strukturen.
• Rydde opp i CSS eksportert fra et designverktøy, som ofte inneholder overdrevne kommentarer og mellomrom.
• Raskt sjekke om et håndskrevet CSS-utdrag parses korrekt, siden feilformatert CSS kommer frem som en tydelig feilmelding.

Ofte stilte spørsmål