So funktioniert’s
- Fügen Sie Ihren CSS-Code in den Eingabeeditor ein.
- Wählen Sie unter „Einrückung“ zwischen „2 Leerzeichen“, „4 Leerzeichen“ und „Tabulator“.
- Wählen Sie unter „Geschweifte Klammern“ die Einstellung „Gleiche Zeile“ oder „Nächste Zeile“.
- Deaktivieren Sie „Kommentare behalten“, wenn Sie gewöhnliche Kommentare entfernen möchten.
Beispiele
Minifiziertes CSS lesbar machen
.warenkorb{padding:1rem;background:#f5f5f5;color:#222}.preis{font-weight:700;color:#b00020}.warenkorb {
padding: 1rem;
background: #f5f5f5;
color: #222;
}
.preis {
font-weight: 700;
color: #b00020;
}Verschachtelte Regeln mit vier Leerzeichen
@media (min-width:768px){.produktkarte{display:grid;gap:1rem;&:hover{background:#f5f5f5}}}@media (min-width:768px)
{
.produktkarte
{
display: grid;
gap: 1rem;
&:hover
{
background: #f5f5f5;
}
}
}Eigenschaften sortieren und Kommentare entfernen
/*! Shop-Styles: MIT-Lizenz */
/* Produktübersicht */
.produktliste{padding:1rem;color:#222;--abstand:1rem;display:grid;gap:var(--abstand)}/*! Shop-Styles: MIT-Lizenz */
.produktliste {
--abstand: 1rem;
color: #222;
display: grid;
gap: var(--abstand);
padding: 1rem;
}Tipps
- Für SCSS oder LESS den Code Formatter verwenden.
- Möglichst kleine Datei? CSS minifizieren.
- Vorher und nachher mit Texte vergleichen gegenüberstellen.
Häufige Fragen
Warum werden nicht alle CSS-Eigenschaften alphabetisch sortiert?
Bei „Eigenschaften sortieren“ mit A–Z bleibt die ursprüngliche Reihenfolge erhalten, wenn das Umsortieren die Wirkung zusammengehöriger Eigenschaften ändern würde, etwa bei margin und margin-top. In diesem Fall erscheint ein Hinweis. Wird sortiert, stehen CSS-Variablen (--name) vor den übrigen Eigenschaften.
Kann ich mit dem CSS Formatter Syntaxfehler finden?
Syntaxfehler werden mit Zeile und Spalte gemeldet, und die betroffene Zeile wird im Eingabeeditor markiert. Bei einem Fehler bleibt die Ausgabe leer.
Kann ich SCSS oder LESS formatieren?
Für SCSS und LESS verwenden Sie den Code Formatter. Wenn ein Syntaxfehler auf SCSS oder LESS hindeutet, erscheint ein entsprechender Hinweis.
Wird mein CSS auf einen Server hochgeladen?
Das CSS wird im Browser verarbeitet und vom Tool nicht an den Server gesendet. Gespeichert werden nur Ihre Optionseinstellungen; Analyseereignisse enthalten keinen CSS-Code.
Welche CSS-Dateien kann ich hochladen?
Akzeptiert werden Dateien mit der Endung .css oder .txt bis 10 MB. Größere Dateien müssen Sie aufteilen und die Teile einzeln formatieren.