BLOG - EMAIL MARKETING

Which Email Clients Support CSS3?

ROS HODGEKISS - APR 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:

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. Let’s 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).

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!

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Request a demo