DE

CSS minimieren, formatieren und ins HTML inlinen

Mit diesem Werkzeug können Sie CSS minimieren, lesbar formatieren oder für E-Mail-Newsletter in style-Attribute inlinen. Kommentare, Leerraum und überflüssige Nullen verschwinden, ohne dass sich die Wirkung ändert. Bei Syntaxfehlern nennen wir die Zeile, und Ihr Code bleibt im Browser.

Quelle: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Stand: .

Meine ToolboxIhre Eingaben werden nur in diesem Browser gespeichert.

Der Code wird nur in Ihrem Browser verarbeitet. Im Inline-Modus fügen Sie ein komplettes HTML-Dokument oder ein Fragment mit <style> ein.

Ihr Text bleibt in Ihrem Browser – er wird nicht gesendet, nicht gespeichert und nicht in die Adresszeile geschrieben.

Wird wie ein weiterer style-Block am Ende behandelt, zum Beispiel aus einer separaten CSS-Datei.

Ergebnis

Ergebnis
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Umfang
215 → 144 Zeichen (33 % kleiner).
Entfernt: 1 Kommentare, 0 leere Regeln. Kommentare mit /*! bleiben erhalten.

So wird gerechnet

Dieses Werkzeug bietet drei Dinge für Stylesheets: minimieren für kleine Dateien, formatieren für lesbaren Code und inlinen für HTML-E-Mails, bei denen einige Programme style-Blöcke ignorieren oder kürzen.

CSS minimieren

  1. Wählen Sie „Minimieren“ und fügen Sie Ihr CSS ein.
  2. Kopieren Sie das Ergebnis oder laden Sie es als style.min.css herunter. Darunter steht, wie viel kleiner die Datei geworden ist.

Umgeformt wird nur, was die Wirkung nicht verändert: Kommentare (außer /*! … */) und Leerraum entfallen, das letzte Semikolon vor } auch, 0.50em wird zu .5em, #aabbcc zu #abc und 0px zu 0. Nullen mit Einheit bleiben dort, wo sie nötig sind: in calc(), min(), max(), clamp(), im flex-Kürzel, bei Zeit, Winkel und Prozent sowie in Custom Properties. Zeichenketten und url() bleiben unverändert.

CSS formatieren

Aus verdichtetem CSS wird lesbarer Code: eine Deklaration pro Zeile, Selektorlisten zeilenweise, eingerückte Blöcke, Leerzeile zwischen Regeln. Kommentare bleiben stehen.

CSS ins HTML inlinen

Fügen Sie ein HTML-Dokument mit style-Block ein. Für jedes Element werden die passenden Regeln ausgewertet, nach Spezifität und Reihenfolge sortiert und ins style-Attribut geschrieben. Ein vorhandenes style-Attribut gewinnt gegen normale Regeln, !important gegen alles. Was sich nicht ins Element schreiben lässt, etwa :hover, Pseudo-Elemente, @media und @font-face, bleibt in einem style-Block erhalten.

Gut zu wissen

Ihr Code bleibt in Ihrem Browser und wird weder gesendet noch gespeichert.

Häufige Fragen

Wie kann ich CSS minimieren?

Modus „Minimieren“ wählen und das CSS einfügen. Kommentare, Leerraum und überflüssige Nullen werden entfernt, das Ergebnis lässt sich kopieren oder als Datei laden.

Ändert das Minimieren die Darstellung?

Nein, es nimmt nur sichere Umformungen vor. Nullen mit Einheit bleiben zum Beispiel in calc() und im flex-Kürzel erhalten, weil sie dort nötig sind. Zeichenketten und url() bleiben unberührt.

Wozu dient das Inlinen von CSS?

Manche E-Mail-Programme ignorieren style-Blöcke ganz oder teilweise. Beim Inlinen wird jede Regel als style-Attribut ins Element geschrieben, sodass die Formatierung dort ankommt.

Was passiert mit :hover und @media beim Inlinen?

Sie lassen sich nicht in ein Element schreiben und bleiben deshalb in einem style-Block im head erhalten. Programme, die das unterstützen, werten sie weiterhin aus.

Wie entscheidet das Werkzeug bei widersprüchlichen Regeln?

Nach der CSS-Kaskade: !important zuerst, dann höhere Spezifität, bei Gleichstand die spätere Regel. Ein vorhandenes style-Attribut zählt wie ein Selektor mit höchster Spezifität.

Wird mein Code hochgeladen?

Nein. Alles läuft in Ihrem Browser; der Code wird nicht gesendet, nicht gespeichert und nicht in die Adresszeile geschrieben.

Quellen und Rechtsgrundlagen

Stand: · So prüfen wir

Passende Werkzeuge