CSS-Formatierer

Formatieren Sie das kompakte CSS in lesbare Regeln, Selektoren und Deklarationen.

Eingabe
Ausgabe
0 Zeichen 0 Zeilen

Erleichtern Sie das Lesen und Überprüfen von Stylesheets

CSS-Formatierer erweitert das kompakte CSS in lesbare Selektoren, Deklarationsblöcke, Eigenschaften und Werte. Es hilft beim Debuggen kopierter Stile, beim Überprüfen des generierten CSS, beim Überprüfen der Framework-Ausgabe oder beim Vorbereiten von Beispielen.

Durch die Verschönerung ändert sich das Layout, nicht die Kaskadensemantik. Auswahlreihenfolge, doppelte Deklarationen, benutzerdefinierte Eigenschaften, Kommentare, Medienabfragen und Ebenenreihenfolge sollten erhalten bleiben, da diese Details Auswirkungen auf die endgültigen Stile haben können.

Anleitung

  1. Fügen Sie Ihren CSS-Code in den Eingabeeditor ein.
  2. Klicken Sie auf Verschönern CSS, um Regeln und Deklarationen umzufließen.
  3. Überprüfen Sie die Ausgabe auf beibehaltene Selektorreihenfolge, Kommentare und At-Regeln.
  4. Verwenden Sie Kopieren für die Zwischenablage, Herunterladen für eine Datei oder Leeren zum Zurücksetzen.

Was ist CSS-Formatierer?

CSS-Formatierer ist ein browserbasiertes Dienstprogramm, das das Scannen von Stylesheets erleichtert. Es trennt Regelblöcke und Deklarationen, sodass Sie Selektoren, Eigenschaften, Werte und At-Regeln überprüfen können, ohne eine dichte einzeilige Datei lesen zu müssen.

Das Verhalten von CSS hängt von der Kaskadenreihenfolge, der Spezifität, der Vererbung, den Ebenen und der Auflösung benutzerdefinierter Eigenschaften ab. Durch die Formatierung sollten Regeln oder Deklarationen nicht neu angeordnet werden. Überprüfen Sie wichtige Stylesheet-Änderungen im Browser.

Eingabehinweise

Fügen Sie nur CSS ein, einschließlich At-Regeln wie @media, @supports und @layer. Behalten Sie die Selektor- und Deklarationsreihenfolge beim Zurückkopieren der Ausgabe in ein Projekt bei.

Beispiel

Dichtes CSS lässt sich leichter scannen, sobald jede Deklaration in einer eigenen Zeile steht:

--- Minified Input ---
body{margin:0;padding:0;font-size:16px;}.container{max-width:1200px;}

--- Beautified Output ---
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  max-width: 1200px;
}

MCP-Integration

MCP (Model Context Protocol) ermöglicht KI-Agenten und Apps, Coding.Tools-Werkzeuge zu entdecken und für wiederholbare Konvertierungs-, Formatierungs-, Hashing- und Generierungsabläufe auszuführen.

MCP-Toolname: css-beautifier

MCP-Endpunkt: https://coding.tools/mcp

Rufen Sie zuerst tools/list auf. Jeder Tool-Eintrag enthält inputSchema, outputSchema und examples, damit ein KI-Agent oder Client gültige Argumente ohne Raten erstellen kann.

Bei tools/call lesen Sie result.content[0].text für den Anzeigewert und result.structuredContent für maschinelles Parsen. Tool-Fehler liefern isError: true; Protokollfehler liefern einen JSON-RPC error.

Beispiel für eine tools/call-Anfrage:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"css-beautifier","arguments":{"input":".button{color:white;background:#3366cc;padding:8px 12px;}"}}}'

Die meisten Text- und Datentools akzeptieren eine input-Zeichenkette sowie optionale options. Bildtools, die Browser-Bild-APIs benötigen, werden zur Erkennung aufgelistet und geben bei Bedarf einen Link zur Weboberfläche zurück.