CSS Minifier

Vad är CSS-minifiering?

CSS-minifiering är processen att ta bort alla onödiga tecken från ett stilark utan att ändra dess beteende. Det innebär att ta bort blanksteg, radbrytningar, kommentarer och redundant syntax som avslutande semikolon och onödiga citattecken. Webbläsaren tolkar minifierad CSS identiskt med originalet. W3C CSS Syntax Module definierar grammatiken; blanksteg mellan tokens är valfria utom där de separerar identifierare. Minifiering utnyttjar detta genom att komprimera allt till det minsta antal tecken som krävs.

En online CSS-minifierare tar ditt formaterade stilark och producerar en kompakt version optimerad för överföringsstorlek. Typiska besparingar ligger mellan 15 % och 40 % beroende på hur mycket blanksteg och hur många kommentarer källan innehåller. För ett stilark på 50 KB innebär det 7–20 KB färre byte som skickas över nätverket vid varje sidinläsning. I kombination med gzip- eller Brotli-komprimering på servern minskar minifiering den slutliga överföringsstorleken ytterligare, eftersom komprimerad utdata från redan minifierad CSS är mindre än att komprimera det formaterade originalet.

Minifiering är ett standardsteg i frontend-byggpipelines. Verktyg som cssnano, clean-css och esbuild kör minifiering som en del av bygget. Men under utveckling behöver du ofta minifiera ett enstaka kodfragment för testning, infoga ett kritiskt CSS-block, eller kontrollera hur mycket ett stilark krymper innan det läggs till i en bundle-konfiguration. Det är där en webbläsarbaserad CSS-minifierare är användbar: klistra in CSS, få den minifierade utdatan, kopiera den och gå vidare.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

Varför använda denna CSS Minifier?

Klistra in valfri CSS och få minifierad utdata på millisekunder. Ingen byggverktygskonfiguration, inga CLI-kommandon, inga konton krävs.

Användningsfall för CSS Minifier

CSS-minifieringstekniker

En CSS-minifierare tillämpar flera transformationer för att minska filstorleken. Var och en riktar sig mot en annan typ av redundans i källan. Tabellen nedan listar de viktigaste teknikerna och deras typiska besparingar på ett formaterat stilark:

Besparingsprocenterna varierar beroende på indata. Kraftigt kommenterade filer drar mer nytta av kommentarsborttagning, medan redan komprimerade filer ser mindre vinster. De mest tillförlitliga vinsterna kommer från borttagning av blanksteg och korthandsoptimering. Avancerade minifierare som cssnano slår också ihop duplicerade selektorer, komprimerar långhandsegenskaper till korthandssyntax (margin-top + margin-right + margin-bottom + margin-left till margin) och tar bort åsidosatta deklarationer.

Minifiering vs. Gzip-komprimering

Minifiering och komprimering kompletterar varandra — de är inte utbytbara. De arbetar på olika lager och staplas ovanpå varandra:

Kodexempel

Hur man minifierar CSS programmatiskt i olika språk och miljöer:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

Vanliga frågor