Output will appear here...CSS-Minifier & Beautifier ist ein bidirektionales Stylesheet-Tool: Es komprimiert CSS, indem alles entfernt wird, was der Browser nicht benötigt – Kommentare, Leerzeichen, redundante Semikolons, Langform-Hex-Farben und Einheiten auf Nullwerten – und kann den Prozess umkehren und ein einzeiliges Produktionspaket wieder in lesbare, richtig eingerückte Regeln erweitern. Jedes Byte, das Sie aus einem Stylesheet blockieren, ist ein Byte, das der Browser früher herunterlädt und analysiert, der direkte Kernmetriken für Web-Vitalwerte wie First Contentful Paint und Größte inhaltliche Farbe speist.
Der Minifier ist bewusst konservativ. Es ist sich voll und ganz der Zeichenfolgenliterale, URL()-Werte und calc()-Ausdrücke bewusst, so dass es nie den Leerraum entfernt, von dem Calc(100% - 20px) abhängt, schreibt niemals farbähnlichen Text in einer Inhaltszeichenfolge neu und berührt niemals den Abstand, der div:hover von div:hover unterscheidet. Bei typischen handgeschriebenen Stylesheets können Sie eine Größenreduzierung von 25–40% vor GZIP erwarten; kombiniert mit Gzip oder Brotli auf dem Draht rasiert die Miniifizierung immer noch eine aussagekräftige Schicht, da die Komprimierung bei wiederholten, kommentarfreien Eingaben besser funktioniert.
Alles läuft zu 100% clientseitig in Ihrem Browser. Ihr CSS wird niemals auf einem Server hochgeladen, protokolliert oder gespeichert. Dies bedeutet, dass Sie proprietäre Design-Systemcode, unveröffentlichte Produktstile oder Clientarbeit sicher einfügen können. Es funktioniert auch offline, sobald die Seite geladen ist - nützlich, wenn Sie einen schnellen Minify-Pass benötigen, ohne eine vollständige PostCSS- oder ESBuild-Pipeline zu verkabeln.
Legen Sie Ihr Stylesheet in den Eingabebereich – eine einzelne Regel, eine Komponentendatei oder ein vollständiges Produktionspaket. Sowohl formatierte als auch bereits minimierte CSs werden akzeptiert.
Klicken Sie auf Minify, um die Produktion zu komprimieren, oder versenden Sie, um den minimierten Code in einer Deklaration pro Zeile mit einer Leerzeile zwischen den Regeln zu erweitern. Wählen Sie zur Verschönerung zuerst Ihre bevorzugte Einbuchtung aus.
Das Tool meldet die genaue Größe und prozentuale Änderung vor/nach (z.B. "12,4 KB → 8,1 KB, −34%"), damit Sie genau wissen, was die Transformation Sie vor dem Versand gekauft haben.
Kopieren Sie das Ergebnis mit einem Klick in Ihre Zwischenablage oder laden Sie es als .css-Datei herunter, die bereit ist, in Ihre Build-Ausgabe oder Ihr CDN abzulegen.
Respektiert Zeichenfolgenliterale, URL()-Werte und calc()-Spacing – es komprimiert aggressiv, ohne jemals gültiges CSS zu beschädigen
Schreibt #FFFFFF in #FFF und 0px auf 0 um, wo nachweislich sicher ist, und drückt zusätzliche Bytes über die Entfernung von nur dem einfachen Whitespace hinaus
Behält /*! Bannerkommentare intakt, damit die Header der Bibliothekslizenzen überleben, die Minimierung überleben und das Verhalten der Standard-Build-Tools übereinstimmen
Erweitert verkleinerte Bundles in lesbare Regeln mit konfigurierbaren 2-, 4- oder 8-fachen Einrückungen für das Debuggen von Produktionsproblemen
Minify HTML markup for faster page loads or beautify it for readable, indented source
Format messy SQL into readable, indented queries or minify SQL to a single line
Format, validate, and minify JSON data
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!