CSS minimieren
CSS minimieren: Das Werkzeug entfernt Kommentare und überflüssigen Leerraum aus Stylesheets, behält Lizenzkommentare und lässt calc() und Selektoren korrekt.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
CSS verkleinern ohne Risiko
Beim CSS minimieren entfernt das Werkzeug Kommentare, Zeilenumbrüche und alle Leerzeichen, die für den Browser keine Bedeutung haben, außerdem das letzte Semikolon vor einer schließenden Klammer. Das Stylesheet wird dadurch kleiner und lädt schneller. Dieser CSS Minifier ändert keine Werte: Farben, Zahlen und Einheiten bleiben wie geschrieben, damit nichts kaputtgeht.
Einige Leerzeichen sind in CSS wichtig und bleiben stehen: zwischen Selektoren wie nav :focus (Nachfahre) im Gegensatz zu nav:focus, um + und - in calc(), vor Klammern in Media Queries wie and (max-width: 600px) und zwischen mehreren Werten wie 0 auto. Texte in Anführungszeichen, etwa bei content oder font-family, werden nicht verändert. Kommentare, die mit /*! beginnen, enthalten meist Lizenzhinweise und bleiben auf Wunsch erhalten.
Wer CSS komprimieren will, spart mit Minimieren typischerweise 15 bis 30 Prozent, mit zusätzlicher gzip- oder Brotli-Kompression auf dem Server noch deutlich mehr. Der Modus „CSS formatieren“ macht den umgekehrten Schritt und rückt minimiertes CSS lesbar ein. Um CSS weiter zu verkleinern, etwa durch Zusammenfassen von Regeln oder Kürzen von Farbwerten, eignen sich Build-Werkzeuge wie Lightning CSS oder cssnano.
Anleitung: CSS minimieren in 4 Schritten
- Das Stylesheet in das Feld „CSS“ einfügen oder mit „Beispiel“ testen.
- Unter „Modus“ wählen: „Minimieren“ zum Verkleinern oder „Formatieren (einrücken)“, um minimiertes CSS lesbar zu machen.
- „Lizenzkommentare /*! … */ behalten“ aktiviert lassen, wenn das CSS Bibliotheken mit Lizenzhinweis enthält.
- Das „Ergebnis“ mit „Kopieren“ übernehmen und die angezeigte Größe vorher und nachher vergleichen.
Typische Anwendungsfälle
- Kleine Website ohne Build-Prozess: Ein handgeschriebenes Stylesheet vor dem Hochladen verkleinern.
- Fremdes CSS lesen: Minimiertes CSS eines Themes oder einer Bibliothek mit „Formatieren“ wieder einrücken.
- Inline-CSS vorbereiten: Kritisches CSS kompakt in den Kopf einer HTML-Seite oder einer E-Mail-Vorlage einbauen.
Häufige Fragen
Kann das Minimieren mein Layout zerstören?
Das Werkzeug entfernt nur Leerzeichen, die nachweislich keine Bedeutung haben, und lässt Werte unverändert. Wichtige Leerzeichen wie in calc() oder zwischen Selektoren bleiben stehen.
Was ist ein Lizenzkommentar?
Ein Kommentar, der mit /*! beginnt. Er enthält meist Lizenz und Urheber einer Bibliothek und soll beim Minimieren erhalten bleiben.
Wie viel spart CSS minimieren?
Je nach Formatierung und Anteil an Kommentaren meist 15 bis 30 Prozent. Das Werkzeug zeigt die Größe vorher und nachher.
Kann ich minimiertes CSS wieder lesbar machen?
Ja, mit dem Modus „Formatieren“. Kommentare, die beim Minimieren entfernt wurden, kommen dabei allerdings nicht zurück.
Sollte ich das Original-CSS nach dem Minimieren behalten?
Ja. Arbeiten Sie immer im lesbaren Original und erzeugen Sie die minimierte Fassung nur für die Auslieferung, üblich als eigene Datei wie style.min.css. Entfernte Kommentare lassen sich sonst nicht zurückholen.
Werden Media Queries beim Minimieren verändert?
Nein, nur überflüssiger Leerraum fällt weg. Bedeutungstragende Leerzeichen wie in and (max-width: 600px) bleiben stehen, Werte und Einheiten bleiben unverändert.
Das könnte auch helfen
JSON minimieren
JSON auf eine Zeile verdichten: Leerraum entfernen, Zahlen exakt erhalten, optional Schlüssel sortieren.
ÖffnenJSON in CSV umwandeln
JSON-Arrays in CSV für Excel umwandeln: verschachtelte Felder als Spalten, Semikolon oder Komma.
ÖffnenCSV in JSON umwandeln
CSV in JSON umwandeln mit automatischer Trennzeichen-Erkennung und Anführungszeichen nach RFC 4180.
ÖffnenXML formatieren und prüfen
XML einrücken, minimieren und auf Wohlgeformtheit prüfen, mit Fehlerstelle in Zeile und Spalte.
ÖffnenXML in JSON umwandeln
XML in JSON umwandeln: Attribute mit Präfix, wiederholte Elemente als Arrays, Zahlen erkannt.
ÖffnenYAML in JSON umwandeln
YAML prüfen und in JSON umwandeln: Listen, Anker, Block-Strings und mehrere Dokumente.
Öffnen