Unsere Plattform unterstützt spezielle Kommentarblöcke, mit denen du gezielt CSS für bestimmte E-Mail-Clients einbinden kannst. Diese Blöcke werden beim Rendering erkannt und entsprechend behandelt, um maximale Kompatibilität und Kontrolle über das Styling zu gewährleisten.
1. INLINER_IGNORE
Zweck:
Erlaubt das Einfügen von CSS-Regeln, die vom Inliner-Tool nicht verarbeitet werden. Dies ist besonders hilfreich für selektive oder komplexe CSS-Targets, die unser Inliner nicht korrekt erkennen kann.
Syntax:
/* INLINER_IGNORE_START */
.your_classes {
/* REPLACE THIS COMMENT WITH YOUR STYLES */
}
/* INLINER_IGNORE_END */
Verhalten:
Alle CSS-Regeln innerhalb dieses Blocks werden nicht in HTML-Attribute geinlined, sondern als reguläres <style>-Tag im <head> der E-Mail belassen.
Beispiel:
/* INLINER_IGNORE_START */
div > u ~ div .your_classes {
/* This targets only gmail */
}
/* INLINER_IGNORE_END */
❗Ohne diese Markierung würde der obenstehende Selektor beim Inlining entfernt, da unser Parser ihn nicht einem unterstützten E-Mail-Client zuordnen kann.
2. OUTLOOK_CONDITIONAL
Zweck:
Fügt einen separaten Style-Block ein, der nur von Outlook Desktop Clients (Outlook 2007–2019, Office 365, Windows Mail) gelesen wird.
Syntax:
/* OUTLOOK_CONDITIONAL_START */
.your_classes {
/* REPLACE THIS COMMENT WITH YOUR STYLES */
}
/* OUTLOOK_CONDITIONAL_END */
Beispielausgabe:
<!--[if mso | ie]>
<style type="text/css">
.your_classes {
/* REPLACE THIS COMMENT WITH YOUR STYLES */
}
</style>
<![endif]-->
Durch die zusätzliche Einbettung dieses CSS-Blocks in einen sogenannten Conditional Comment (<!--[if mso]>...<![endif]-->) stellen wir sicher, dass die enthaltenen Styles ausschließlich von Outlook Desktop Clients interpretiert werden. Dazu zählen insbesondere Outlook 2007 bis 2019, Office 365 (Windows-Version) und Windows Mail. Andere E-Mail-Clients ignorieren diesen Teil des Codes vollständig, da sie Conditional Comments nicht auswerten.
✅ Die enthaltenen Styles werden – genau wie bei INLINER_IGNORE – nicht geinlined, sondern als separater Style-Block ausgegeben.
✅ Verwendet Microsoft Conditional Comments, die nur von MS Office Rendering Engines interpretiert werden.
3. OUTLOOK_MOBILE_CONDITIONAL
Zweck:
Zielt auf Outlook Mobile Clients (Android & iOS), indem ein spezielles CSS-Hack-Suffix (\0) verwendet wird, das nur von diesen Clients erkannt wird.
Syntax:
/* OUTLOOK_MOBILE_CONDITIONAL_START */
.your_classes {
/* Deine Mobile-Outlook-spezifischen Styles hier */
}
/* OUTLOOK_MOBILE_CONDITIONAL_END */
Beispielausgabe:
Beim Rendering wird automatisch folgendes CSS erzeugt:
/* OUTLOOK_MOBILE_CONDITIONAL_START */
.your_classes\0 {
/* REPLACE THIS COMMENT WITH YOUR STYLES */
}
/* OUTLOOK_MOBILE_CONDITIONAL_END */
Die Styles aus diesem Block werden zusätzlich in einen eigenen Style-Block gerendert, da Gmail alle Style-Blöcke ignoriert, die „fehlerhaftes“ CSS enthalten – wie etwa die \0-Erweiterung. Durch die Trennung wird verhindert, dass andere Styles mit entfernt werden.
✅ Wie bei INLINER_IGNORE werden die enthaltenen Styles nicht geinlined, sondern separat ausgegeben.
Zusammenfassung
Block | Ziel-Client | Inlining-Verhalten | Besonder-heiten |
| Alle | Wird nicht geinlined | Ermöglicht komplexe Selektoren |
| Outlook Desktop (Win/Mac) | Wird nicht geinlined | Nutzt |
| Outlook Mobile (Android/iOS) | Wird nicht geinlined | Umgehung von Gmail-Fehler-prüfung |