Eingabe
Entwicklerwerkzeug
CSS-Formatierer
CSS ohne Upload lesbar formatieren oder minimieren. Regeln, Selektoren und Deklarationen prüfen, grundlegende Syntaxhinweise ansehen und das Ergebnis in einer isolierten Vorschau testen.
Größe
Regeln
Selektoren
Deklarationen
Ausgabe
Formatiertes oder minimiertes CSS
Prüfhinweise
CSS-Probleme und Warnungen
Struktur
Übersicht der Selektoren und Deklarationen
| # | Selektor / At-Regel | Deklarationen | Eigenschaften |
|---|
Isolierte Vorschau
Beispiel mit deinem CSS
Die Vorschau läuft in einem Sandbox-Frame mit strenger Inhaltssicherheitsrichtlinie. Stile beeinflussen diese Seite nicht und entfernte Ressourcen werden blockiert.
Beispiele
Häufige CSS-Beispiele
CSS-Kurzreferenz
| Konzept | Beispiel | Hinweise |
|---|---|---|
| Regel | .card { padding: 16px; } | Ein Selektor mit anschließendem Deklarationsblock. |
| Deklaration | color: #333; | Eigenschaft und Wert, getrennt durch einen Doppelpunkt. |
| Benutzerdefinierte Eigenschaft | --accent: #16735f; | Wiederverwendbare CSS-Variable mit zwei Bindestrichen am Namensanfang. |
| Medienabfrage | @media (max-width: 640px) | Wendet verschachtelte Regeln an, wenn eine Bedingung erfüllt ist. |
| Keyframes | @keyframes fade | Definiert die Schritte einer CSS-Animation. |
Hinweise zu Formatierung und Prüfung
Stringsichere FormatierungZeichenketten, Kommentare und Klammerinhalte werden erkannt, bevor strukturelle Abstände geändert werden.
Konservative MinimierungUnnötige Abstände werden entfernt, erforderliche Abstände in Funktionen wie calc() bleiben erhalten.
Leichte SyntaxprüfungHinweise prüfen ausgeglichene Trennzeichen, offene Strings oder Kommentare und fehlende Doppelpunkte. Vollständige Konformität erfordert einen Parser oder Linter.
Lokale VerarbeitungCSS bleibt im Browser. Formatierung, Statistik, Prüfung und Vorschau laden die Eingabe nicht hoch.
Häufige Fragen zum CSS-Formatierer
Lädt dieser CSS-Formatierer meinen Code hoch?
Nein. Formatierung, Minimierung, Statistik, Hinweise und Vorschau laufen lokal im Browser.
Ersetzt das einen vollständigen CSS-Linter?
Nein. Häufige Strukturprobleme werden erkannt, aber Standardkonformität, Browserkompatibilität und Projektregeln benötigen einen spezialisierten Parser oder Linter.
Kann die Minimierung das CSS-Verhalten ändern?
Strings, gewünschte Kommentare und Funktionsabstände bleiben erhalten. Ungewöhnliche Alt-Hacks oder Build-Anweisungen sollten vor dem Einsatz getestet werden.
Ist die CSS-Vorschau von der Seite isoliert?
Ja. Ein Sandbox-iframe mit strenger Inhaltssicherheitsrichtlinie blockiert entfernte Ressourcen.