CSS in E-Mails

CSS-Unterstützung in Webmail-Systemen

Erster Teil - Referenzierung und Selektoren

In einer ersten Testrunde wurde durch verschiedene präparierte E-Mails ermittelt, wie es um die CSS-Unterstützung in den Webmail-Systemen fünf beliebter deutscher E-Mail-Provider bestellt ist. Im Blickpunkt waren dabei die Fragen, wie CSS am besten zu referenzieren sind und mit welchen Selektoren die Webmail-Systeme zurecht kommen.

Referenzierung von CSS
Referenzierung GMX Freenet Web.de Hotmail Yahoo
<style> im <head> Ja Ja Nein Ja Ja
<style> im <body> Ja Ja Ja Ja Ja
<link> im <head> Ja Ja Nein Nein Nein
<link> im <body> Ja Ja Ja Nein Nein

Die Verarbeitung der durch das link-Element referenzierten CSS erfolgt bei GMX erst nach Auswahl der Funktion Volldarstellung, die die E-Mail in einem separaten Fenster lädt.

CSS-Selektoren
Selektor GMX Freenet Web.de Hotmail Yahoo
* Ja Ja Ja Nein Ja
x Ja Ja Ja Ja Ja
x y Ja Ja Ja Nein Ja
x > y Ja Ja Ja Nein Ja
x + y Ja Ja Ja Nein Ja
x, y Ja Ja Ja Nein Ja
x[attribut] Ja Ja Ja Nein Ja
.class Ja Ja Ja Ja Ja
.class x Ja Ja Ja Ja Ja
x.class Ja Ja Ja Nein Ja
x.class y n/a n/a n/a n/a n/a
#id Ja Ja Ja Ja Ja
#id x Nein Ja Ja Ja Ja

Zu beachten ist, dass der Kind-Selektor (>) und der Nachbar-Selektor (+) vom Internet Explorer 6.0 nicht verarbeitet werden. Gleiches gilt für attributbedingte Formate. Insofern ist von einem Einsatz noch abzuraten, falls man eine Zielgruppe hat, die noch vermehrt ältere Browserversionen einsetzt.

Zweiter Teil - Eigenschaften

In einer zweiten Testrunde wurde wiederum durch verschiedene präparierte E-Mails ermittelt, wie es um die CSS-Unterstützung in den Webmail-Systemen in Bezug auf die verschiedenen CSS-Eigenschaften bestellt ist. Hierbei wurden die gängigsten Eigenschaften, sowohl in der Standard- als auch in der Kurzschreibweise getestet.

Schrift
Eigenschaft GMX Freenet Web.de Hotmail Yahoo
color Ja Ja Ja Ja Ja
font-family Ja Ja Ja Ja Ja
font-size Ja Ja Ja Ja Ja
font-style Ja Ja Ja Ja Ja
font-variant Ja Ja Ja Ja Ja
font-weight Ja Ja Ja Ja Ja
letter-spacing Ja Ja Ja Ja Ja
text-decoration Ja Ja Ja Ja Ja
text-transform Ja Ja Ja Ja Ja
word-spacing Ja Ja Ja Ja Ja
Absätze
Eigenschaft GMX Freenet Web.de Hotmail Yahoo
line-height Ja Ja Ja Ja Ja
text-align Ja Ja Ja Ja Ja
text-indent Ja Ja Ja Ja Ja
vertical-align Ja Ja Ja Ja Ja
white-space Ja Ja Ja Ja Ja
Hintergrund
Eigenschaft GMX Freenet Web.de Hotmail Yahoo
background Ja Ja Ja Nein Ja
background-attachment Ja Ja Ja Nein Ja
background-color Ja Ja Ja Ja Ja
background-image Ja Ja Ja Nein Ja
background-position Ja Ja Ja Nein Ja
background-repeat Ja Ja Ja Nein Ja
Abstände
Eigenschaft GMX Freenet Web.de Hotmail Yahoo
padding Ja Ja Ja Ja Ja
padding-top Ja Ja Ja Ja Ja
padding-right Ja Ja Ja Ja Ja
padding-bottom Ja Ja Ja Ja Ja
padding-left Ja Ja Ja Ja Ja
margin Ja Ja Ja Ja Ja
margin-top Ja Ja Ja Ja Ja
margin-right Ja Ja Ja Ja Ja
margin-bottom Ja Ja Ja Ja Ja
margin-left Ja Ja Ja Ja Ja
Rahmen
Eigenschaft GMX Freenet Web.de Hotmail Yahoo
border Ja Ja Ja Ja Ja
border-bottom Ja Ja Ja Ja Ja
border-bottom-color Ja Ja Ja Ja Ja
border-bottom-style Ja Ja Ja Ja Ja
border-bottom-width Ja Ja Ja Ja Ja
border-color n/a n/a n/a n/a n/a
border-left Ja Ja Ja Ja Ja
border-left-color Ja Ja Ja Ja Ja
border-left-style Ja Ja Ja Ja Ja
border-left-width Ja Ja Ja Ja Ja
border-right Ja Ja Ja Ja Ja
border-right-color Ja Ja Ja Ja Ja
border-right-style Ja Ja Ja Ja Ja
border-right-width Ja Ja Ja Ja Ja
border-style n/a n/a n/a n/a n/a
border-top Ja Ja Ja Ja Ja
border-top-color Ja Ja Ja Ja Ja
border-top-style Ja Ja Ja Ja Ja
border-top-width Ja Ja Ja Ja Ja
border-width n/a n/a n/a n/a n/a
Listen
Eigenschaft GMX Freenet Web.de Hotmail Yahoo
list-style Ja Ja Ja Nein Ja
list-style-image Ja Ja Ja Nein Ja
list-style-position Ja Ja Ja Nein Ja
list-style-type Ja Ja Ja Nein Ja
Tabellen
Eigenschaft GMX Freenet Web.de Hotmail Yahoo
border-collapse Ja Ja Ja Ja Ja
border-spacing Ja Ja Ja Ja Ja
caption-side Ja Ja Ja Ja Ja
empty-cells Ja Ja Ja Ja Ja
table-layout Ja Ja Ja Ja Ja
Anzeige
Eigenschaft GMX Freenet Web.de Hotmail Yahoo
bottom Ja Ja Ja Nein Nein
clear Ja Ja Ja Ja Ja
clip Nein Ja Ja Nein Nein
cursor Ja Ja Ja Nein Ja
direction Ja Ja Ja Ja Ja
display Ja Ja Ja Ja Ja
float Ja Ja Ja Ja Ja
height Ja Ja Ja Ja Ja
left Ja Ja Ja Nein Nein
max-height Ja Ja Ja Ja Ja
max-width Ja Ja Ja Ja Ja
min-height Ja Ja Ja Ja Ja
min-width Ja Ja Ja Ja Ja
overflow Ja Ja Ja Ja Ja
position Ja Ja Ja Nein Nein
right Ja Ja Ja Nein Nein
top Ja Ja Ja Nein Nein
visibility Ja Ja Ja Ja Ja
width Ja Ja Ja Ja Ja
z-index Ja Ja Ja Nein Nein