CSS-Formatierer

CSS formatieren oder minimieren, Eigenschaften sortieren und px in rem umrechnen — direkt im Browser.

Über CSS-Formatierer

Was es ist

Der CSS-Formatierer macht ein Stylesheet lesbar oder kompakt. Er rückt Regeln ein, sortiert Eigenschaften alphabetisch oder in Box-Modell-Reihenfolge, rechnet px-Werte in rem um und bringt alle Farben in ein Format. Dabei prüft er das CSS und stoppt bei unausgeglichenen Klammern oder einer kaputten Deklaration, statt falsche Ausgabe zu erzeugen.

Hauptfunktionen

  • Formatieren mit 2 oder 4 Leerzeichen oder Minimieren auf eine Zeile.
  • Eigenschaftensortierung: alphabetisch oder logisch in Box-Modell-Reihenfolge.
  • px → rem mit eigener Basis-Schriftgröße.
  • Alle Farben in HEX, RGB/RGBA oder HSL.
  • Ein Selektor-Filter, der nur die benötigten Blöcke zeigt.
  • Fehler für unausgeglichene geschweifte Klammern, eine Deklaration ohne „Eigenschaft: Wert“ und einen leeren Wert.

So funktioniert es

  1. Füge CSS in den Editor ein, öffne eine .css-Datei oder klick auf „Beispiel“.
  2. Wähle „Formatieren“ oder „Minimieren“ und die Einrückung.
  3. Leg bei Bedarf Eigenschaftensortierung, px → rem und das Farbformat fest.
  4. Kopiere das Ergebnis oder schick es an ein anderes Tool weiter.

Wann es hilft

  • Minimiertes CSS einer Website oder Bibliothek lesen.
  • Ein Stylesheet vor einem Code-Review aufräumen.
  • Ein Design in einem Schritt von px auf rem umstellen.

Datenschutz und Grenzen

Deine Daten

Dein CSS wird im Browser verarbeitet und nicht an einen Server gesendet — die Website erhält nur ein anonymes Ereignis „Tool geöffnet“, ohne Inhalt. Ein Ergebnis, das du an ein anderes Tool schickst, bleibt 24 Stunden auf diesem Gerät unter „Letzte Aktivität“. Ein „Teilen“-Link enthält das CSS im Link selbst — teile ihn also nur mit Personen, denen du vertraust.

Grenzen

  • Es arbeitet mit reinem CSS; SCSS, Less und andere Präprozessoren werden nicht unterstützt.
  • Ein Fehler hält das Ergebnis an: Korrigiere die genannte Stelle, dann erscheint die Ausgabe wieder.

Häufige Fragen

Was macht die logische Sortierung?

Sie ordnet Eigenschaften in fester Reihenfolge: zuerst Positionierung, dann Display, Größe, Außen- und Innenabstände, danach Typografie, dann Farben, Hintergründe und Rahmen, zuletzt Animationen. Zusammengehörige Eigenschaften stehen so beieinander.

Wie wird px in rem umgerechnet?

Jeder px-Wert wird durch die Basis-Schriftgröße geteilt — standardmäßig 16, also wird 24px zu 1.5rem. Ändere die Basis-Schriftgröße, wenn deine Root-Schrift anders ist.

Warum bekomme ich einen Fehler statt formatiertem CSS?

Das Tool hat etwas gefunden, das es nicht sicher lesen kann — eine fehlende Klammer, eine Deklaration ohne Doppelpunkt oder eine Eigenschaft ohne Wert. Eine Korrektur an dieser Stelle liefert ein richtiges Ergebnis statt einer Vermutung.