Inline-Stile für E-Mails

Viele E-Mail-Clients – allen voran Gmail im Web vor Mai 2016 sowie mehrere mobile Apps bis heute – entfernen oder verändern <style>-Blöcke und externe Stylesheets. Inline-Attribute wie style="..." sind die einzige CSS-Variante, deren Erhalt in jedem Client garantiert ist.

Inline-Styles von Hand zu schreiben ist nicht wartbar. Entwickeln Sie die E-Mail mit normalen <style>-Tags und Klassennamen und führen Sie beim Build einen Inliner (Juice, Premailer, mjml) aus, der vor dem Versand jede Regel in das style-Attribut des jeweils passenden Elements kopiert.

Inline-Styles haben mit Ausnahme von !important die höchste Spezifität. Eine Media Query, die einen Inline-Wert überschreiben soll, muss für jede Eigenschaft !important verwenden, da andernfalls unabhängig vom @media-Kontext die Inline-Deklaration gewinnt.

Inliner kopieren nur Regeln, die auf einzelne Elemente zutreffen; @media-Blöcke bleiben im <style>-Tag, weil sie nicht in einzelne Deklarationen umgewandelt werden können. Das ist unproblematisch: Gmail und andere Clients, die Styles entfernen, lassen die Inline-Styles unverändert, und Clients mit <style>-Unterstützung wenden die Media Queries zusätzlich an.

Einige Clients haben Probleme mit Kurzschreibweisen: font: 14px/1.4 Arial wird möglicherweise vollständig ignoriert. Verwenden Sie die Langform (font-family, font-size, line-height), damit jede Eigenschaft unabhängig funktioniert oder fehlschlägt.

Der Dark Mode invertiert Farben in vielen Clients automatisch. Wenn Sie color und background-color für Textcontainer ausdrücklich setzen, verhindern Sie Katastrophen wie schwarzen Text auf schwarzem Hintergrund. Setzen Sie beide Eigenschaften immer gemeinsam.

Verwenden Sie für Größenangaben px. rem, vh und vw werden uneinheitlich unterstützt. Prozentsätze funktionieren bei Tabellen für Layouts mit voller Breite; absolute Pixelbreiten bei inneren Tabellen und Zellen werden in allen Clients identisch dargestellt.

Webfonts über @font-face funktionieren in Apple Mail, iOS Mail und Thunderbird, schlagen in Outlook und Gmail jedoch fehl. Verwenden Sie als Inline-Wert einen websicheren Stack (Arial, Helvetica, sans-serif) und setzen Sie @font-face ausschließlich als progressive Erweiterung für Clients ein, die dies unterstützen.

Ein Inline-background-image auf einem div funktioniert in modernen Clients, wird von Outlook jedoch ignoriert. Verwenden Sie bgcolor als Fallback und bedingtes VML mit <v:rect> für Outlook, damit jeder Client einen optisch gleichwertigen Hintergrund rendert, auch wenn eine vollständig originalgetreue Darstellung nicht möglich ist.

Inline-Styles sehen in der Browser-Vorschau korrekt aus, können in Gmail, Outlook oder iOS Mail aber trotzdem anders dargestellt werden. Verwenden Sie Litmus, Email on Acid oder die kostenlosen Mailtrap-Vorschauen, um jeden wichtigen Client vor dem Versand der Kampagne zu überprüfen.

Fügen Sie im <style>-Tag einen kleinen Reset hinzu (margin: 0 auf body, line-height: 100% auf Tabellen, border: none auf Bildern), um die standardmäßigen Client-Styles zu neutralisieren. Schließen Sie ihn in eine Media Query ein, wenn Sie ihn nur dort anwenden möchten, wo <style> berücksichtigt wird.

Warum benötigen Media Queries in HTML-E-Mails für jede Eigenschaft !important?

E-Mails benötigen Inline-Styles, damit sie das Entfernen von Styles durch Clients überstehen. Verfassen Sie das CSS normalerweise im <style>-Tag und übertragen Sie es beim Build in Inline-Styles. Verwenden Sie !important innerhalb von Media Queries, um die Spezifität von Inline-Styles zu übertreffen, bevorzugen Sie ausgeschriebene Eigenschaften gegenüber Kurzschreibweisen, setzen Sie color und background-color explizit, bleiben Sie bei px-Einheiten und testen Sie vor dem Versand in echten Clients.