Home Resources Blog

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 No Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support
text-overflow Partial or buggy support Partial or buggy support No No Partial or buggy support Partial or buggy support Partial or buggy support
word-wrap Partial or buggy support No Yes No Yes Partial or buggy support No
Color & Background Outlook
2000/2003
Live
Hotmail
Yahoo!
Mail/Classic
Outlook
2007/2010
Apple
Mail
Apple
iPhone
Google
Gmail
HSL Colors Yes Yes Yes Yes Yes Yes Yes
HSLA Colors No No No No Yes Yes No
Opacity No No No No Yes Yes No
RGBA Colors No No No No Yes Yes No
-moz-background No No No No No No No
-webkit-background No No No No Yes Yes No
-moz-background-size No No No No No No No
-webkit-background-size No No No No Yes Yes No
-o-background-size No No No No No No No
-khtml-background-size No No No No Yes Yes No
Box Model Outlook
2000/2003
Live
Hotmail
Yahoo!
Mail/Classic
Outlook
2007/2010
Apple
Mail
Apple
iPhone
Google
Gmail
-moz-box-sizing No No Yes No No No No
Positioning & Display Outlook
2000/2003
Live
Hotmail
Yahoo!
Mail/Classic
Outlook
2007/2010
Apple
Mail
Apple
iPhone
Google
Gmail
resize No Yes Yes No Yes No No
outline No No Partial or buggy support No Yes Yes Partial or buggy support
Borders Outlook
2000/2003
Live
Hotmail
Yahoo!
Mail/Classic
Outlook
2007/2010
Apple
Mail
Apple
iPhone
Google
Gmail
-moz-border-color No No No No No No No
-moz-border-image No No No No No No No
-moz-border-radius No No No No No No No
-webkit-border-radius No No No No Yes Yes No
-moz-box-shadow No No No No No No No
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
Normal AOL 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.

{title}

Drop and inner shadows using text-shadow

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

{title}

{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!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
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.

Get started for free