CSS-Formatierer & Minifier

Was ist ein CSS-Formatierer?#

Ein CSS-Formatierer macht zwei Dinge, die gegensätzlich wirken, aber dasselbe Problem lösen: Er erweitert gedrängtes, maschinengeneriertes CSS zu etwas, das ein Mensch lesen kann, und er komprimiert ein wucherndes Stylesheet auf die Bytes, die tatsächlich zählen. Der Grund, warum man danach greift, ist fast immer, dass das CSS in der falschen Form für die aktuelle Aufgabe ankommt — ein Build-Tool hat eine einzige minifizierte Zeile ausgespuckt und Sie müssen eine bestimmte Regel inspizieren, oder eine handgeschriebene Datei ist angewachsen und Sie wollen sie vor dem Ausliefern stutzen.

Diese Seite behandelt beide Richtungen mit echten Engines. Formatieren verwendet css_beautify von js-beautify, das Selektoren und Deklarationen vorhersehbar neu einrückt. Minifizieren verwendet CSSO, einen echten strukturellen Optimierer statt eines bloßen Whitespace-Entferners: Er führt benachbarte Regeln mit identischen Deklarationen zusammen, faltet Longhand-Eigenschaften zu Shorthands zusammen, entfernt überschriebene Deklarationen und kollabiert erst dann den verbleibenden Whitespace. Das Ergebnis ist in der Regel kleiner als das eines naiven Kompressors und semantisch äquivalent zur Eingabe. Dieser Unterschied zählt, wenn jedes Byte auf der Leitung wichtig ist.

Verwendung#

1. Fügen Sie Ihr CSS in die CSS-Fläche links ein. Beispiel lädt ein kurzes Stylesheet, wenn Sie das Verhalten zuerst ausprobieren möchten.
2. Wählen Sie auf der Werkzeugleiste eine Einrückung: 2, 4 oder Tabulator. Zwei Leerzeichen sind die verbreitete moderne Konvention; vier sind angenehmer beim Lesen dichter Dateien.
3. Klicken Sie auf eine Aktion:
   • Formatieren — über js-beautify neu einrücken und Zeilenumbrüche setzen. Selektoren kommen auf eigene Zeilen, Deklarationen richten sich innerhalb der geschweiften Klammern aus.
   • Minifizieren — die strukturelle Optimierung von CSSO laufen lassen, dann kompakte Ausgabe erzeugen. Kommentare fallen weg, doppelte Regeln werden zusammengeführt, Longhands werden zu Shorthands gefaltet, wo es sicher ist.
4. Lesen Sie das Ergebnis in der Ausgabe-Fläche und verwenden Sie Kopieren, um es zu übernehmen. Leeren setzt beide Flächen zurück.

Wenn Ihre Eingabe eine nicht abgeschlossene Regel oder eine fehlerhafte Deklaration enthält, meldet die Statusleiste den Fehler, statt zu raten.

Eckpunkte#

• Formatieren und Minifizieren sind unterschiedliche Engines. Beautify ist js-beautify; Minifizieren ist CSSO. Jede übernimmt die eine Aufgabe, die sie gut kann, statt dass eine einzige Kompromiss-Routine beides versuchen muss.
• Echte Optimierung beim Minifizieren. CSSO strukturiert das Stylesheet um — es führt .a { color: red } .b { color: red } zu einer gemeinsamen Regel zusammen, kollabiert margin: 0 0 0 0 zu margin: 0 und entfernt eine Deklaration, die eine spätere Regel ohnehin überschreibt. Whitespace zu entfernen ist der letzte Schritt, nicht der einzige.
• Drei Einrückungsstile. 2 Leerzeichen, 4 Leerzeichen oder Tabulatoren, umschaltbar über ein einziges Menü.
• Seite an Seite, kopierbereit. Eingabe editierbar, Ausgabe schreibgeschützt mit einem Klick-Kopieren.
• Streng clientseitig. CSSO und js-beautify sind in die Seite gebündelt und werden nur geladen, wenn Sie dieses Werkzeug öffnen. Ihr Stylesheet wird im Browser verarbeitet und niemals hochgeladen.

Konkretes Beispiel#

Ein kleines Stylesheet, in dem zwei Regeln Arbeit wiederholen und ein Longhand kürzer sein könnte:

Eingabe:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

Klicken Sie auf Formatieren mit 2 Leerzeichen:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

Die Wiederholung ist jetzt offensichtlich — genau dafür ist ein Formatierer da. Klicken Sie nun auf Minifizieren auf dieselbe Eingabe, und CSSO schreibt sie strukturell um:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

Drei Dinge passierten gleichzeitig. Das vierwertige padding kollabierte auf einen einzigen Wert, weil alle vier Seiten gleich waren; die vier margin-*-Longhands falteten sich zum margin-Shorthand zusammen; und die beiden color: #ff0000-Regeln verschmolzen zu einer einzigen Regel mit gruppiertem Selektor (und das Hex wurde zum kürzeren red). Ein bloßer Whitespace-Entferner hätte jedes Byte Redundanz behalten — nur ein umstrukturierender Optimierer findet diese Einsparungen.

FAQ#

Verändert Minifizieren das Aussehen meiner Seite?#

Nein, solange die Eingabe gültiges CSS ist. CSSO wendet nur Transformationen an, die die Kaskade erhalten: Regeln mit identischen Deklarationen zusammenführen, Longhands faltenen, deren Werte alle gleich sind, und Deklarationen entfernen, die eine spezifischere oder spätere Regel überschreibt. Wäre eine Transformation mehrdeutig, wird sie übersprungen. Formatieren ist rein kosmetisch und verändert niemals die Bedeutung.

Behält Minifizieren meine Kommentare?#

Nein. Kommentare werden beim Minifizieren entfernt, einschließlich /* !important */-artiger Banner. Wenn eine Lizenz-Kopfzeile oder ein Build-Marker erhalten bleiben soll, bewahren Sie Ihre kommentierte Quelle auf und fügen Sie das Banner nach dem Minifizieren in Ihrer Build-Pipeline wieder ein.

Warum ist die minifizierte Ausgabe manchmal größer als meine Eingabe?#

Fast immer, weil die Eingabe bereits minifiziert war. CSSO muss sie dennoch parsen und neu ausgeben, und bei bereits kompakter, bereits optimierter Eingabe gibt es nichts mehr zu gewinnen — die Ausgabe ist im Wesentlichen gleich groß. Geben Sie ihm handgeschriebenes oder expandiertes CSS, werden die Einsparungen real.

Wird mein CSS an einen Server gesendet?#

Nein. Beide Engines laufen in Ihrem Browser. Die Bibliotheken werden bei Bedarf aus dem eigenen Bundle der Seite geladen, sodass es keinen Netzwerk-Request gibt, der Ihr Stylesheet irgendwohin überträgt.