Minimieren und Formatieren
Minimieren entfernt unnötige Formatierung und optimiert das CSS. Formatieren ergänzt Einrückungen und Zeilenumbrüche, damit du komprimierten Code lesen kannst.
CSS minimieren und formatieren
Verkleinere CSS für eine kleinere Datei oder formatiere es zum Lesen. Vergleiche das Ergebnis mit deinem ursprünglichen Stylesheet.
Verarbeitungsmodus
Weitere Aktionen
Ähnliche Tools
Deine Statistiken
0
Verarbeitet
0
Eingesparte Bytes
0%
Mittlere Ersparnis
Noch nicht verwendet
Häufigster Modus
0
Kopiert
100%
Aktivitätswert
So verkleinerst und formatierst du CSS
Das Video konnte nicht geladen werden. Du kannst weiterhin der Anleitung unten folgen.
Das Video zeigt die englische Oberfläche.
Wähle Minimieren für kompaktes CSS oder Formatieren, um komprimierten Code besser zu lesen. Formatieren kann bereits entfernte Kommentare nicht wiederherstellen. Behalte eine Kopie des ursprünglichen Stylesheets, bevor du es ersetzt.
CSS verkleinern und formatieren
Strukturelle Optimierung
CSSO kann Werte verkürzen, leere Regeln entfernen und wiederholte Strukturen zusammenführen. Wie viel du sparst, hängt vom Stylesheet und der aktivierten Regelumstrukturierung ab.
Eine CSS-Datei öffnen
Lade über Importieren eine einzelne .css-Datei oder ziehe sie in das Eingabefeld. Ihr Inhalt wird zur Eingabe für den gewählten Modus.
3 weitere anzeigenWeniger anzeigen
Hinweise auf Syntaxfehler
Minimieren zeigt Zeile und Spalte der vom Parser erkannten Fehler an. Prüfe diese Hinweise, bevor du das erzeugte CSS verwendest.
Kommentare und Regelstruktur
Behalte mit /*! markierte Kommentare, wenn sie Lizenzangaben oder wichtige Hinweise enthalten. Schalte die Umstrukturierung aus, wenn Regeln weder zusammengeführt noch umgeordnet werden sollen.
Automatische Verarbeitung
Wenn Automatisch verarbeiten aktiviert ist, wird das Ergebnis nach Änderungen aktualisiert. Wo diese Option sichtbar ist, kannst du sie ausschalten und stattdessen Minimieren oder Formatieren verwenden. Auf dem Telefon bleiben diese Schaltflächen verfügbar, die Option Automatisch verarbeiten wird jedoch nicht angezeigt.
Häufige Fragen
Was bedeutet CSS-Minifizierung?
Bei der Minifizierung werden unnötige Leerzeichen und Kommentare entfernt. Auch Werte wie #ffffff können zu #fff verkürzt werden. Dieses Tool nutzt CSSO, das bei aktivierter Umstrukturierung auch wiederholte Regeln und Deklarationen optimiert.
Wie viel kleiner wird mein CSS?
Das hängt vom ursprünglichen Code ab. Ein Stylesheet mit vielen Kommentaren oder wiederholten Regeln kann stärker schrumpfen als bereits komprimierter Code. In Fenstern über 768 Pixel Breite kannst du unter den Editoren Eingabe- und Ausgabegröße vergleichen. In schmaleren Fenstern sind diese Angaben ausgeblendet. Der gzip-Wert misst die Komprimierung in diesem Browser. Dein Server kann daher eine andere Anzahl Bytes übertragen.
Verbessert kleineres CSS die Ladezeit oder SEO?
Ein kleineres Stylesheet kann die CSS-Datenmenge verringern, die Besucher herunterladen. Ob die Seite schneller lädt, hängt auch vom restlichen Inhalt, dem Cache und der Auslieferung durch den Server ab. Minifizierung allein garantiert weder bessere Core Web Vitals noch bessere Suchplatzierungen.
Was unterscheidet Minimieren und Formatieren von CSS?
Minimieren erzeugt kompaktes CSS für eine kleinere Datei. Formatieren ergänzt Zeilenumbrüche und Einrückungen zum Lesen und Bearbeiten. Bereits entfernte Kommentare oder die ursprüngliche Formatierung werden dadurch nicht wiederhergestellt.
4 weitere anzeigenWeniger anzeigen
Wie mache ich komprimiertes CSS wieder lesbar?
Wähle Formatieren, füge das CSS ein und stelle zwei oder vier Leerzeichen für die Einrückung ein. Das formatierte Ergebnis erscheint im Ausgabeeditor und lässt sich kopieren oder herunterladen.
Kann das Minimieren mein CSS beschädigen?
Prüfe und teste das Ergebnis auf deiner Website, bevor du die Originaldatei ersetzt. Die Umstrukturierung kann Regeln zusammenführen oder umordnen. Schalte sie aus, wenn die Reihenfolge wichtig ist, und prüfe die Syntaxhinweise des Parsers.
Findet das Tool Fehler in meinem CSS?
Minimieren zeigt Zeile und Spalte der vom Parser erkannten Syntaxprobleme an. Manche fehlerhaften Eingaben kann der Parser teilweise verarbeiten. Formatieren ist keine vollständige CSS-Prüfung. Teste das Ergebnis in den Browsern, die deine Website unterstützt.
Muss ich mein CSS irgendwo hochladen?
Nein. Importieren liest eine lokale Datei in den Editor ein. Die Verarbeitung findet im Browser statt. Das Stylesheet wird nicht zur Konvertierung an einen Server gesendet.
Technische Details
Minifizierung mit CSSO
Minimieren lädt CSSO und analysiert das Stylesheet mit css-tree. Die Optimierung entfernt unnötige Formatierung und kann Werte verkürzen, leere Regeln entfernen und Strukturen zusammenführen. Zwei Einstellungen steuern das Beibehalten wichtiger Kommentare und die Umstrukturierung von Regeln.
Verarbeitung im Browser
Die Bibliotheken zum Minimieren und Formatieren werden bei der ersten Verwendung des jeweiligen Modus geladen. Sie verarbeiten das CSS im Browser. Importieren liest den Text einer lokalen Datei, ohne das Stylesheet zur Konvertierung hochzuladen.
4 weitere anzeigenWeniger anzeigen
Ergebnis und Größenvergleich
Eingabe- und Ausgabegröße werden anhand der Textbytes gemessen. Wenn CompressionStream verfügbar ist, misst das Tool auch die Größe der gzip-komprimierten Ausgabe im Browser. Herunterladen erstellt eine .css-Datei, deren Name den gewählten Modus enthält.
Parserdiagnose
Minimieren sammelt Fehlermeldungen von css-tree und zeigt die gemeldete Zeile und Spalte an. Der Parser kann fehlerhafte Eingaben teilweise verarbeiten. Eine Ausgabe bestätigt daher nicht, dass jede Deklaration gültig ist oder wie beabsichtigt funktioniert.
CSS formatieren
Formatieren verwendet @projectwallace/format-css mit zwei oder vier Leerzeichen pro Einrückung. Beide Modi melden außerdem die von css-tree erkannten Syntaxprobleme. Formatieren stellt entfernte Kommentare nicht wieder her und bestätigt nicht die Gültigkeit aller CSS-Deklarationen.
Lokale Nutzungsstatistik
Verarbeitungen, eingesparte Bytes und Modusnutzung zählen Durchläufe, die über Minimieren oder Formatieren gestartet wurden. Automatische Aktualisierungen erhöhen diese Werte nicht. Kopiervorgänge werden separat gezählt. Die Statistik wird bei verfügbarem Speicher in der IndexedDB des Browsers abgelegt. Der Aktivitätswert kombiniert Größenersparnis, Kopierrate und verwendete Modi. Er misst weder die Korrektheit des CSS noch die Ladegeschwindigkeit.