Trent Wyman


Top Navigation

Designing Universal HTML Emails with CSS - A Browser Support Checklist

Categories:

Designing an HTML email that renders consistently across the major email clients can be very tedious and time consuming. Support for even simple CSS varies considerably between email clients, and even different versions of the same client. Here is a checklist to compare what CSS styles are allowed by various email browsers such as Outlook, Yahoo, Hotmail, Apple iPhone, Gmail, Lotus, & AOL.

Style Element Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
<style> in <head> Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
<style> in <body> Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
Link Element Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
<link> in <head> Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
<link> in <body> Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
Selectors Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
e Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
* Yes Yes No Yes Yes No No Yes No Yes Yes
e.className Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
e#id Yes Yes Yes No Yes Yes No Yes No Yes Yes
e:link Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
e:active, e:hover Yes Yes Yes Yes Yes No No Yes No Yes Yes
e:first-line Yes No Yes No Yes No No Yes No Yes Yes
e:first-letter Yes No Yes No Yes No No Yes No Yes Yes
e > f No Yes Yes No Yes No No No No No No
e:focus No Yes Yes No Yes No No Yes No No No
e+f No No No No Yes No No Yes No No No
e[foo] No Yes Yes No Yes No No Yes No No No
Text & Fonts Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
direction Yes Yes Yes Yes Yes No No Yes No Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
white-space No Yes Yes Yes Yes Yes Yes Yes No No No
word-spacing Yes Yes Yes Yes Yes No Yes Yes No Yes Yes
vertical-align Yes Yes Yes Yes Yes No Yes Yes No Yes Yes
Color & Background Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
background Yes Yes Yes No Yes Partial or buggy support Partial or buggy support Yes No No Yes
background-color Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
background-image Yes Yes Yes No Yes No No Yes No No Yes
background-position Yes Yes Yes No Yes No No Yes No No Yes
background-repeat Yes Yes Yes No Yes No No Yes No No Yes
Box Model Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
border Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
height Yes Yes Yes Yes Yes No Yes Yes No Yes Yes
margin Yes Yes Yes No Yes Yes Yes Yes No Yes Yes
padding Yes Yes Yes Yes Yes Partial or buggy support Yes Yes No Yes Yes
width Yes Yes Yes Yes Yes No Yes Yes No Yes Yes
Positioning & Display Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
bottom Yes No No No Yes No No Yes No Yes Yes
clear Yes Yes Yes Yes Yes No Yes Yes No Yes Yes
clip Yes No No No Yes No No Yes No No Yes
cursor Yes Yes Yes Yes Yes No No No No Yes Yes
display Yes Yes Yes Yes Yes No Yes Yes Yes Yes Yes
float Yes Yes Yes Yes Yes No Yes Yes No Yes Yes
left Yes No No No Yes No No Yes No Yes Yes
opacity No No No No Yes No No Yes No No Yes
overflow Yes Yes Yes Yes Yes No Yes No No No Yes
position Yes No No No Yes No No Yes No Yes Yes
right Yes No No No Yes No No Yes No Yes Yes
top Yes No No No Yes No No Yes No Yes Yes
visibility Yes Yes Yes Yes Yes No No Yes No No Yes
z-index Yes No No No Yes Yes No Yes No Yes Yes
Lists Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
list-style-image Yes Yes Yes No Yes No No Yes No No Yes
list-style-position Yes Yes Yes Yes Yes No Yes Yes No No Yes
list-style-type Yes Yes Yes Yes Yes No Yes Yes Yes Yes Yes
Tables Outlook
2000/2003		 Yahoo!
Mail		 Yahoo!
Classic		 Live
Hotmail		 Apple
Mail		 Outlook
2007		 Google
Gmail		 Apple
iPhone		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
border-collapse Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes
border-spacing No Yes Yes No Yes No Yes Yes No No No
caption-side No No No Yes No No Yes No No No No
empty-cells No Yes Yes Yes Yes No Yes Yes No No No
table-layout Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
Total Market Share 32% 15% 15% 6% 5% 5% 5% 2% 2%

RESOURCES:
http://www.campaignmonitor.com/css/#p

»