CSS in E-Mails

Verwendung des Nachfahren-Selektors

Jeder Webdesigner, der sich intensiver mit der Definition von Cascading Stylesheets für Webseiten beschäftigt, weiß dieses mächtige Instrument zu schätzen. Besonders praktisch ist dabei sicher die Festlegung verschachtelter Formate mit dem sogenannten Nachfahren-Selektor.

Der Nachfahren-Selektor

div p {...}

Dadurch werden für alle p-Elemente, die im HTML-Code innerhalb eines div-Elements liegen, bestimmte CSS-Eigenschaften definiert. Es ist auch möglich, diesen Selektor bei Individualformaten einzusetzen, also Elementen, denen man im HTML-Code mit dem id-Attribut eine im Dokument eindeutige Bezeichnung gegeben hat.

#content p {...}

So erhalten zum Beispiel alle p-Elemente, die im Code innerhalb eines Elements liegen, das über das Attribut id="content" gekennzeichnet worden ist, bestimmte Stylesheet-Eigenschaften.

Einsatz in HTML-E-Mails

Newsletter-E-Mails eignen sich durch ihren meist einfachen Aufbau besonders dafür, dass man sie in unterschiedliche Bereiche unterteilt und diese dann über IDs kennzeichnet. Praktischerweise geschieht dies durch div-Elemente.

<div id="kopf"></div
<div id="inhalt"></div
<div id="fuss"></div>

Es wird dadurch unter anderem möglich den Hyperlinks (a-Elementen) im Inhaltsbereich eine andere Farbe zu geben, als denen im Fußbereich des Newsletters. Dort steht häufig ja der Abmeldelink, der nicht unbedingt so sehr hervorstechen sollte.

<div id="inhalt">
  Hier ist ein guter <a href="seite.html">Link</a>
</div
<div id="fuss">
  Vom Newsletter <a href="abmelden.html">abmelden</a>
</div>

Dazu gehören dann beispielsweise folgende Formatdefinitionen:

#inhalt a {color: #c00} /* rote Links */
#fuss a {color: #999} /* graue Links */

Die Schriftfarbe des a-Elements wird unterschiedlich festgelegt. Im Inhalt erscheinen Hyperlinks dadurch rot, im Fußbereich hingegen grau. Dieses Prinzip lässt sich natürlich auch ganzheitlich für den Aufbau der Stylesheets verwenden. Man erhält dadurch eine sehr angenehme und lesbare Struktur.

Probleme bei E-Mail-Providern

Soweit die schöne Theorie. Leider gehen nicht alle Webmail-Systeme vernünftig mit so festgelegten Styles um. Bei den meisten klappt es zwar einwandfrei, aber GMX hat offenbar spezielle Ressentiments gegenüber Nachfahren-Selektoren und ignoriert diese geflissentlich, wenn man sie bei Individualformaten definiert. Schade, denn das zwingt einen dazu, beim Einsatz von Stylesheets etwas umständlicher zu Werke zu gehen.

Anders gelagert sind die Schwierigkeiten noch bei Windows Live Hotmail. Dort funktioniert der Nachfahren-Selektor zwar nach IDs, aber nicht auf klassische Weise mit zwei oder mehr HTML-Elementen.