CDRN

CSS formatieren und einrücken

  • Dashboard
  • Dokumentation
  • API
formatiert Ihre CSS-Regeln, um sie lesbar und verständlich zu machen, erleichtert Entwicklung und Wartung

Warum ein CSS-Formatierungs-Tool verwenden?

Die CSS-Code-Formatierung ist für Entwickler unverzichtbar, um sauberen und lesbaren Code zu erhalten. Dieses Tool vereinfacht den Vorgang, indem es ermöglicht, CSS-Code schnell und präzise zu formatieren und somit die Wartung und Zusammenarbeit an Projekten zu erleichtern.

Merkmale des CSS-Formatierers

Mit diesem CSS-Formatierungs-Tool können Sie CSS-Code eingeben und für bessere Lesbarkeit formatieren. Es entfernt überflüssige Kommentare, Leerzeichen und Tabulatoren und fügt eine passende Einrückung für CSS-Regeln und -Eigenschaften hinzu.

So verwenden Sie den CSS-Formatierer

Um den CSS-Formatierer zu verwenden, befolgen Sie diese einfachen Schritte:

  1. Geben Sie Ihren CSS-Code in das dafür vorgesehene Feld ein.
  2. Klicken Sie auf die Schaltfläche "Formatieren". Das Tool formatiert den CSS-Code für bessere Lesbarkeit.
  3. Kopieren Sie den formatierten CSS-Code, um ihn in Ihren Projekten zu verwenden.

Beispiel für die Nutzung des CSS-Formatierers

Hier ist ein Beispiel für CSS-Code vor und nach der Formatierung: 


Avant le formatage :
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;text-align:center;}

Après le formatage :
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Häufig gestellte Fragen

Was ist der Unterschied zwischen einem CSS-Formatierer, einem Minifier und einem Beautifier?

Ein CSS-Formatierer (oder Beautifier) schreibt eine kompakte Datei in eine eingerückte und lesbare Version um. Ein Minifier macht das Gegenteil: Er entfernt Leerzeichen, Zeilenumbrüche und Kommentare, um die Größe der in der Produktion ausgelieferten Datei zu reduzieren. Unser Tool konzentriert sich auf das Formatieren: Es nimmt ein minifiziertes oder schlecht eingerücktes CSS-Stylesheet und richtet es mit konsistenter Einrückung, Eigenschaft für Eigenschaft, wieder neu aus.

Bleiben CSS-Kommentare bei der Formatierung erhalten?

Kommentare /* ... */ bleiben standardmäßig unverändert erhalten. Lizenzkommentare am Dateianfang (/*! ... */) sowie nützliche Annotationen (TODO, FIXME) bleiben intakt auf ihrer eigenen Zeile. Wenn Sie sie für eine Produktionsdatei entfernen möchten, verwenden Sie stattdessen einen dedizierten Minifier.

Werden Vendor-Präfixe (-webkit-, -moz-) verarbeitet?

Ja. Vendor-Präfixe werden wie gewöhnliche Eigenschaften behandelt: Sie werden eingerückt und am Rest des Blocks ausgerichtet. Der Formatierer generiert oder entfernt keine Präfixe: Er formatiert lediglich, was geliefert wird. Um fehlende Präfixe automatisch hinzuzufügen, verwenden Sie Autoprefixer in Ihrer Build-Pipeline.

Verarbeitet der Formatierer Media Queries und verschachtelte Regeln?

Ja. @media, @supports, @keyframes und andere At-Rules werden mit ihren verschachtelten Regeln innerhalb der geschweiften Klammern eingerückt. Die native CSS-Verschachtelung (& in einer Elternregel) wird ebenfalls erkannt und korrekt formatiert, ebenso wie SCSS- oder Less-Blöcke, die mit der Standard-CSS-Syntax kompatibel sind.

Kann ich SCSS, Less oder Stylus formatieren?

Das Tool zielt auf Standard-CSS ab. Erweiterte Syntaxen (SCSS-Mixins, Less-Variablen mit @, klammerlose Stylus-Syntax) werden vom Parser nicht verstanden und können ein verschlechtertes Ergebnis erzeugen. Für diese Sprachen verwenden Sie stattdessen sass --style=expanded, lessc oder einen dedizierten Formatierer wie Prettier mit dem richtigen Plugin.

Validiert der Formatierer die CSS-Syntax?

Der Formatierer führt eine minimale Syntaxanalyse durch: Er erkennt Blöcke, Selektoren und Deklarationen. Er meldet grobe Fehler (nicht geschlossene Klammer, fehlendes Semikolon am Blockende), validiert aber weder Eigenschaftsnamen noch Werte. Für eine vollständige Validierung nutzen Sie den W3C CSS Validator.

Beispielanfrage

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Eingabeschema

Feld Typ Erforderlich Standard
input text ✓ –

Endpunkte

  • GET https://cdrn.fr/api/v1/tools - listet alle verfügbaren Tools auf
  • GET https://cdrn.fr/api/v1/tools/css-formatter - liefert das Schema dieses Tools
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - führt dieses Tool mit einem JSON-Payload aus