Blog

Which email clients support CSS3?

April 22, 2010

Keen to jazz up your email with a little text-shadow? Need a little opacity in your life?

In this update to our existing guide to CSS support, we tested both widely implemented and experimental CSS3 properties across 24 popular desktop, web and mobile email clients. The results were mixed, but certainly surprising!  If you're planning to introduce CSS3 to email campaigns, read on - we've not only got a summary of which email clients display what properties, but observations and hand-picked recommendations for the style-savvy email designer.

The results: CSS3 support across the major email clients

The following chart displays the results of our CSS3 tests for the 7 most popular email clients. For the 24 most popular email clients, download our full guide.

Curious about what 'partial or buggy support' means? Read below.

Text & Fonts	Outlook 2000/2003	Live Hotmail	Yahoo! Mail/Classic	Outlook 2007/2010	Apple Mail	Apple iPhone	Google Gmail
text-shadow
text-overflow
word-wrap
Color & Background	Outlook 2000/2003	Live Hotmail	Yahoo! Mail/Classic	Outlook 2007/2010	Apple Mail	Apple iPhone	Google Gmail
HSL Colors
HSLA Colors
Opacity
RGBA Colors
-moz-background
-webkit-background
-moz-background-size
-webkit-background-size
-o-background-size
-khtml-background-size
Box Model	Outlook 2000/2003	Live Hotmail	Yahoo! Mail/Classic	Outlook 2007/2010	Apple Mail	Apple iPhone	Google Gmail
-moz-box-sizing
Positioning & Display	Outlook 2000/2003	Live Hotmail	Yahoo! Mail/Classic	Outlook 2007/2010	Apple Mail	Apple iPhone	Google Gmail
resize
outline
Borders	Outlook 2000/2003	Live Hotmail	Yahoo! Mail/Classic	Outlook 2007/2010	Apple Mail	Apple iPhone	Google Gmail
-moz-border-color
-moz-border-image
-moz-border-radius
-webkit-border-radius
-moz-box-shadow
Total Market Share	28%	16%	14%	9%	8%	7%	6%

Download our complete guide

Our observations

There are three reasons why CSS3 doesn't seem to display properly (if at all) in web email clients - support is partial or buggy, the property is being stripped by the email client or the browser doesn't support the property yet. Lets tackle these one by one.

Support is partial or buggy

For the purpose of our tests, partial or buggy support means:

The property doesn't display consistently across our tested browsers/platforms for a given email client;
The property does display, but the email client is doing something to make it look different from what's intended, or;
Property attributes haven't been implemented yet.

A good example of the latter is text-overflow - although text-overflow: ellipsis; is fairly well supported, text-overflow: clip; and text-overflow: ellipsis-word; haven't been implemented in any browser to date.

The property is being stripped by the email client

Just as we've observed previously, a fair few email clients simply disable CSS properties. For example, it's well-known that Gmail strips out <link></link> tags, or any styles found within <style></style>, however, this extends to inline CSS3 styles, too. Here's an example of how our test code is altered in AOL Web and Gmail:

Our test code	... in AOL Web	... in Gmail

<p style="-moz-border-radius: 10px; border: 3px solid orange; padding: 5px;">If you see a nicely-rounded box, then -moz-border-radius is working</p>	<p style="-moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border: 3px solid orange; padding: 5px;">If you see a nicely-rounded box, then -moz-border-radius is working</p>	<p style="border: 3px solid orange; padding: 5px;">If you see a nicely-rounded box, then -moz-border-radius is working</p>

This specific test were viewed in Firefox, but regardless of browser, no rounded corners in Gmail for you.

The browser doesn't support the property yet

While testing each web email client in Firefox, Safari and Internet Explorer, it became quite evident that each browser wasn't born equal. This is because each browser selectively displays CSS3 properties at this early stage, as reflected by 'experimental' implementations (prefixed by -moz, -webkit etc). These experimental implementations may be permanently added to the browser's rendering engine at a later date, but for now, they're prefixed so designers and developers know that they're still under trial.

Without going too far into the tough stuff, each browser is developed around a rendering engine, which determines how web pages should be displayed. For Safari, this is Webkit (or -web) and for Firefox, this is Mozilla (-moz). So, properties like -moz-border-radius work great in Firefox, but not Safari, and vice versa for -webkit-border-radius.

In turn, AOL Web displays -moz-border-radius when viewed in Firefox, but not in Safari or IE. The clever way to get around this is to add both properties to your code (as many folks do when coding for web), which would look something like this:

<p style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border: 3px solid orange; padding: 10px;">Here's a rounded box</p>

If you're viewing this blog post in Safari or Firefox, you will see rounded corners on the rectangle above. IE doesn't support border-radius (experimental or otherwise, yet), so this example will just display as an orange rectangle.

In essence, CSS3 is a long way from being accepted as standard in web browsers, let alone in email clients. While Webkit-based clients like Apple Mail and Mail on the iPhone were relatively successful in rendering the Webkit-specific elements in our test email, more popular clients like Outlook, Yahoo and Hotmail well, sunk.

Perhaps the biggest surprises came from our mobile tests. Whereas web client support was sketchy at best, the iPhone, Android and Palm (webOS) flew through the Webkit tests with flying colors. Comparative flying colours, anyway.

Keeping in mind that CSS3 is first and foremost being developed for the web, it may be a while off before we discover practical applications in email for properties like or word-wrap, resize or text-overflow (which hasn't been fully implemented in any browser, anyway). But that said, it's early days yet - as browsers continue to embrace more and more CSS3, there's no doubt that designers like us will find creative uses for new properties. Lets just hope that email clients rise to the challenge, too.

Recommendations

In email, CSS3 is best used for decorative purposes, such as adding a drop shadow, or making buttons that would otherwise be achieved using images. Here are a couple of examples:

Rounded corners using `border-radius`

Without CSS3 support, these simply display as rectangles.

Drop and inner shadows using `text-shadow`

Without CSS3 support, text is still displayed (including color, font, style etc).

{title}

Conversely, a lot of box-model and layout-specific CSS3 may not be as appropriate in email, given the likelihood for layout-breakage. This goes for -moz-box-sizing, resize and others.

Ultimately, the decision to use CSS3 should be based on how many of your subscribers will be able to view your CSS3 masterpiece. Using our email client reports, you may determine that a lot of your subscribers use Webkit-based clients like Apple Mail. This is certainly a green light to use effects like text-shadow, however you may think differently if the majority of your subscribers are using Outlook.

Finally, just as many of the properties we have tested are considered to be experimental, we encourage you to be experimental, too. As more email clients join the fray, CSS3's applications in email will certainly become wider-reaching than pretty shadows and rounded corners. So, take a look at the properties available to you, test it out and share your own experiences. There's never been less of an excuse for creating a dull email!

Got a question regarding CSS3 in email? Have an example you would like to share? Shoot it through in the comments below. All the best with testing your email design!

Posted in: Tips & Resources

26 Comments

John Faulds
April 22, 2010 7:50pm

“IE doesn’t support border-radius (experimental or otherwise, yet), so this example will just display as an orange rectangle.”

IE9 will support border-radius, and without the vendor prefix. Opera as of 10.5 also does without the prefix. For that reason, if you are going to use these experimental properties, you’re best to include the official W3C version (i.e. sans prefix), as well as the -moz and -webkit prefixed declarations.
Ros Hodgekiss
April 22, 2010 9:00pm

Hi John, you are correct. There is an IE9 test drive available that includes a border-radius demo. I’ll update this post and guide shortly to include the official W3C version, to take into account IE9’s eventual release and Opera. Thanks for helping us future-proof the guide!
Tetsuo
April 23, 2010 1:38am

“In turn, AOL Web displays -moz-border-radius when viewed in Firefox, but not in Safari or IE.”

Well durr.

I’m curious as to why you’ve displayed the results of various vendor specific properties, and then had to explain them in the article itself? - I think you’ve confused matters unnecessarily and diluted what could have been an interesting analysis.

Without trying to sound too moody, ultimately this all proves…well, not a lot. Obviously Apple products based on WebKit display a good number of CSS3 properties, the web-based clients hardly any (and depending on which combination of browser you’re using, including versions)., and Microsoft based applications - forget it. I don’t think anyone who would be considering using these properties wouldn’t know the general gist of that anyway.

I still think anyone using advanced CSS in emails is doing it because they don’t care about the real consequences, rather than ignorance.
David Greiner
April 23, 2010 7:37am

@Tetsuo, while you’re clearly very familiar with CSS3 and its current limitations, keep in mind that many designers are not.

As well as making it clear at a glance which properties work and where, the post was aimed at giving anyone new to CSS3 a general introduction as to what it covers and why support is partial at best. If you’re just looking for the numbers, then the full report is for you.

I still think anyone using advanced CSS in emails is doing it because they don’t care about the real consequences, rather than ignorance.

Maybe you missed the conclusion Ros was pushing, but the entire point of the post was to point out that in fact you can use a limited subset of CSS3 for formatting purposes that will degrade gracefully across all other email clients. That’s a useful finding and one that many designers will still find attractive.
Jason
April 30, 2010 3:22am

Thanks Ros for a good breakdown of the possibilities.

@David, @Tetsuo, I think you both have very valid points - this is all just to get the message out that CSS3 does work in email, albeit under extremely limited circumstances.

This is good knowledge to have, but the fact that support is so limited and uneven means that in practicality, CSS3 is relegated to the status of window-dressing, instead of forming a meaningful part of any message - unless a specific CSS3-friendly email client is targeted, which I find difficult to imagine many marketers needing to do. It’d be the email equivalent of building an Opera-only website, for example - sure, it can be done, but why would you ever need to do that?

As a longtime email marketer, it’s a constant source of heartache to see the level of support for web technologies remain so stunted. But hey, Lucas made Star Wars on a budget of $70,000 - sometimes restrictions make beautiful solutions possible.
@Emarketer
April 30, 2010 4:33am

I do email creation daily - probably 20+ a week, including all the list/data work, and reporting. I’m quite educated on these types of things but these elements are such a tremendous quick resource and I always appreciate the reference articles such as these. Your blog, the initial CSS chart - which was quite badass BTW - and the email gallery, is a huge asset.

I find @Tetsuo to be more than rude and quite obnoxious. Maybe you enjoy the obnoxious job of be a teller and therefore hate this type of stuff on the web because it educates the less knowledgeable. For now, get off your high horse and why not surf Yahoo Answers where you can give what for to all the real idiots out there.
Chris Patterson
April 30, 2010 4:52am

Thank you for the helpful article. I didn’t think css2 was fully supported in emails yet.
Hope Danning
April 30, 2010 6:10am

I enjoyed the article, although a does show, perhaps not a good time to utilise these techniques.
Love the quick reference though - thanks!
Hope Danning
April 30, 2010 6:11am

@Jason - well said, having limitations and restrictions forces creative people to become more creative.
Ros Hodgekiss
April 30, 2010 10:05am

Hi Chris, yep, there are still a fair few major email clients out there that have fairly poor CSS2 support. So, as with all techniques, it’s good to have a graceful fallback option (especially with background images or text effects). Thanks for the positive feedback!
Jimbo
April 30, 2010 2:37pm

I agree with Emarketer’s 2nd para!!
Richard - accessible web testing
April 30, 2010 7:13pm

I think this just shows that the main email clients are nowhere near ready for CSS3 yet and if Outlook 2010 is that bad then I don’t think it will be worth considering for another five or so years.
Thiago Esser
April 30, 2010 10:27pm

@Hope Danning - I also think it’s good way of facing limitations.
Mathew Patterson
May 1, 2010 4:41pm

Make sure to check out our coverage of Panic’s recent email campaign at http://www.campaignmonitor.com/blog/post/3116/what-you-can-learn-from-panics-email-marketing/

That’s a great example of pushing the edges of what’s possible in email design, thanks in large part to their heavily-Apple Mail using audience.
Nodemji
May 8, 2010 1:36pm

@David Greiner, @Emarketer, @Jimbo:

Whilst I appreciate the efforts of the author, I agree with Tetsuo’s 4 paragraphs. Although I can see flaws in this article in more than one way, I don’t think it is necessary to accuse anybody but those who don’t like to listen to what other people have to say of sitting on a high horse or being rude. If you don’t want to hear other people’s point of view, don’t publish.

Who (no matter if beginner or advanced, coming from a designer or developper or marketing background) expects vendor-specific css prefixes to work across the browsers? The article contains a lot of useful information, but I feel the presentation of the data can be confusing if not misleading as there is no distinction between e-mail software (which uses ONE i.e. the manufacturer’s rendering engine) and a web service which obviously can be accessed by many browsers (and thus can make use of the browser-specific capabilities).
sedunia
May 14, 2010 11:02pm

CSS support in all email clients let alone CSS3 is patchy. Not to mention that in some parts of the world Outlook Express is stil heavily used.
Skoua
May 17, 2010 4:33am

Nice post but what about Thunderbird ?
shivaram
May 17, 2010 7:26pm

Why Thunderbird is not considered here? as a ardent user i was eager to know that.
David Greiner
May 17, 2010 8:21pm

If you’re looking for support in Thunderbird, check out the full CSS guide (and download the PDF) for all 24 email clients.
Fred
May 21, 2010 12:25am

I believe HSL CSS color is no longer working in Gmail, can anyone confirm?
fes
May 24, 2010 5:34am

I’m just sort of curious why you have a chart up there with exclamations (for items like outline) and that was the only time it was mentioned. How does it not work? Why does it have an exclamation?

And wow… heaven forbid someone actually have an opinion instead of just praising the author.

This was a poorly put-together article in which 90% of the time was spent on the testing and putting a cute chart together vs. 10% spent on the article, detailing what they had found.

And LOL @ the idea of expecting -moz to work in IE… That’s the most unusual thing I’ve ever heard. I hear that Microsoft is starting to develop FireFox extensions for Internet Explorer soon, too.
din
June 2, 2010 6:03pm

Can you add Thunderbird 3 as well?
Ros Hodgekiss
June 3, 2010 9:47am

din - Good call, we’ll add Thunderbird 3 to our next update.
Dries Van haver
June 11, 2010 1:30am

It’s nice to see that developers will create good websites and mailings on each browser / platform. But at the same time, create extraordinary stuff for those who have browsers / mail clients that support this great stuff.

If you have an Apple audience, put some css3 into it. looking forward to see create some great mailings.
Jacob Bednarz
June 11, 2010 11:37am

Hi,
I am a huge fan of Campaign Monitor and the resources you provide however after looking in the latest release of the document outlining the supported properties and attributes for email clients, you have neglected to include the “Style Element” for Colour/Backgrounds which used to be in your previous versions. I for one think this is a very important part of the document as many users wish to include backgrounds in their HTML emails but is not well documented in other resources.

Keep up the good work!
Ros Hodgekiss
June 11, 2010 1:19pm

Hi Jacob, thanks for your comment on use of the Style element - we’ll make sure we look into it when we next update this document. Thanks for your positivity too! :D

Comments for this entry are closed.

Browse the Blog

Explore the Email Gallery

@HunterOwens And sorry again! This one has been frustrating for everyone, but obviously for affected customers the most!

Not just good looks

Track every aspect of your campaigns like opens, clicks, forwards, sales and more.
Create a free account

Sign up, kick the tires and start sending in less than 60 seconds.
CSS support in email

Designing for email can be tricky. Save your sanity with our complete CSS guide.