Minifiziertes oder formatiertes CSS wird hier angezeigt...
Original: 0 bytes Ergebnis: 0 bytes Reduzierung: 0%
Minifizieren oder verschönern Sie CSS-Code mit benutzerdefinierten Einrückungs- und Kommentaroptionen.
Der CSS-Formatierer erledigt zwei entgegengesetzte Aufgaben: Er verschönert gedrängte einzeilige Stylesheets zu lesbaren, eingerückten Regeln und minifiziert ausführliches CSS auf die kleinste gültige Form für die Produktion. Fügen Sie ein Stylesheet ein, wählen Sie eine Richtung, und in beiden Fällen ist die Ausgabe bereit zum Kopieren. Frontend-Entwickler nutzen ihn, um minifiziertes Fremd-CSS zu entschlüsseln, das sie überschreiben müssen, um die Formatierung im Team zu vereinheitlichen und um vor der Bereitstellung Bytes von einem Stylesheet zu sparen.
Die Minifizierung ist enger, als viele erwarten. Sie entfernt nur Zeichen, die der Browser nicht braucht:
/* ... */.0px ein 0 wird.Sie ändert nicht Selektoren, Eigenschaftsnamen, Eigenschaftswerte oder die Kaskade. color: #ff0000 und color: red verhalten sich identisch, aber ein Minifizierer wandelt das eine nicht in das andere um, weil das die Quelle in ungefragter Weise verändern würde. Die Faustregel: Die Minifizierung ändert die Darstellung, niemals die Bedeutung.
Ein Abschnitt eines Basis-Stylesheets:
/* Primary button */
.btn {
display: inline-block;
padding: 12px 20px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #ffffff;
color: #111827;
}
.btn:hover {
background: #f3f4f6;
}
Formatiert ist der obige Block bereits lesbar; durch Minifizieren wird daraus eine einzige Zeile mit entferntem Kommentar, etwa ein Drittel der Byte-Zahl. Um einen realen Fall zu prüfen, fügen Sie ein minifiziertes Fremd-Stylesheet ein und klicken auf Formatieren: Jede Regel klappt auf eigene Zeilen auf, und die Eigenschaft, die Sie überschreiben wollen – eine Spezifität, ein z-index, eine fest codierte Farbe –, wird in Sekunden auffindbar statt durch Scrollen durch eine Textwand.
margin stehen wird.margin: 0 10px ist kompakt, verbirgt aber, welche Seiten gesetzt sind. Bevorzugen Sie explizite Langschreibweise, wenn die Absicht zählt, und lassen Sie den Formatierer laufen, um sie konsistent zu halten.+ und − brauchen umgebende Leerzeichen; ein Schritt, der allen Leerraum innerhalb von calc() streicht, erzeugt ungültiges CSS.Ein letztes Wort dazu, wann sich Formatieren lohnt. Für ein Stylesheet, das Ihnen gehört, formatieren Sie es einmal zu Projektbeginn und lassen Sie einen Build-Schritt es beim Ausliefern minifizieren – so bleibt die lesbare Kopie im Repository und die komprimierte im Browser. Am wertvollsten ist die Formatierung nicht als Routine, sondern in den Momenten, in denen Leerraum das Hindernis ist: beim Lesen einer eingekauften Bibliothek, beim Prüfen der komprimierten Ausgabe eines Kollegen oder bei der Suche nach einer einzelnen defekten Deklaration in einer Datei, die als eine lange Zeile ankam.
Ja, solange Sie das Original behalten. Die Minifizierung entfernt nur Leerzeichen, Kommentare und optionale Semikolons; sie schreibt keine Selektoren oder Eigenschaftswerte um, sodass der Browser ein gleichwertiges Stylesheet sieht. Die praktische Regel lautet, die minifizierte Datei als Build-Artefakt zu behandeln: ausliefern, aber niemals bearbeiten, weil ein komprimiertes Stylesheet mit einer einzigen Zeile aus Tausenden Regeln kaum zu pflegen ist.
Kommentare werden in der minifizierten Ausgabe entfernt, was meist der Sinn ist – Lizenzhinweise, Abschnittsmarker und Erklärungen sind für Entwickler, nicht für Browser. Behalten Sie die Kommentare in Ihrer Quelldatei. Wenn eine Lizenz vorschreibt, dass der Hinweis mitgeliefert wird, bewahren Sie ihn separat mit einem Werkzeug auf, das den ersten Kommentar erhalten kann.
CSS verlangt Leerzeichen um die Operatoren + und − innerhalb von calc(); ihr Fehlen ist ungültig. Ein Formatierer, der Leerraum normalisiert, muss diese Leerzeichen daher bewahren, statt sie zusammenzuziehen. Wenn Sie calc() von Hand schreiben, denken Sie daran, dass calc(100%-20px) ungültig ist, während calc(100% - 20px) funktioniert, und calc(100%/3) ist in Ordnung, weil die Division die Leerzeichen nicht braucht.
Nein. Die Formatierung formatiert den Text, den sie erhält, um; sie kann keine nicht geschlossene Klammer, kein fehlendes Semikolon vor der nächsten Deklaration und keine falsch geschriebene Eigenschaft reparieren. Sie kann solche Probleme leichter sichtbar machen, weil jede Deklaration in einer eigenen Zeile steht, aber Validierung und Reparatur bleiben Ihre Aufgabe – prüfen Sie die Ausgabe im Inspektor des Browsers oder mit einem Linter.
Sie kann einen Teil der Redundanz entfernen, die die Kompression ausnutzt, sodass die komprimierte Größe möglicherweise nicht um den vollen Betrag schrumpft, den die Vorher-Nachher-Zahlen des Tools anzeigen. Minifizierung und Kompression arbeiten weiterhin zusammen – Sie liefern beides aus –, aber die kombinierte Ersparnis ist meist kleiner, als beide Werte einzeln vermuten lassen.
Die Minifizierung entfernt das letzte Semikolon eines Deklarationsblocks, weil der Browser es nicht benötigt, und streicht redundante Einheiten bei Nullwerten, sodass aus 0px ein 0 wird. Selektoren, Eigenschaftsnamen und Eigenschaftswerte bleiben unverändert. Eine Umwandlung wie color: #ff0000 zu color: red findet nicht statt, weil sie die Quelle in einer Weise verändern würde, die Sie nicht verlangt haben.
Geprüft vom HandyTools-Hub-Team · Zuletzt aktualisiert