Output will appear here...Ein CSS-Formatierer liest ein Stylesheet und schreibt es mit konsistenten Abständen, Einrückungen und Zeilenumbrüchen neu, sodass es leicht zu lesen und zu pflegen ist. Es analysiert das CSS in seine zugrunde liegende Struktur aus Regeln, Selektoren, Deklarationen, At-Regeln und Kommentaren und druckt dann diese Struktur mithilfe eines vorhersehbaren Layouts wieder aus: eine Deklaration pro Zeile, ein einzelnes Leerzeichen nach jedem Doppelpunkt und jeder verschachtelte Block wird eine Ebene tiefer als sein übergeordnetes eingefügt. Die Stilregeln bleiben identisch, aber eine Datei, die als eine lange, ununterbrochene Zeile angekommen ist, wird zu etwas, das Sie tatsächlich scannen und bearbeiten können.
Das gleiche Tool funktioniert umgekehrt wie ein CSS-Minifier. Minifying strips every space, tab, line break, and (optional) comment that a browser not need, collaping the stylesheet to the slest byte-for-byte equivalent Ein gut formatiertes 6 KB Stylesheet fällt oft unter 4 KB, sobald Whitespace weg ist, was weniger Bytes über das Netzwerk und eine schnellere erste Lackierung bedeutet Verschönern, während Sie schreiben und debuggen; minifizieren Sie die Kopie, die Sie zur Produktion liefern.
Dieser Formatierer versteht die Teile von CSS, die naive Find-and-Replace-Skripte auslösen. Verschachtelte At-Rules wie @media und @supports halten ihre inneren Regeln korrekt eingerückt, @keyframes-Blöcke mit Prozentschritten bleiben erhalten, String-Literale in Inhalten und URL()-Werten bleiben genau so wie geschrieben und Kommentare werden auf Anfrage beibehalten oder entfernt. Alles läuft vollständig in Ihrem Browser, sodass Ihr Stylesheet, einschließlich aller proprietären Design-Token oder internen Klassennamen, nie hochgeladen wird und das Tool auch nach dem Laden der Seite weiter funktioniert auch ohne Verbindung.
Fügen Sie ein Stylesheet in den Eingabebereich ein oder geben Sie es ein. Minifiziertes, handgeschriebenes oder exportiertes CSS funktioniert alle, einschließlich Dateien mit @media, @keyframes und Kommentaren.
Klicken Sie auf Verschönern, um das CSS zum Lesen erneut einzugeben, oder auf Minifizieren, um Leerzeichen für den Versand zu entfernen. Wählen Sie 2 Felder, 4 Felder oder Registerkarten für das Verschönerungslayout.
Rechts erscheint das formatierte CSS mit einem Größenabzeichen, das die Byteänderung anzeigt, etwaige Parsing-Hinweise, wie eine nicht geschlossene Klammer, werden als Warnungen aufgeführt.
Kopieren Sie die Ausgabe in Ihre Zwischenablage oder laden Sie sie als.css-Datei herunter, damit Sie sie in Ihr Projekt oder Ihre Build-Pipeline einfügen können.
Ein Tool gibt CSS zum Lesen neu ein und streift es für den Versand wieder ab, sodass Sie nie zwei separate Dienstprogramme benötigen
Gibt die Regeln in @media, @supports und @keyframes korrekt ein, anstatt sie zu verflachen oder zu verstümmeln
Lässt den Inhalt der zitierten Zeichenfolgen und URL()-Werte unberührt, sodass Inhaltstext- und Daten-URIs die Formatierung intakt überstehen
Formatieren Sie mit zwei Leerzeichen, vier Leerzeichen oder Registerkarten, um Ihren Projektstil oder Ihre Editoreinstellungen anzupassen
Format, validate, and minify JSON data
Validate YAML syntax and convert to JSON format
Minify CSS to cut file size or beautify minified stylesheets for debugging
Format messy SQL into readable, indented queries or minify SQL to a single line
0 comments
No comments yet. Be the first to share your thoughts!