CSS Minifier und Beautifier - komprimieren oder öffnen
CSS-Minifier und -Beautifier
Was dieses Werkzeug leistet
Zwei entgegengesetzte Aufgaben am selben Stylesheet. Minifizieren entfernt, was nur Menschen brauchen: Kommentare und Einrückung. Formatieren bringt es zurück, damit eine geerbte Datei lesbar wird. Beides arbeitet am gegebenen Text und lässt die Bedeutung des CSS unangetastet.
So funktioniert es
- 1 CSS einfügen - eine ganze Datei oder eine einzelne Regel.
- 2 Minifizieren zum Komprimieren, Formatieren zum Aufklappen mit Einrückung.
- 3 Bytezahl prüfen, dann das Ergebnis kopieren.
Ein Leerzeichen im Selektor ist keine Zierde
„.a .b“ trifft ein .b innerhalb eines .a; „.a.b“ trifft ein Element, das beide Klassen trägt. Das sind verschiedene Selektoren, und ein Minifier, der das Leerzeichen für Luft hält, färbt stillschweigend die falschen Elemente. Hier bleibt der Abstand zwischen zwei Selektorteilen immer erhalten - entfernt wird nur der Abstand um Kombinatoren wie > und +.
calc() braucht seine Leerzeichen
In „calc(100% - 10px)“ verlangt die Grammatik die Leerzeichen um das Minus: ohne sie liest ein Browser „-10px“ als negative Länge, der Ausdruck wird ungültig und die ganze Deklaration fliegt raus. Nichts warnt Sie - das Layout ist einfach falsch. Dieses Werkzeug entfernt innerhalb von Klammern nie Leerraum.
Lizenzkommentare bleiben
Ein Kommentar, der mit /*! beginnt, trägt einen Copyright- oder Lizenzhinweis, und per Konvention behält ihn jeder Minifier. Ihn zu entfernen hieße, die Namensnennung zu tilgen, die eine Bibliothek mitzuliefern verlangt. Gewöhnliche /*-Kommentare sind für Sie und Ihr Team - die fliegen raus.
CSS zu minifizieren bringt weniger als gzip
Server komprimieren Stylesheets ohnehin beim Ausliefern, und gzip ist bei wiederholtem Leerraum sehr gut - zusätzliches Minifizieren spart meist ein paar Prozent, nicht die Hälfte. Tun Sie es, weil die Datei das ist, was ausgeliefert wird und klein und stabil sein soll, nicht weil die Seite spürbar schneller lädt.