CSS-Minifizierer

Eine Voreinstellung von CSS-Formatierer

Komprimieren Sie ein Stylesheet zur kleinsten gültigen Ausgabe durch Entfernen unnötiger Kommentare und Leerzeichen. Sicher durch Design — keine Regel wird zusammengefügt und kein Wert umgeschrieben, daher kann sich das Verhalten nicht ändern.

Dateien verlassen niemals Ihr Gerät
Kostenlos, keine Anmeldung
Keine Wasserzeichen
Funktioniert nach dem Laden auch offline

So verwenden Sie CSS-Formatierer

1
CSS einfügen
Reines CSS, SCSS oder Less, alle werden korrekt analysiert.
2
Formatieren oder minifizieren
Für Lesbarkeit verschönern, oder für Produktion komprimieren.
3
Kopieren oder herunterladen
Das Ergebnis ist bereit, direkt in Ihr Projekt eingefügt zu werden.

Warum „sichere" Minifizierung der richtige Tausch für handgeschriebenes CSS ist

Eine Build-Pipeline, die einen dedizierten CSS-Optimierer ausführt, kann sicher aggressivere Transformationen anwenden als dieses Tool, weil sie bei jedem Build konsistent denselben Optimierer ausführt und jeder Verhaltensunterschied durch die eigenen Tests des Projekts vor der Veröffentlichung erkannt wird. Ein Stylesheet in ein einmaliges Online-Tool einzufügen ist eine andere Situation: Es gibt keinen Build-Schritt, der die Ausgabe erneut prüft, daher würde eine Transformation, die Regeln zusammenfügt oder Deklarationen so neu ordnet, dass eine bestimmte Seite bricht, still veröffentlicht werden. Dieses Tool auf Entfernen von Leerzeichen und Kommentaren zu beschränken — Änderungen, die nachweislich nicht ändern, welche Deklaration in der Kaskade gewinnt — bedeutet, dass der Ausgabe vertraut werden kann, ohne die Seite, von der sie stammt, erneut zu testen.

Ein Stylesheet minifizieren, das Sie gleich irgendwo mit Größenbeschränkung einfügen

Ein häufiger Fall, speziell hierauf statt auf ein Build-Tool zurückzugreifen, ist ein einmaliger Bedarf, ein kleines Stylesheet in ein Feld mit Größenbeschränkung einzupassen — ein absichtlich klein gehaltener Inline-`<style>`-Block, ein in eine E-Mail-Vorlage eingebettetes CSS-Fragment, oder ein auf einer zeichenbegrenzten Plattform eingefügter Stilwert. Für eine einzelne, einmal benötigte Datei ist eine vollständige Build-Pipeline auszuführen übertrieben; es hier einzufügen und das minifizierte Ergebnis zurückzukopieren ist der schnellste Weg zum selben Ergebnis.

Häufig gestellte Fragen

Wie viel spart Minifizierung wirklich?

Typischerweise 20% bis 30% vor gzip bei handgeschriebenem CSS, und deutlich weniger bei Ausgabe, die bereits ein Build-Tool verarbeitet hat. Über das Netzwerk erledigt die gzip- oder brotli-Schicht ohnehin den Großteil der Arbeit — Minifizieren hilft hauptsächlich durch Entfernen redundanter Kommentare und Leerzeichen davor.

Ändert Minifizieren, wie sich meine Styles verhalten?

Nein. Nur Leerzeichen und Kommentare werden entfernt; Selektoren, Eigenschaften und Werte werden nicht angetastet. Dieses Tool fügt keine Regeln zusammen, ordnet Deklarationen nicht neu und kürzt keine Farben, weil diese Transformationen das Verhalten auf schwer erkennbare Weise ändern können.

Unterstützt es SCSS und Less?

Ja, beide werden mit ihren eigenen Grammatiken analysiert, daher überstehen Verschachtelung, Variablen und Mixins die Formatierung. Beachten Sie, dass sie formatiert werden — nicht zu CSS kompiliert.

Warum wird mein CSS abgelehnt?

Normalerweise eine nicht geschlossene geschweifte Klammer oder ein einzelnes fehlplatziertes Zeichen. Die Fehlermeldung enthält die Zeilennummer, damit Sie es finden können. In das Stylesheet gemischte Template-Syntax scheitert ebenfalls, da sie kein gültiges CSS ist.

HTML-Formatierer

HTML korrekt verschönern und einrücken

JavaScript-Formatierer

JS und TypeScript mit einem echten Parser formatieren

JSON-Formatierer

JSON sofort formatieren, validieren und minifizieren