CSS Beautifier & Formatierer online
Formatieren, entminimieren und organisieren Sie unordentliche oder komprimierte CSS-Stylesheets sofort in Echtzeit. Unser State-Machine-Formatierer CSS rückt verschachtelte @media-Abfragen, @keyframes, CSS-Variablen (--var), https://-URLs und inline SVG-Daten präzise ein URIs – und beinhaltet einen Ein-Klick-Minifier CSS, wenn Sie zur Produktion bereit sind.
So verschönern und entminifizieren Sie CSS online
- Fügen Sie Ihr CSS: ein. Fügen Sie Ihr komprimiertes
.min.cssoder Ihr unordentliches Stylesheet in den Input-CSS-Editor auf der linken Seite ein oder klicken Sie auf Load Sample, um verschachtelte@media-Abfragen, Variablen usw. zu testen URLs. - Wählen Sie eine Voreinstellung oder passen Sie die Einstellungen an: Wählen Sie 2 Leerzeichen, 4 Leerzeichen, Clean & Sort A–Z oder Minimieren (.min.css) aus der Schnellvoreinstellungsleiste oder passen Sie den Einzug und die Klammer an Platzierung, Selektoraufteilung und Farbkomprimierung auf der rechten Seite.
- Inspect Live-Statistiken: Sehen Sie, wie die Zähler Input, Output, Rules und Lines sofort aktualisiert werden, während Sie Optionen eingeben oder umschalten.
- Kopieren oder herunterladen: Klicken Sie auf In clipboard kopieren oder Laden Sie .css herunter, um Ihr formatiertes Stylesheet als
styles.beautified.css(oderstyles.min.cssim Minimierungsmodus) zu speichern.
CSS Formatierungs- und Optimierungsoptionen erklärt
| Option | Was es tut | Vorher | Nachher |
|---|---|---|---|
| Unminify & Indent | Erweitert einzeilige Regeln und verschachtelte @media / @keyframes Blöcke mit 2, 4 oder 8 Leerzeichen oder Tabulatoren. |
@media(max-width:768px){.box{width:100%}} |
@media (max-width: 768px) { |
| Ein Selektor pro Zeile | Teilt durch Kommas getrennte Auswahllisten auf einzelne Zeilen auf und ignoriert dabei Kommas in :is() oder :not(). |
.btn, .card, .modal { ... } |
.btn, |
| Farbwerte komprimieren | Konvertiert rgb() und 6-stellige Hex-Codes in 3-stellige Hex-Codes innerhalb eines beliebigen Deklarationswerts und behält dabei die umgebenden Token bei. |
border: 1px solid rgb(255, 0, 0); |
border: 1px durchgezogen #f00; |
| Sortierungseigenschaften (A–Z) | Sortiert Deklarationen in jedem Block alphabetisch, um Codeüberprüfungen zu standardisieren und doppelte Eigenschaften aufzudecken. | z-Index: 5; Anzeige: Flex; align-items: center; |
align-items: center; |
Warum eine Zustandsmaschine CSS Beautifier verwenden?
Viele einfache Online-Formatierer CSS teilen den Code nach jedem Doppelpunkt (:), Semikolon (;) oder geschweiften Klammern (}) auf. Dieser Ansatz scheitert, sobald Ihr Stylesheet moderne CSS-Funktionen enthält, wie zum Beispiel:
- Verschachtelte At-Rules und native CSS-Verschachtelung:
@media-Abfragen,@supports-Funktionsabfragen,@keyframes-Animationen,@layer-Blöcke und verschachtelte untergeordnete Selektoren erfordern mehrere Ebenen Einrückungsverfolgung. - Externe URLs und Inline-SVG-Daten-URIs: Eigenschaften wie
background: url("https://...")oderurl("data:image/svg+xml;utf8,enthalten Doppelpunkte und Semikolons, die niemals als CSS-Eigenschaftstrennzeichen aufgeteilt werden dürfen.") - Pseudo-Element Content Strings: Deklarationen wie
content: „Item: 1; Status: OK“behalten ihre genauen inneren Zeichen und Leerzeichen bei. - W3C-Accurate Color Shortening: Benannte Farben werden nur gekürzt, wenn das Hex-Äquivalent in der CSS-Spezifikation streng kürzer und identisch ist (z. B.
white→#fffundblack→).#000, währendgreenalsgreenbelassen wird, da#008000länger ist und#0f0eigentlichlimeist).
Häufig gestellte Fragen
Wie entminifiziere ich eine .min.css-Datei online?
Fügen Sie Ihren komprimierten .min.css-Code in das Feld Input CSS auf der linken Seite ein. Das Tool analysiert automatisch Selektoren, Deklarationen, @media-Abfragen und @keyframes in sauber eingerückten mehrzeiligen CSS in Echtzeit.
Unterstützt dieser CSS beautifier @media-Abfragen, @keyframes und data:-URIs?
Ja. Im Gegensatz zu einfachen Split-basierten Formatierern verwendet dieses Tool einen State-Machine-Parser CSS, der verschachtelte Blöcke (@media, @supports, @keyframes, @layer und native CSS-Verschachtelung) sowie Doppelpunkte beibehält und Semikolons in url("https://..."), data:image/svg+xml URIs und zitierte content-Zeichenfolgen.
Ist es sicher, CSS-Eigenschaften alphabetisch zu sortieren?
Die alphabetische Sortierung erleichtert das Durchsuchen großer Regeln und hilft, doppelte Deklarationen zu erkennen. Wenn eine Regel jedoch auf einer Abkürzungseigenschaft basiert, gefolgt von einer spezifischeren Überschreibung (oder umgekehrt, wie z. B. background-color vs. background), kann sich die Änderung der Deklarationsreihenfolge darauf auswirken, welche Eigenschaft gewinnt. Aktivieren Sie die Sortierung, wenn Ihre Regeln nicht von der Überschreibungsreihenfolge der Kurzschrift abhängen.
Kann ich CSS mit diesem Tool auch minimieren?
Ja. Klicken Sie auf die Schaltfläche Minify CSS (oder wählen Sie im Einstellungsfeld Minify (Single-Line .min.css) aus), um Kommentare, Leerzeichen und nachgestellte Semikolons zu entfernen und Farbwerte in einem kompakten Produktions-Stylesheet zu komprimieren.
Wird mein CSS-Code auf einen Server hochgeladen?
Nein. Alle CSS-Formatierungen und -Minifizierungen werden zu 100 % lokal in Ihrem Browser mit JavaScript ausgeführt. Ihre Stylesheets verlassen nie Ihren Computer.