Which Email Clients Support CSS3?

Article first published April 2010, updated May 2019

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.

Which email clients support CSS3 in 2019?

CSS3 support is a continuing work in progress when it comes to
updates and, in 2019, users can expect quite a few changes to the
various properties.

New CSS techniques

The Cascading Style Sheets (CSS) is continually being tested and
upgraded for users across the globe. This language allows you to
add styles, such as fonts, colors, and spacing to a variety of web
documents, including emails. The current evolution of the CSS
language is known as CSS3.

There are a variety of new additions that’ve been released
with the latest updates to the CSS3 language, and they include:

  • Making CSS grids responsive
  • The use of variable fonts
  • The ability to create text animations
  • The ability to implement scroll snapping
  • Gutters for flexbox

  • Initial letter
  • Media Queries level 4

All of that and more is being rolled out for CSS3 users.

Which browsers support HTML5 & CSS3

While all these updates are exciting for web designers, it’s
still vital to know what works and what doesn’t for certain
individuals and programs. This is especially important for a
brand’s digital and email marketing teams, because they need to
be able to communicate with customers in a way that works for
everyone.

HTML5

HTML5 is the latest version of the HTML
language. It defines elements, attributes, and behaviors of web
content.

So which browsers support HTML5? Below is a list of which
browsers support which functions in HTML5.


So which browsers support HTML5? Below is a list of which browsers support which functions in HTML5.

Source:
HTML5 Test

CSS3

Below is a list of which browsers support which functions of the
CSS3 language.


Below is a list of which browsers support which functions of the CSS3 language.

Source: W3Schools

Which email clients support media queries?

A media query is a functionality in both HTML and CSS that
allows the content of a given web page to adapt to the specific
type of media that the page is being rendered in.

Media queries help create responsive page designs that allow a
page to be viewed on multiple devices, such as:

  • Desktop computers
  • Tablets
  • Cell phones

So which email clients support media queries?

While iOS clients seem to fare well here, Android doesn’t do
so well.

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
.

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.

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.

Each browser is developed around a rendering engine, which
determines how..

Source: FS – Email Marketing Blogs!
Which Email Clients Support CSS3?