CSS-Inliner für E-Mail
CSS aus einem Style-Block in Inline-Style-Attribute verschieben, damit es in E-Mail-Clients funktioniert.
CSS-Inliner für E-Mail
Die meisten E-Mail-Clients ignorieren oder entfernen CSS aus <style>-Blöcken — Gmails Web-App ist das bekannte Beispiel. Die Lösung ist, jede Regel als style=""-Attribut auf das jeweilige Element zu verschieben, und genau das macht dieses Tool: HTML mit einem <style>-Block einfügen und das gleiche Markup mit den inlined Styles zurückbekommen, bereit zum Einfügen in eine Kampagne oder Transaktionsvorlage.
Das Zusammenführen beachtet CSS-Spezifität standardmäßig, also schlägt eine Regel wie #footer einen einfachen a, selbst wenn diese Regel später im Stylesheet kommt — deaktivieren Sie "Selector-Spezifität respektieren", um stattdessen nach Quellreihenfolge zusammenzuführen. Regeln, die nicht inlinable sind — Media Queries, :hover, andere At-Regeln — werden nie stillschweigend gelöscht: "Regeln behalten, die nicht inlinable sind" behält sie in einem gekürzten <style>-Block, während "Original <style>-Block entfernen" entscheidet, ob dieser Block überhaupt emittiert wird. "Legacy width/bgcolor-Attribute hinzufügen" spiegelt width, height und background-color auf die einfachen Attribute wider, die ältere Outlook-Versionen erwarten, "Ungenutzte Klassen und IDs entfernen" bereinigt Selektoren, auf die nichts verweist, und "Ausgabe minimieren" reduziert verbleibenden Leerraum.
Die Selectorunterstützung umfasst Type-, Class-, ID- und Attributselektoren sowie Nachfahren- und Kind-Kombinatoren — die Muster, die echte E-Mail-Stylesheets verwenden. Das eigene style=""-Attribut eines Elements gewinnt immer gegen alles, das zusammengeführt wird, wie Browser das Kaskadieren anwenden. Mit "Warnungen für nicht unterstützte Eigenschaften anzeigen" aktiviert, werden Eigenschaften, die viele Clients ignorieren — float, position: fixed, Transforms, box-shadow — in einem Kommentar oben in der Ausgabe gekennzeichnet, damit Sie sie vor dem Test fangen.
Alles läuft lokal in Ihrem Browser: Das HTML, das Sie einfügen, wird nirgendwo hochgeladen. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter oder geben Sie es direkt an ein anderes Tool weiter, um es weiterhin zu bereinigen.