← Alle Artikel
· 13 Min. Lesezeit

CSS in E-Mails: Was du kannst und nicht kannst

Die praktische Realität des Stylings von HTML-E-Mails mit CSS.

CSS in E-Mails ist ein eingeschränkter Teil von CSS in Browsern. Eigenschaften, die du täglich im Web-Development verwendest, funktionieren möglicherweise nicht in E-Mail-Clients. Dieser Leitfaden dokumentiert, was sicher ist, was Workarounds erfordert und was du vollständig vermeiden solltest.

Wenn du die CSS-Beschränkungen überspringen möchtest, generieren visuelle Builder wie Sequenzy kompatiblen Code automatisch. Aber das Verständnis von CSS in E-Mails hilft dir, Probleme zu debuggen und fundierte Entscheidungen zu treffen.

Inline vs. eingebettete Styles

Inline Styles (am zuverlässigsten)

<p style="color: #333333; font-size: 16px; line-height: 1.5;">
  Text with inline styles
</p>

Inline Styles funktionieren in allen E-Mail-Clients. Sie haben die höchste Spezifität und können nicht entfernt werden. Nachteil: ausführlicher Code und keine Wiederverwendung ohne Duplikation.

Eingebettete Styles (Head)

<head>
  <style>
    .text-body {
      color: #333333;
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p class="text-body">Text with class</p>
</body>

Eingebettete Styles funktionieren in den meisten Clients, aber Gmail hat sie historisch in bestimmten Kontexten entfernt. Verwende sie für Verbesserungen (Media Queries), aber nicht für kritische Styles.

Beste Praxis: Beides

Verwende Inline Styles für kritisches Rendering. Nutze eingebettete Styles für Media Queries und progressive Verbesserungen. CSS-Inliner-Tools automatisieren diese Konvertierung.

Typografie-CSS

Sichere Font-Eigenschaften

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold; /* or 700 */
font-style: italic;
color: #333333;
line-height: 1.5; /* or 24px */
text-align: left; /* center, right */
text-decoration: none; /* underline */
text-transform: uppercase; /* lowercase */
letter-spacing: 1px;

Alle großen Clients unterstützen diese Eigenschaften. Bleib bei px-Einheiten für font-size (em/rem weniger zuverlässig). Vermeide font-weight-Werte außer normal (400) und bold (700).

Web Fonts

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

<p style="font-family: 'Roboto', Arial, sans-serif;">
  Custom font with fallback
</p>

Web Fonts funktionieren in Apple Mail, iOS und einigen Android-Clients. Gmail und Outlook verwenden den Fallback. Füge immer einen web-sicheren Fallback hinzu.

Box-Model-CSS

Padding (sicher auf Tabellenzellen)

<td style="padding: 20px;">
  Content with padding
</td>

<!-- Or individual sides -->
<td style="padding-top: 20px; padding-bottom: 10px;">
  Content
</td>

Padding auf Tabellenzellen ist zuverlässig. Auf divs und Absätzen variieren die Ergebnisse. Bei Unsicherheit: Tabellenzellen verwenden.

Margin (vorsichtig verwenden)

Margins sind inkonsistent, besonders in Outlook. Bevorzuge Padding auf Containerzellen statt Margins auf Inhalten.

<!-- Instead of margin on heading -->
<td style="padding-bottom: 20px;">
  <h1 style="margin: 0;">Heading</h1>
</td>

Breite und Höhe

width: 600px;
width: 100%;
max-width: 600px;
height: 200px; /* Avoid when possible */

Width funktioniert zuverlässig. max-width ist nützlich für responsive E-Mails, aber Outlook ignoriert es (bedingte Kommentare für Outlook-Fixbreite verwenden). Höhe vermeiden, da Inhalt die Höhe bestimmen sollte.

Hintergrund-CSS

Hintergrundfarbe (sicher)

background-color: #f5f5f5;
background: #f5f5f5; /* shorthand works too */

Hintergrundbilder (komplex)

<!-- Works in most clients, NOT Outlook -->
<td style="background-image: url('image.jpg'); background-color: #333;">

<!-- For Outlook, use VML -->
<!--[if gte mso 9]>
<v:rect style="width:600px;height:300px;" stroke="false" fill="true">
<v:fill type="tile" src="image.jpg" />
<v:textbox>
<![endif]-->

<div style="background-image: url('image.jpg');">
  Content
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Hintergrundbilder erfordern VML für Outlook-Unterstützung. Füge immer einen Hintergrundfarben-Fallback hinzu.

Rahmen-CSS

Feste Rahmen (sicher)

border: 1px solid #cccccc;
border-bottom: 2px solid #333333;
border-top: none;

Rahmenradius (kein Outlook)

border-radius: 4px; /* Ignored in Outlook */

Border-radius funktioniert in den meisten Clients, aber Outlook zeigt eckige Ecken. Für Buttons ist das meist akzeptabel. Für kritische abgerundete Designs: Bilder verwenden.

Layout-CSS

Display-Eigenschaft

display: block;
display: inline;
display: inline-block;
display: none;

Grundlegende Display-Werte funktionieren. display: flex und display: grid funktionieren NICHT in E-Mails. Verwende Tabellen für Layouts.

Positionierung (vermeiden)

CSS-Positionierung (absolute, relative, fixed) funktioniert nicht zuverlässig. Verwende tabellenbasiertes Layout stattdessen.

Float (vermeiden)

Floats sind in Outlook unzuverlässig. Verwende Tabellenspalten für nebeneinanderliegende Inhalte.

Media Queries

@media screen and (max-width: 600px) {
  .mobile-full {
    width: 100% !important;
    display: block !important;
  }
  .mobile-hide {
    display: none !important;
  }
  .mobile-text-center {
    text-align: center !important;
  }
}

@media (prefers-color-scheme: dark) {
  .dark-bg {
    background-color: #1a1a1a !important;
  }
}

Media Queries funktionieren in Apple Mail, iOS, Gmail App. Sie funktionieren NICHT in Outlook oder Gmail Web (zuverlässig). Verwende !important, um Inline Styles zu überschreiben.

CSS-Reset für E-Mails

<style>
  /* Prevent text size adjustment */
  body, table, td, p, a, li {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /* Remove table spacing */
  table, td {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }

  /* Remove image borders and gaps */
  img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    display: block;
    outline: none;
    text-decoration: none;
  }

  /* Reset body */
  body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

CSS-Inlining

Tools konvertieren eingebettete Styles zu Inline Styles für Zuverlässigkeit:

  • Juice: Node.js-Bibliothek für CSS-Inlining
  • Premailer: Online-Tool und Gem
  • MJML: Handhabt Inlining während der Kompilierung
  • E-Mail-Builder: Sequenzy und andere inline automatisch

Debugging von CSS-Problemen

  1. Überprüfe zuerst Inline Styles. Fehlende oder falsche Inline Styles sind das häufigste Problem.
  2. Teste in Outlook. Wenn CSS in Outlook funktioniert, funktioniert es wahrscheinlich überall.
  3. Vereinfache. Entferne CSS, bis das Problem verschwindet, dann schrittweise wieder hinzufügen.
  4. Überprüfe Spezifität. Inline Styles können deine eingebetteten Styles überschreiben.

Das Wichtigste in Kürze

CSS in E-Mails ist eine eingeschränkte Sprache. Halte dich an gut unterstützte Eigenschaften, verwende Inline Styles für kritisches Rendering und teste über Clients hinweg. Frameworks und Builder wie Sequenzy handhaben diese Beschränkungen automatisch.

Die Einschränkungen sind frustrierend, wenn du an modernes Web-CSS gewöhnt bist. Aber sie zu verstehen, ermöglicht es dir, E-Mails zu erstellen, die konsistent in allen quirksigen E-Mail-Clients deiner Empfänger gerendert werden.