CSS-minifikator & Formatter

Hvad er dette værktøj?

En CSS-minifier omskriver et stylesheet, så det fylder mindst muligt, uden at ændre hvordan det bliver vist: den fjerner kommentarer og mellemrum, forkorter farveværdier og nul-enheder hvor det er sikkert, samler dubletregler og fjerner overflødige semikolonner.

Værktøjet er bygget på clean-css, en CSS-optimizer der rent faktisk parser stylesheetet til et AST i stedet for at bruge regex — det er derfor det trygt kan håndtere edge cases, der vælter naive minifiers: CSS custom properties (--main-color: ...), indhold inde i strenge, og komplekse selectors og media queries kommer alle ud korrekt.

Hvorfor bruge det?

• AST-baseret minificering (clean-css), ikke regex — sikker med custom properties, strenge og indlejrede media queries.
• Level 2-optimeringer samler og forenkler regler for ekstra besparelser ud over simpel fjernelse af mellemrum.
• Se præcis hvor mange bytes og hvor mange procent du sparede.
• Format-tilstand gør et minificeret stylesheet læsbart igen med ensartet indrykning.
• 100% lokal behandling — proprietære eller uudgivne styles forlader aldrig din browser.

Sådan bruger du det

1. Indsæt din CSS i inputfeltet, eller klik "Load Example" for at prøve et eksempel med en custom property og en media query.
2. Klik "Minify" for at komprimere den, eller "Format" for at gøre den læsbar med 2-mellemrums indrykning.
3. Tjek beskeden under boksene — minify-tilstand viser størrelsesbesparelsen; ugyldig CSS viser en klar fejlmeddelelse i stedet for stiltiende at producere ødelagt output.
4. Klik "Copy" for at kopiere resultatet.

Eksempel

Input

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

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

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

Output

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

Custom property, media query og cascade-rækkefølge bevares alle — kun mellemrum, kommentarer og overflødige tegn fjernes.

Praktiske tips

• Minificér ved build/deploy-tidspunkt, ikke under udvikling — rediger den læsbare kilde og lad dette værktøj (eller din build-pipeline) producere den udgivne version.
• Hvis du fejlsøger, hvorfor en side ser anderledes ud i produktion, gør det at formatere den minificerede CSS først diff'en mod din kilde langt lettere at læse.
• Custom properties overlever minificering, så design-token-baserede stylesheets (med --spacing, --color-*, osv.) er trygge at køre gennem dette værktøj.
• Kombinér med HTML- og JS-minifierne nedenfor, hvis dit projekt holder alt i separate filer inden en release.

Hvor dette passer ind i virkelige workflows

CSS er en af de ting med størst effekt at minificere, fordi stylesheets som standard blokerer rendering — hver byte, der trimmes fra et stylesheet, kan barbere en lille smule af first paint, især på langsommere forbindelser. Det er en mindre gevinst end billedoptimering, men det er stort set gratis, når det først er koblet ind i et build-trin.

Format-retningen er nyttig til det modsatte problem: at undersøge en konkurrents eller et ældre produktions-stylesheet, der er sendt minificeret, for at forstå dets struktur, før man skriver en override eller et redesign.

→ HTML-minifikator · JS-minifier

Almindelige anvendelser

• Skrump et stylesheet før deployment af en statisk side eller landingpage.
• Omformatér en minificeret CSS-fil hentet fra en live side for at studere dens struktur.
• Ryd op i CSS eksporteret fra et designværktøj, som ofte indeholder overdrevne kommentarer og mellemrum.
• Tjek hurtigt om et håndskrevet CSS-uddrag parser korrekt, da forkert formet CSS vises som en eksplicit fejl.

Ofte stillede spørgsmål