CSS-Minimierer und Formatierer

So verwenden Sie es

1. Fügen Sie Ihr Stylesheet in CSS ein. Zeichenketten und url() bleiben genau so erhalten, wie sie sind.
2. Lassen Sie den Modus auf Minimieren, damit das CSS kleiner wird, oder wählen Sie Formatieren, damit es leicht lesbar ist.
3. Vergleichen Sie Bytes vorher und Bytes nachher, um zu sehen, wie viel gespart wurde.
4. Kopieren Sie das Ergebnis oder laden Sie es als styles.css herunter.

Was das Minimieren entfernt und was es behält

Ein CSS-Kommentar reicht von /* bis */ und wird entfernt, außer einem Hinweis, der mit /*! beginnt. Diesen behält der Rechner, weil er die Lizenz oder den Urhebervermerk trägt. Die CSS-Syntax-Spezifikation (englisch) definiert den Kommentar. Der Rechner liest Zeichenketten und url()-Token nach denselben Regeln, daher werden ihre Inhalte unverändert übernommen.

Leerzeichen entfallen, wo die Grammatik sie nicht braucht: um geschweifte Klammern, vor und nach Kommas, bei Doppelpunkten in Deklarationen und vor einem Ausrufezeichen. Das letzte Semikolon eines Blocks entfällt, weil eine schließende Klammer den Block ohnehin beendet. Ein Leerzeichen vor einem Doppelpunkt in einem Selektor bleibt erhalten, denn der Selektor .card :hover bedeutet etwas anderes als .card:hover.

a { color : red ; }  wird zu  a{color:red}

Farben, Nullen und die Kürzungen, die nicht gemacht werden

Eine Hexadezimalfarbe, deren Ziffernpaare sich wiederholen, wird mit drei oder vier Ziffern geschrieben: #ffffff wird zu #fff und #aabbccdd zu #abcd. Die Buchstaben werden klein geschrieben. Eine Farbe in einem Selektor wird nie geändert, denn ein Selektor wie #aabbcc bezeichnet eine ID.

Eine Länge von 0px am Anfang eines Wertes wird zu 0. In einer Funktion wie calc() und in einer benutzerdefinierten Eigenschaft, die mit zwei Bindestrichen beginnt, bleibt die Länge unverändert, weil eine nackte 0 nicht in jedem Zusammenhang als Länge gelesen wird. Das Formatieren ändert weder eine Farbe noch eine Länge.

• Größen werden in UTF-8-Bytes gezählt, so wie ein Server die Datei sendet. Ein Buchstabe mit Akzent braucht zwei Bytes.
• Testen Sie die Seite nach dem Minimieren, denn ein seltener Trick für einen alten Browser kann von einem Leerzeichen abhängen, das der Minimierer entfernt.

Häufig gestellte Fragen