01
Fundstellen im Quelltext lesen
Das Beispiel enthält eine benutzerdefinierte Eigenschaft und eine Media Query. Zeilennummern beziehen sich auch nach dem Formatieren auf die Eingabe.
HTML / CSS Dev Tools
CSS formatierenDie ursprünglichen Regeln im Blick
Formatieren, Minifizieren und Prüfen werden bewusst gestartet. Änderungen am Quelltext sperren den Export alter Ergebnisse.
CSS formatieren
CSS bleibt in diesem Browser-Tab. Kein Upload und kein gespeicherter Verlauf.
Regelnavigation
Nach einer Aktion erscheinen Selektoren und @ Regeln.
CSS eingeben und eine Aktion auswählen.
Eine minifizierte Datei versteckt doppelte Deklarationen und die Grenzen von Media Queries. Mit CSS formatieren erhältst du lesbare Einrückungen, während Selektoren und Deklarationen in ihrer ursprünglichen Reihenfolge bleiben.
Du kannst CSS minifizieren, wenn eine kompakte Ausgabe gebraucht wird, oder die CSS Syntax prüfen, wenn eine Klammer fehlt. CSS formatieren verarbeitet immer den Originaltext und nicht das Ergebnis des vorigen Schritts.
Warum CSS formatieren den Quelltext sichtbar hält
Lesbare Ausgabe und genaue Fundstellen gehören zusammen.
Die Kaskade bleibt nachvollziehbar
CSS formatieren belässt doppelte Eigenschaften und Kommentare an ihrer Stelle. So siehst du neben der Ausgabe, welche spätere Deklaration eine frühere überschreibt.
Selektoren im Original anspringen
Das Regelverzeichnis zeigt Selektoren und @ Regeln mit ihren ursprünglichen Zeilen. Ein Klick springt zum Quelltext; ein Syntaxfehler nennt zusätzlich die Spalte.
Mit Originalzeilen sicher arbeiten
02
Die passende Aktion ausführen
Standard sind zwei Leerzeichen; vier Leerzeichen und Tab sind wählbar. Minifizieren und Prüfen lesen stets den Originaltext, nie die vorherige Ausgabe.
03
Nur frische Ergebnisse exportieren
Änderst du Text oder Einrückung, sind Kopieren und Download gesperrt. Erneut ausführen hebt die Sperre auf; Strg/Cmd+Enter startet Formatieren.
Lesen, verdichten und Regeln finden
Saubere Einrückung
Der CSS-Formatierer gliedert verschachtelte Blöcke und erhält Kommentare sowie die Reihenfolge aller Deklarationen.
Behutsam verdichten
Überflüssige Leerzeichen und normale Kommentare entfallen. Regeln werden nicht zusammengeführt und Werte nicht umgeschrieben.
Navigation nach Quellzeile
Selektoren und @ Regeln stehen mit Originalpositionen in einer Liste. Bei langen Dateien erscheinen zunächst 50 Einträge.
Grenzen der strukturellen Prüfung
- Keine Aussage zur Browserunterstützung
- Eine fehlerfreie Struktur beweist nicht, dass jede Eigenschaft, jeder Selektor oder jede Funktion in deinen Zielbrowsern verfügbar ist.
- Nur gewöhnliches CSS
- CSS formatieren versteht keine SCSS- oder Less-Variablen und Mixins. Kompiliere Präprozessor-Dateien zuerst zu CSS.
- Keine Neuordnung der Kaskade
- Formatieren behält Kommentare und Deklarationsfolge; Minifizieren entfernt normalen Kommentartext und Abstand, sortiert aber nichts und löscht keine Duplikate.
- Kein Projektkontext
- Das Werkzeug lädt keine URL und speichert keine Eingabeverläufe. Ohne HTML und weitere Stylesheets kann es die echte Darstellung nicht simulieren.
Fragen zum CSS formatieren
Wie kann ich CSS minifizieren?
Füge den Originaltext ein und wähle Minifizieren. Die kompakte Ausgabe steht getrennt von der Eingabe und kann nur nach einem erfolgreichen Lauf heruntergeladen werden.
Unterstützt das Werkzeug SCSS und LESS?
Nein, nur CSS. Variablen, Mixins und andere Präprozessor-Syntax müssen vorher kompiliert werden.
Kann es Eigenschaften alphabetisch sortieren?
Absichtlich nicht. Die Reihenfolge wiederholter Eigenschaften kann das Ergebnis der Kaskade ändern; sie bleibt erhalten.
Wird mein CSS hochgeladen?
Nein. Die Verarbeitung findet in diesem Browser-Tab statt. Es gibt weder Upload noch gespeicherten Eingabeverlauf.
Was ist der Unterschied zwischen .css und .min.css?
Beide enthalten CSS. Eine .min.css-Datei ist üblicherweise für kleinere Übertragung verdichtet; hier kannst du sie zum Prüfen wieder lesbar formatieren.
Noch eine Frage?
Stylesheet jetzt prüfen
Kehre zu CSS formatieren zurück, finde die Originalzeile und exportiere nur ein aktuelles Ergebnis.
Formatieren und Minifizieren überschreiben die CSS-Eingabe nicht.