Tips & Resources  ›  Designing and building emails

Guide to CSS support in email clients (2008)

Downloads

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

We’ve put together this CSS support in email clients guide to save you the time and trouble of figuring it out for yourself. With 21 different sets of results, all the major email systems are covered, both desktop applications and webmail.

Desktop Clients

Here’s the list of email clients we tested for the 2008 CSS guide. We didn’t see any huge improvements across the board this year (there wasn’t a whole lot of updating going on) but Entourage 2008 certainly gained some ground. Hopefully it’s a sign of things to come from Redmond.

Style Element Outlook ‘03 Outlook ‘07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 2		 AOL 9 AOL 10 AOL Mac Notes 6
<style> in <head> Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
<style> in <body> Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
Link Element
<style> in <head> Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes
<style> in <body> Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes
CSS Selectors
e Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
* Yes No Yes Yes Yes Yes Yes Yes Yes No No
e.className Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
e#id Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
e:link Yes Yes Yes Yes Yes Yes Yes No Yes No No
e:active, e:hover Yes No Yes Yes Yes Yes Yes Yes Yes No No
e:first-line Yes No Yes Yes Yes Yes Yes Yes Yes No No
e:first-letter Yes No Yes Yes Yes Yes Yes Yes Yes No No
e > f No No No Yes Yes Yes Yes No No No No
e:focus No No No Yes Yes Yes Yes No No No No
e+f No Yes No Yes No Yes Yes No No No No
e[foo] No No No Yes No Yes Yes No No No No
CSS Properties Outlook ‘03 Outlook ‘07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 2		 AOL 9 AOL 10 AOL Mac Notes 6
background-color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
background-image Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
background-position Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
background-repeat Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
border Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
border-collapse Yes Yes Yes Yes No Yes Yes Yes Yes Yes No
border-spacing No No No Yes No Yes Yes Yes No Yes No
bottom Yes No Yes Yes Yes Yes Yes No Yes Yes No
caption-side No No No No No No Yes No No No No
clear Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
clip Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
cursor Yes No Yes Yes No Yes Yes Yes Yes Yes No
direction Yes No Yes Yes No Yes Yes Yes Yes Yes Yes
display Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
empty-cells No No No Yes No Yes Yes No No Yes No
float Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-size 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 Yes Yes No
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
height Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
left Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
line-height Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
list-style-image Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
list-style-position Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
list-style-type Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
margin Yes Yes Yes Yes Yes Yes Yes No Yes Yes No
opacity No No No Yes No Yes Yes Yes Yes Yes No
overflow Yes No Yes Yes No Yes Yes Yes Yes Yes No
padding Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
position Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
right Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
table-layout Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
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 Yes Yes No
text-transform Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
top Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
vertical-align Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
visibility Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
white-space No Yes No Yes Yes Yes Yes No No Yes No
width Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
word-spacing Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
z-index Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
  Outlook ‘03 Outlook ‘07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 2		 AOL 9 AOL 10 AOL Mac Notes 6

Web Clients

Below are the 8 web based email clients we tested this year. We added AOL Web, .Mac and new Gmail. We had high hopes for Gmail to improve on it’s rather low standards support but unfortunately, all the new Gmail really did was bring a cleaner user interface. The updated Live Hotmail interface brought some CSS improvements, including support for the <style> and <link> elements in the <head> and <body> tags.

Style Element Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web MobileMe
<style> in <head> Yes Yes No No Yes No Yes Yes
<style> in <body> Yes Yes No No Yes Yes Yes Yes
Link Element
<style> in <head> No Yes No No Yes No Yes Yes
<style> in <body> No Yes No No Yes No Yes Yes
CSS Selectors
e Yes Yes No No Yes Yes Yes Yes
* Yes Yes No No Yes Yes Yes Yes
e.className Yes Yes No No Yes Yes Yes Yes
e#id Yes Yes No No No Yes Yes Yes
e:link Yes Yes No No Yes Yes Yes No
e:active, e:hover Yes Yes No No Yes Yes Yes No
e:first-line Yes Yes No No Yes Yes Yes No
e:first-letter Yes Yes No No Yes Yes Yes No
e > f Yes Yes No No No No No No
e:focus Yes Yes No No No No Yes No
e+f Yes No No No No Yes No No
e[foo] Yes Yes No No No Yes Yes No
CSS Properties Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web MobileMe
background-color Yes Yes Yes Yes Yes Yes Yes Yes
background-image Yes Yes No No No Yes Yes Yes
background-position No Yes No No No No Yes Yes
background-repeat Yes Yes No No No Yes Yes Yes
border Yes Yes Yes Yes Yes Yes Yes Yes
border-collapse Yes Yes Yes Yes Yes Yes Yes Yes
border-spacing Yes Yes Yes Yes No No Yes Yes
bottom Yes No No No No Yes Yes Yes
caption-side Yes No Yes Yes Yes No Yes Yes
clear Yes Yes Yes Yes Yes Yes Yes Yes
clip Yes No Yes No No Yes Yes No
color Yes Yes Yes Yes Yes Yes Yes Yes
cursor Yes Yes No No Yes Yes Yes Yes
direction Yes Yes Yes No Yes Yes Yes Yes
display Yes Yes Yes Yes Yes Yes Yes Yes
empty-cells Yes Yes Yes Yes Yes No Yes Yes
float Yes Yes No Yes Yes Yes Yes Yes
font-family Yes Yes No No Yes Yes Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes
height Yes Yes No Yes Yes Yes Yes Yes
left Yes No No No No Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes
list-style-image Yes Yes No No No Yes Yes Yes
list-style-position No Yes Yes Yes Yes No Yes Yes
list-style-type Yes Yes Yes Yes Yes No Yes Yes
margin Yes Yes Yes Yes No No Yes Yes
opacity Yes No No No No No Yes Yes
overflow Yes Yes Yes Yes Yes Yes Yes Yes
padding Yes Yes Yes Yes Yes Yes Yes Yes
position No No No No No No Yes No
right Yes No No No No Yes Yes Yes
table-layout Yes Yes Yes Yes Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes
top Yes No No No No Yes Yes Yes
vertical-align Yes Yes Yes Yes Yes Yes Yes Yes
visibility Yes Yes No No Yes Yes No Yes
white-space Yes Yes Yes Yes Yes Yes Yes No
width Yes Yes Yes Yes Yes Yes Yes Yes
word-spacing Yes Yes Yes Yes Yes Yes Yes Yes
z-index Yes No No No No Yes Yes Yes
  Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web MobileMe

Version History

26 August 2008

Replaced .Mac results with MobileMe.

Discuss this on our blog.

11 June 2008

We increased the number of clients we tested, 21 in total now. Gmail and Outlook 2007 continue to be our primary focus since CSS support continues to be limited.

Positive signs from Microsoft though, Entourage 2008 was released with significantly better CSS support.

Discuss this on the blog

19 April 2007

Outlook 2007 was released with less CSS support than Outlook 2003. A major step back for HTML email design.

New Yahoo! mail was released with better support for CSS, a positive sign to say the least! Windows Live Mail replaced Hotmail and nixed some CSS support in the process.

Read the report

30 March 2006

This was our original test. We added Windows Live Mail for the first time and ran through tests on Outlook 2003, AOL 9, Lotus Notes and Eudora.

Read the report