CSS Minifier

Was ist CSS-Minifizierung?

CSS-Minifizierung ist der Prozess, alle nicht notwendigen Zeichen aus einem Stylesheet zu entfernen, ohne dessen Verhalten zu ändern. Das bedeutet: Leerzeichen, Zeilenumbrüche, Kommentare und redundante Syntax wie abschließende Semikolons und überflüssige Anführungszeichen werden entfernt. Der Browser parst minifiziertes CSS identisch zum Original. Das W3C CSS Syntax Module definiert die Grammatik; Leerzeichen zwischen Tokens sind optional, außer wo sie Bezeichner trennen. Die Minifizierung nutzt dies, indem sie alles auf die minimal erforderlichen Zeichen reduziert.

Ein Online-CSS-Minifier nimmt Ihr formatiertes Stylesheet und erzeugt eine kompakte Version, die für die Übertragungsgröße optimiert ist. Typische Einsparungen liegen zwischen 15 % und 40 %, abhängig davon, wie viele Leerzeichen und Kommentare die Quelle enthält. Bei einem 50-KB-Stylesheet bedeutet das 7–20 KB weniger Bytes, die bei jedem Seitenaufruf über das Netzwerk übertragen werden. Kombiniert mit gzip- oder Brotli-Komprimierung auf dem Server reduziert die Minifizierung die endgültige Übertragungsgröße weiter, da die komprimierte Ausgabe von bereits minifiziertem CSS kleiner ist als die komprimierte Ausgabe des formatierten Originals.

Minifizierung ist ein Standardschritt in Frontend-Build-Pipelines. Tools wie cssnano, clean-css und esbuild führen die Minifizierung als Teil des Build-Prozesses aus. Während der Entwicklung müssen Sie jedoch häufig einen einzelnen Ausschnitt für Tests minifizieren, einen kritischen CSS-Block inlinen oder prüfen, wie stark ein Stylesheet schrumpft, bevor Sie es einer Bundle-Konfiguration hinzufügen. Genau dafür ist ein browserseitiger CSS-Minifier nützlich: CSS einfügen, minifizierte Ausgabe erhalten, kopieren, fertig.

/* 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}

Warum diesen CSS-Minifier verwenden?

CSS einfügen und in Millisekunden minifizierte Ausgabe erhalten. Keine Build-Tool-Konfiguration, keine CLI-Befehle, keine Konten erforderlich.

Anwendungsfälle für den CSS-Minifier

CSS-Minifizierungstechniken

Ein CSS-Minifier wendet mehrere Transformationen an, um die Dateigröße zu reduzieren. Jede Transformation zielt auf eine andere Art von Redundanz in der Quelle. Die folgende Tabelle listet die wichtigsten Techniken und ihre typischen Einsparungen bei einem formatierten Stylesheet auf:

Die Einsparungen variieren je nach Eingabe. Stark kommentierte Dateien profitieren mehr vom Entfernen von Kommentaren, während bereits kompaktes CSS geringere Gewinne erzielt. Die zuverlässigsten Einsparungen stammen aus der Leerzeichen-Entfernung und Kurzschreibweisen-Optimierung. Erweiterte Minifier wie cssnano führen außerdem doppelte Selektoren zusammen, komprimieren Langform-Eigenschaften zu Kurzschreibweisen (margin-top + margin-right + margin-bottom + margin-left zu margin) und entfernen überschriebene Deklarationen.

Minifizierung vs. Gzip-Komprimierung

Minifizierung und Komprimierung ergänzen sich — sie sind keine Alternativen zueinander. Sie arbeiten auf verschiedenen Ebenen und stapeln sich übereinander:

Code-Beispiele

So lässt sich CSS programmatisch in verschiedenen Sprachen und Umgebungen minifizieren:

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}"

Häufig gestellte Fragen