CSS-Minifier & Beautifier
CSS kompakt oder eingerückt ausgeben; Zeichenfolgen und Deklarationsreihenfolge bleiben erhalten.
“Kompaktieren” oder “Einrücken” unter “Modus” wählen, CSS einfügen und “Ausführen” verwenden; Eingaben aktualisieren das Ergebnis auch automatisch. Methode und Grenzen
Bytes:
Bytes:
- Eingabe (Bytes)
- Ausgabe (Bytes)
- Vorzeichenbehaftete Ersparnis
Methode und Grenzen
Methode und Grenzen
css-tree 3.1.0 analysiert CSS vor der Ausgabe. Kompaktieren reduziert Syntaxabstände; Einrücken verwendet zwei Leerzeichen pro Ebene. Deklarations- und Fallbackreihenfolge, Zeichenfolgen wie "/*literal*/", calc-Operatorabstände und eigene Eigenschaftswerte bleiben erhalten. Normale Kommentare können entfallen, Lizenzkommentare /*! */ bleiben. Hexfarben und Zahlen werden nicht gezielt verkürzt. Ungültige Parser-Reparaturen und SCSS/LESS-Interpolation werden abgelehnt. Browserkompatibilität wird nicht geprüft.
Werkzeugeingaben werden lokal im Worker verarbeitet, ohne Upload, Speicherung oder Quelltextprotokoll. Werbung und Website können Netzwerkanfragen senden. Ressourcen müssen zuerst laden; Offlinebetrieb ist nicht garantiert.
Eingabe 1 MiB UTF-8; Ausgabe 2 MiB; 5 s einschließlich Laden. CSS/HTML: Tiefe 128, 50000 Knoten. Worker-Beendigung begrenzt Ressourcen, isoliert aber keinen Heap.
Kopiert
Kopieren fehlgeschlagen. Ergebnis auswählen und manuell kopieren.
Über CSS-Minifier & Beautifier
CSS kompakt oder eingerückt ausgeben; Zeichenfolgen und Deklarationsreihenfolge bleiben erhalten.
Ein Beautify-Modus macht das Gegenteil und rückt ein komprimiertes Stylesheet wieder ein, eine Deklaration pro Zeile. Angezeigt werden die ursprüngliche und die minifizierte Größe in Byte sowie die Ersparnis in Prozent – genau das, worauf es beim Verschlanken von renderblockierendem CSS ankommt; die Ausgabe lässt sich kopieren oder als styles.min.css für kompakte oder styles.css für formatierte Ausgabe herunterladen. Alles läuft in Ihrem Browser.
a::before { content: "/*literal*/"; width: calc(100% - 2px); }
Versionierte technische Methode; kein Kalender- oder Rechtsbezugsjahr.
Anwendungsfälle
Anleitung
CSS in “Eingabe” einfügen oder mit “Beispiel laden” ein Beispiel laden.
“Kompaktieren” oder “Einrücken” unter “Modus” wählen, CSS einfügen und “Ausführen” verwenden; Eingaben aktualisieren das Ergebnis auch automatisch.
“Einrücken” unter “Modus” für zwei Leerzeichen je Ebene und eine Deklaration je Zeile wählen.
Beobachten Sie, wie sich der Ausgabebereich beim Tippen neu aufbaut, und vergleichen Sie die Byte-Angaben über den beiden Feldern.
“Kopieren” für die Zwischenablage oder “Herunterladen” zum Speichern als (styles.min.css für kompakte oder styles.css für formatierte Ausgabe) verwenden. “Leeren” leert Eingabe und Ergebnis; “Abbrechen” stoppt die aktuelle Arbeit.
Profi-Tipps
- Nutzen Sie Tastenkürzel (Strg/Cmd+A zum Markieren, Strg/Cmd+C zum Kopieren), um im CSS-Minifier schneller zu arbeiten.
- Der CSS-Minifier protokolliert und speichert Ihre Eingaben nicht. Wenn Sie einen Verlauf brauchen, kopieren Sie wichtige Ergebnisse in eine lokale Datei oder eine Notiz-App.
- Warnungen und Ergebnis vor dem Kopieren prüfen. Erfolg beweist keine Kompatibilität mit Ihrer Anwendung.
Häufig gestellte Fragen
css-tree 3.1.0 analysiert CSS vor der Ausgabe. Kompaktieren reduziert Syntaxabstände; Einrücken verwendet zwei Leerzeichen pro Ebene. Deklarations- und Fallbackreihenfolge, Zeichenfolgen wie "/*literal*/", calc-Operatorabstände und eigene Eigenschaftswerte bleiben erhalten.
Normale Kommentare können entfallen, Lizenzkommentare /*! */ bleiben. Hexfarben und Zahlen werden nicht gezielt verkürzt. Ungültige Parser-Reparaturen und SCSS/LESS-Interpolation werden abgelehnt. Browserkompatibilität wird nicht geprüft.