So verwenden Sie den CSS-Formatter
- Fügen Sie Ihr CSS in das Eingabefeld ein: ein minifiziertes Stylesheet, einen Ausschnitt aus den Entwicklertools oder eine ganze Datei.
- Klicken Sie auf Verschönern, um jede Deklaration in eine eigene Zeile mit einheitlicher Einrückung zu setzen.
- Klicken Sie auf Minifizieren, um Kommentare und Leerraum zu entfernen; das Tool zeigt, wie viele Bytes Sie gespart haben.
- Kopieren Sie die Ausgabe in Ihr Projekt.
Die gesamte Verarbeitung findet in Ihrem Browser statt, und Ihre Stylesheets werden nie hochgeladen oder gespeichert.
Warum CSS formatieren oder minifizieren?
CSS (Cascading Style Sheets) beschreibt, wie HTML dargestellt wird. Ein Stylesheet ist eine Liste von Regeln, jede aus einem Selektor und einem Block von Deklarationen (Eigenschaft: Wert;). Browser ignorieren den meisten Leerraum, deshalb lassen sich dieselben Regeln lesbar oder in einer einzigen Zeile komprimiert schreiben.
Verschönern ist nützlich, wenn Sie CSS lesen oder bearbeiten müssen, das minifiziert angekommen ist, zum Beispiel ein Theme eines Drittanbieters oder ein Stylesheet, das Sie auf einer Live-Website debuggen. Minifizieren ist für die Produktion gedacht: Das Entfernen von Kommentaren, Zeilenumbrüchen, Einrückung und des letzten Semikolons in jedem Block macht Dateien kleiner, sodass sie schneller geladen werden. Minifizierung ergänzt die gzip- oder Brotli-Kompression auf dem Server, ersetzt sie aber nicht.
Hier ist dieselbe Regel in beiden Formen:
.btn-primary:hover,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-primary:hover,
.btn-primary:focus {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}Häufige CSS-Fehler und wie Sie sie beheben
Browser brechen bei einem CSS-Fehler nicht ab. Sie überspringen die ungültige Deklaration oder Regel und machen weiter, weshalb ein Tippfehler oft nur dazu führt, dass ein einzelner Stil „stillschweigend“ nicht greift. Formatiertes CSS macht solche Probleme viel leichter auffindbar.
Fehlendes Semikolon. Die Deklaration danach wird in den vorherigen Wert hineingezogen, und beide werden ungültig:
.title {
color: #222
margin-bottom: 1rem;
}Ergänzen Sie das Semikolon nach #222. In der verschönerten Ausgabe verrät es sich, wenn zwei Eigenschaften in derselben logischen Zeile stehen.
Unausgewogene Klammern. Eine fehlende } macht die folgenden Regeln zum Teil des vorherigen Blocks. Springt die Einrückung nach dem Formatieren plötzlich eine Ebene, suchen Sie direkt darüber nach der fehlenden Klammer.
Fehlende Einheiten. Außer bei Null brauchen Längen eine Einheit: margin: 10; ist ungültig, margin: 10px; ist richtig. Einheitenlose Werte sind nur bei Eigenschaften gültig, die einfache Zahlen akzeptieren, etwa line-height, opacity oder z-index.
Ungültige Selektoren in einer Liste. Ist ein Selektor in einer kommagetrennten Liste ungültig, wird die ganze Regel verworfen. Das passiert oft bei herstellerspezifischen Pseudo-Elementen:
/* Wird einer der Selektoren nicht unterstützt, bekommt keiner den Stil */
input::-webkit-input-placeholder, input::-moz-placeholder { color: #888; }Schreiben Sie getrennte Regeln oder nutzen Sie das Standard-::placeholder.
Ist Minifizierung sicher?
Das Entfernen von Leerraum ist in fast allen Fällen sicher, aber einige Details sind wichtig:
| Situation | Was Sie wissen sollten |
|---|---|
calc() | Die Leerzeichen um + und - sind erforderlich. calc(100% - 2rem) funktioniert; calc(100%-2rem) nicht. Ein korrekter Minifier behält sie bei. |
| Lizenzkommentare | Kommentare, die mit /*! beginnen, bleiben bei vielen Minifiern üblicherweise für Lizenzen erhalten. Prüfen Sie die Ausgabe, wenn Sie darauf angewiesen sind. |
Zeichenketten und content | Leerraum innerhalb von Zeichenketten in Anführungszeichen gehört zum Wert und muss erhalten bleiben. |
| Hacks | Alte Browser-Hacks, die von exakter Syntax abhängen, überstehen die Minifizierung möglicherweise nicht. |
Tipps und bewährte Vorgehensweisen
- Halten Sie den lesbaren Quelltext in der Versionsverwaltung und erzeugen Sie minifizierte Dateien beim Build, idealerweise mit Source Maps zum Debuggen.
- Gruppieren Sie zusammengehörige Deklarationen einheitlich (Layout, Box-Modell, Typografie, Optik), damit sich Regeln leicht überblicken lassen.
- Nutzen Sie benutzerdefinierte CSS-Eigenschaften (
--brand: #0b5ed7;), statt Farbwerte zu wiederholen. - Für Inline-
<style>-Blöcke innerhalb von Markup ist der HTML-Formatter möglicherweise bequemer.
Häufig gestellte Fragen
Verändert das Minifizieren von CSS das Aussehen meiner Website?
Nein. Ein korrekter Minifier entfernt nur Zeichen, die der Browser nicht braucht, etwa Kommentare und Leerraum außerhalb von Zeichenketten. Die dargestellte Seite sollte identisch sein.
Wie viel kleiner wird mein CSS?
Das hängt davon ab, wie die Datei geschrieben wurde. Stark kommentierte, großzügig eingerückte Stylesheets schrumpfen stärker als ohnehin kompakte. Das Tool zeigt die genaue Größe vorher und nachher für Ihre Datei.
Kann ich minifiziertes CSS wieder lesbar machen?
Ja, genau das macht das Verschönern. Einrückung und Zeilenumbrüche werden wiederhergestellt, aber beim Minifizieren entfernte Kommentare lassen sich nicht zurückholen.
Unterstützt es SCSS oder Less?
Das Tool ist für reines CSS gedacht. Einfaches SCSS lässt sich oft akzeptabel formatieren, aber Funktionen wie verschachtelte Regeln mit Mixins oder Less-Operationen werden möglicherweise nicht korrekt verarbeitet.
Aktualisiert