ForHosting KIT · Entwickler-Tools

CSS-Formatierer

Der CSS-Formatierer verwandelt komprimierte oder uneinheitlich geschriebene Stylesheets in Code, der leichter zu lesen, zu prüfen und zu pflegen ist.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Fügen Sie CSS aus einem Produktionsartefakt, einem eingebetteten Style-Block oder einem älteren Projekt ein. Sie erhalten eine einheitlich eingerückte Fassung mit getrennten Deklarationen. Beim Durchlaufen berücksichtigt das Werkzeug Zeichenketten, Kommentare, eckige Klammern und runde Klammern. Außerdem prüft es die Blockstruktur und meldet eine ungültige Eingabe, wenn öffnende und schließende geschweifte Klammern nicht ausgeglichen sind.

Machen Sie komprimierte Stylesheets wieder lesbar

CSS für den Produktivbetrieb wird häufig minimiert, um die übertragene Datenmenge zu verringern. Für Browser ist das praktisch, für Menschen jedoch unübersichtlich. Selektoren, Deklarationen, Media Queries und verschachtelte Blöcke können in einer einzigen Zeile stehen, sodass selbst kleine Änderungen schwer zu untersuchen sind. Dieses Werkzeug stellt eine vorhersehbare visuelle Struktur her: Jede öffnende geschweifte Klammer beginnt einen eingerückten Block, jedes Semikolon am Ende einer Deklaration erzeugt eine neue Zeile und jede schließende Klammer kehrt zur vorherigen Einzugsebene zurück. Gewöhnliche Abstände werden vereinheitlicht, ohne Text in Zeichenketten oder Kommentaren zu verändern. Das Ergebnis hilft, wenn nur der Browser-Inspektor, ein Build-Verzeichnis, eine E-Mail-Vorlage oder ein fremdes Theme als Quelle verfügbar ist. Statt Zeilenumbrüche von Hand einzufügen und verschachtelte Blöcke zu zählen, erhalten Sie eine stabile Darstellung zum Lesen oder Kopieren. Das Werkzeug validiert nicht die gesamte CSS-Grammatik und ändert keine gestalterischen Entscheidungen.

So schützt der Formatierer CSS-Werte

Ein zuverlässiger Formatierer muss erkennen, dass Satzzeichen nicht immer die Struktur steuern. Ein Semikolon innerhalb einer Zeichenkette gehört zum Inhalt und beendet keine Deklaration. Geschweifte Klammern in einer Zeichenkette sind normale Zeichen, und Satzzeichen in einer Funktion wie einer Daten-URL dürfen Eigenschaften nicht trennen. Deshalb liest das Werkzeug den Quelltext Zeichen für Zeichen und verfolgt Zeichenketten, Escape-Sequenzen, Kommentare sowie runde und eckige Klammern. Strukturelle Umbrüche entstehen nur, wenn die Satzzeichen außerhalb dieser geschützten Bereiche stehen. Eingebettete URLs, Attributselektoren, Beschriftungen und komplexe Funktionen bleiben dadurch unverändert, während normale Regelblöcke lesbar werden. Kommentare bleiben an ihrem Platz. Die Verarbeitung ist deterministisch: Dieselbe Eingabe liefert immer dieselbe Ausgabe, ohne Netzwerkzugriff, Uhrzeit, Zufall oder umgebungsabhängiges Verhalten.

Erkennen Sie unvollständige Blöcke frühzeitig

Die Formatierung dient zugleich als Strukturprüfung, wenn CSS aus einer unvollständigen Antwort, einem Browserfenster oder einer erzeugten Datei kopiert wurde. Der Scanner zählt alle strukturellen geschweiften Klammern und ignoriert Klammerzeichen in Zeichenketten, Kommentaren sowie runden oder eckigen Klammern. Erscheint eine schließende Klammer ohne passende Öffnung, schlägt die Anfrage fehl und nennt die Zeichenposition. Bleiben am Ende Blöcke offen, meldet der Fehler deren Anzahl. Diese Prüfung ist bewusst begrenzt: Ausgeglichene Klammern garantieren nicht, dass jede Eigenschaft, jeder Wert, Selektor oder jede Regel für einen bestimmten Browser gültig ist. Sie verhindern jedoch, dass ein offensichtlich abgeschnittener Block unbemerkt als erfolgreiches Ergebnis erscheint. Verwenden Sie die Ausgabe für Reviews, Versionsvergleiche, Dokumentation oder weitere Validierung. Die Nutzung im Browser ist kostenlos; automatisierte API-Formatierung kostet den veröffentlichten Grundpreis von $0.002 je Anfrage.

Anwendungsfälle

Minimierte Ressourcen untersuchen

Teilen Sie ein einzeiliges Stylesheet auf, bevor Sie einen Selektor verfolgen oder eine unerwartete Deklaration prüfen.

CSS für ein Review vorbereiten

Wenden Sie stabile Einzüge und getrennte Deklarationen an, damit sich das Review auf das Verhalten konzentriert.

Kopierte Fragmente prüfen

Erkennen Sie fehlende oder überzählige Klammern nach dem Kopieren aus einem Inspektor, einer Vorlage oder einer erzeugten Antwort.

Häufige Fragen

Was verändert der CSS-Formatierer?

Er vereinheitlicht strukturelle Abstände, rückt Blöcke mit zwei Leerzeichen ein und setzt Deklarationen mit Semikolon in eigene Zeilen.

Verändert er Text in Zeichenketten oder Kommentaren?

Nein. Zeichenketten, Escape-Zeichen und Kommentarinhalte bleiben beim Durchlaufen erhalten.

Validiert das Werkzeug die gesamte CSS-Syntax?

Nein. Es prüft strukturelle Klammern und Formatgrenzen, aber nicht jeden Selektor, jede Eigenschaft, jeden Wert oder jede Browserregel.

Was geschieht bei unausgeglichenen Klammern?

Die Anfrage endet mit einem Fehler für ungültige Eingaben, statt teilweise formatiertes CSS zurückzugeben.

Was kostet eine API-Anfrage?

Für jede API-Anfrage gilt der veröffentlichte Grundpreis von $0.002. Die Browserversion kann lokal ohne API-Aufruf ausgeführt werden.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/dev2/beautify-css

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/dev2/beautify-css \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}'

const res = await fetch("https://api.kit.forhosting.com/dev2/beautify-css", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/dev2/beautify-css",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev2/beautify-css", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev2/beautify-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "dev2.beautify_css",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Vollständige KIT-Dokumentation lesen →