Ein Stylesheet aufräumen oder minifizieren, mit der gesparten Größe
Läuft in Ihrem Browser. Nichts, was Sie eingeben, wird irgendwohin gesendet.Beim Formatieren wird CSS eingerückt, damit man das Stylesheet lesen kann, und beim Minifizieren fällt jedes Leerzeichen und jeder Kommentar für die Produktion weg. Die gesparten Bytes werden angezeigt, so sehen Sie den Gewinn bei einer 2-KB-Datei, bevor Sie sich entscheiden. Alles läuft in Ihrem Browser, nichts wird hochgeladen.
Diese Seite wurde maschinell aus dem englischen Original übersetzt. Die Übersetzung wurde noch von keinem Menschen geprüft; maßgeblich ist die englische Fassung. Englisches Original lesen
Fügen Sie das Stylesheet in das Feld CSS ein oder klicken Sie auf Beispiel laden.
Behalten Sie Formatieren für eine Deklaration pro Zeile oder wählen Sie Minifizieren für die kleinste Datei.
Wählen Sie bei Formatieren unter Einrückung 2 Leerzeichen, 4 Leerzeichen oder Tab.
Klicken Sie auf Kopieren oder Herunterladen, um das Ergebnis zu übernehmen.
Dieser CSS-Formatierer hat zwei Modi. Formatieren legt ein Stylesheet mit einer Deklaration pro Zeile, gleichmäßiger Einrückung und einheitlichen Abständen um Doppelpunkte und Klammern an. Minifizieren entfernt Kommentare und Leerraum, kürzt Farben und Einheiten und kann Regeln mit demselben Block zusammenführen; danach zeigt es die Größe vorher, die Größe nachher und die prozentuale Ersparnis.
Man braucht ihn an beiden Enden einer Aufgabe. Am Anfang kommt ein Stylesheet minifiziert aus einem CDN oder einer Build-Ausgabe, und Sie müssen die Regel lesen, die ein Layoutproblem verursacht. Am Ende haben Sie eine handgeschriebene Datei und wollen die kleinste Fassung ausliefern. Beides ist hier ein Einfügen und ein Klick.
Zum Minifizieren wird csso verwendet. Die Option Umstrukturieren ist der aggressive Teil: Sie führt Regeln mit identischen Blöcken zusammen, entfernt Deklarationen, die eine spätere Regel überschreibt, und ordnet um, wo das sicher ist. Das spart meist ein paar Prozent mehr, und das Ergebnis ist gleichwertig. Wenn Sie aber einen Diff prüfen oder Ihr CSS auf eine Weise von der Reihenfolge im Quelltext abhängt, die ein Tool nicht erkennen kann, schalten Sie sie aus, dann verschwinden nur Leerraum und Kommentare. Kommentare, die mit einem Ausrufezeichen beginnen, also dort, wo Lizenzköpfe stehen, können erhalten bleiben.
Über dem Ergebnis sehen Sie die Zahl der Regeln, Selektoren, Deklarationen und @-Regeln. Bleibt eine Klammer, ein Kommentar oder ein Anführungszeichen offen, erhalten Sie Zeile und Spalte, wo es begann, und was zu ergänzen ist, statt einer Parser-Ausgabe. Alles läuft in Ihrem Browser, ein Stylesheet aus einem unveröffentlichten Projekt wird also nirgendwohin hochgeladen.
Ja. Keine Anmeldung, keine Begrenzung der Dateigröße und keine Obergrenze dafür, wie viele Stylesheets Sie verarbeiten. Die Seite finanziert sich über einige Anzeigen außerhalb des Tools, und Ihr Ergebnis wird davon nie berührt.
Nein. Formatieren und Minifizieren laufen beide in Ihrem Browser mit JavaScript. Ein Stylesheet aus einem unveröffentlichten Design oder einem internen Admin-Tool verlässt nie Ihr Gerät, und nichts bleibt gespeichert, wenn Sie den Tab schließen.
Ein handgeschriebenes Stylesheet mit Kommentaren und Einrückung schrumpft meist um 15 bis 30 Prozent, und Umstrukturieren bringt durch das Zusammenführen doppelter Regeln noch ein paar Punkte mehr. Die Seite zeigt die genaue Bytezahl vorher und nachher, Sie müssen also nie raten.
Umstrukturieren führt Regeln mit identischen Blöcken zusammen, entfernt Deklarationen, die eine spätere Regel überschreibt, und ordnet Selektoren um, wo das sicher ist. Die zusätzliche Ersparnis liegt meist bei wenigen Prozent über dem einfachen Minifizieren. Schalten Sie es aus, wenn nur Leerraum und Kommentare entfernt werden sollen, etwa wenn Sie einen lesbaren Diff zwischen zwei Builds brauchen.
Ja. Wählen Sie Formatieren und fügen Sie die minifizierte Datei ein. Sie kommt mit einem Selektor pro Zeile, einer Deklaration pro Zeile und eingerückten Media Queries in ihrem Block zurück. Selektornamen, Werte und Reihenfolge bleiben genau wie zuvor.
Ein gültiges Stylesheet sollte durch das Minifizieren nicht kaputtgehen. csso parst das CSS richtig, statt Text zu ersetzen, daher bleiben Strings, Data-URIs und Custom Properties erhalten. Lässt sich die Datei nicht parsen, erhalten Sie Zeile und Spalte statt eines kaputten Ergebnisses, und nichts wird kopiert.
Kommen Sie nicht weiter? Fragen Sie zu CSS-Formatierer und Minifier und jeder, der es weiß, kann antworten. Kein Konto nötig.