CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail
|
|
|
| 3.6/5.0 (11 votes total) |
|
|
|
|
Xavier Frenette
July 20, 2006
|
HTML emails are the subject
of many discussions. This article doesn't discuss about whether or
not HTML messages have their place in our mailboxes, but about a problem
web developers face when creating HTML emails: the email client support of
CSS. This article will
concentrate on the support offered by three important web based mail
clients: Hotmail,
Yahoo! Mail and
Gmail.
Desktop mail clients have always been the cause of major headaches
because of their lack of support for cascading style sheets which resulted
in many (to heavy) HTML emails conceived like 1999 web pages: with lots of
unnecessary <table> and
<font> elements.
This problem is, theoretically, corrected with web based mail clients
since the user sees his email through his browser, which, if modern, has an
almost complete CSS support. But it's not that simple. CSS has the
power to completely change the design of the page in which it is included,
so, simple CSS rules in an email opened in Hotmail could easily drastically
change Hotmail's interface. This could allow not well formed CSS
rules in an email to disfigure the interface, or, worst, it could be used
by ill-intentioned persons to mislead the user (spamming,
phishing). So, to
prevent those situations, web based clients "read" the email
before it's showed and removes any CSS rule it considers a danger.
The problem is that unwanted properties and CSS control rules differ from
one client to the other.
I tested the vast majority of CSS properties and some CSS practices to
see how each web based client would react. You will find the results
below. When I thought precision was needed, I added additional information
(the "Explanations" section). I will try to update this page
from time to time to complete the lists. Please leave a comment or
contact me if you want to
make any changes.
Notes
-
Except in some specific situations, all CSS properties have been tested
independently (one property at a time) on a <div>,
<p> or <span>
element with the style attribute. Example:
<div style="color:#990000;">content</div>
It is possible that each email client has specific logic when
specific combinations of styles and/or structure happen or with
different browsers and/or OS's, which may result in differences
with what is said here. Please inform me
in that case.
- The tests have been made in the standard Yahoo! Mail, Gmail and
Hotmail interface with Firefox on Windows XP.
Other useful links
- A Guide to CSS Support in Email (http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_1.html)
- How To Code HTML Email Newsletters (All New Version) (http://www.reachcustomersonline.com/content/2004/11/11/09.27.00/index.php)
- CSS and Email, Kissing in a Tree: A List Apart (http://www.alistapart.com/articles/cssemail/)
Table of content
- General overview: Draws a general portrait of each client and its caracteristics.
- The
<style> element: Support for the <style> element.
- The
<link> element: Support for the <link> element.
- Selectors: List the majority of the selectors and each client support.
- Properties: List the majority of the properties and each client support.
- Others: List other CSS related elements and each client support.
- Explanations: Detailed explanations for some elements of the previous sections.
The three clients don't have a
DTD
(http://en.wikipedia.org/wiki/DTD) declaration in the page that will display your email, so browsers will
probably render it in quirks mode (http://www.quirksmode.org/index.html?/css/quirksmode.html).
If you want to prevent any surprise, omit the DTD declaration when
creating your email (but remember that any (X)HTML document should
always have a DTD declaration).
Following is a general overview of each web based email client tested:
Gmail
- Keeps only the HTML between the
<body>
and </body> tags. Discards the rest.
- Removes any
<style> element and its
content, even if it's within the <body>
element.
- Removes any
<link> element.
- The font size is bigger in
<table>
elements, so you'll probably have to force it with:
<table style="font-size:/*your size*/;"><!-- table content --></table>
Hotmail
- Keeps only the HTML between the
<body>
and </body> tags. Discards the rest.
- The
<style> element and its content
is preserved if it's inside the
<body> element.
- Removes any
<link> element.
Yahoo! Mail
- Keeps almost intact the complete original HTML sent and puts it
directly in a
<div>. So if you had any
of these in the HTML, they will be found in the middle of the Yahoo! Mail
HTML: DTD declaration, comments, <html>,
<head>, <title>,
<style> and
<body> elements, etc. But, the DTD
declaration won't be taken in consideration by the browser since it's in
the middle of the page, same thing for the <title>
element;
- Will rename the
<body>,
<meta> and <link>
tags <xbody>, <xmeta>
and <xlink>, so they will be "disabled".
This means that no external stylesheet can be linked to the document through the
<link> element.
| CSS selector |
Gmail |
Hotmail |
Yahoo! Mail |
| * |
untestable |
Yes |
Yes, but... |
| e |
untestable |
Yes |
Yes, but... |
| e > f |
untestable |
No |
Yes, but... |
| e:link |
untestable |
Yes |
Yes, but... |
| e:active, e:hover |
untestable |
Yes |
Yes, but... |
| e:focus |
untestable |
No |
Yes, but... |
| e:lang© |
untestable |
No |
Yes, but... |
| e+f |
untestable |
Yes |
Yes, but... |
| e[foo] |
untestable |
Yes |
Yes, but... |
| e.className |
untestable |
Yes |
Yes, but... |
| e#id |
untestable |
Yes |
Yes, but... |
| e:first-line |
untestable |
Yes |
Yes, but... |
| e:first-letter |
untestable |
Yes |
Yes, but... |
| CSS property |
Gmail |
Hotmail |
Yahoo! Mail |
| background-color |
Yes |
Yes |
Yes |
| background-image |
No |
Yes, but... |
Yes |
| background-position |
No |
No |
No |
| background-repeat |
No |
Yes |
Yes |
| border |
Yes |
Yes |
Yes |
| border-collapse |
Yes |
Yes |
Yes |
| border-spacing |
Yes |
No |
Yes |
| bottom |
No |
Yes |
Yes |
| caption-side |
Yes |
No |
Yes |
| clear |
No |
Yes |
Yes |
| clip |
No |
Yes, but... |
Yes, but... |
| color |
Yes |
Yes |
Yes |
| cursor |
No |
Yes |
Yes |
| direction |
Yes |
Yes |
Yes |
| display |
No |
Yes |
Yes |
| empty-cells |
Yes |
No |
Yes |
| filter |
No |
No |
Yes |
| float |
No |
Yes |
Yes |
| font-family |
No |
Yes |
Yes |
| font-size |
Yes |
Yes |
Yes |
| font-style |
Yes |
Yes |
Yes |
| font-variant |
Yes |
Yes |
Yes |
| font-weight |
Yes |
Yes |
Yes |
| height |
No |
Yes |
Yes |
| left |
No |
Yes |
Yes |
| letter-spacing |
Yes |
Yes |
Yes |
| line-height |
Yes |
Yes |
Yes |
| list-style-image |
No |
Yes, but... |
Yes |
| list-style-position |
Yes |
No |
No |
| list-style-type |
Yes |
Yes |
Yes |
| margin |
Yes |
No |
Yes |
| opacity |
No |
No |
Yes |
| overflow |
Yes |
Yes |
Yes |
| padding |
Yes |
Yes |
Yes |
| position |
No |
No |
No |
| right |
No |
Yes |
Yes |
| table-layout |
Yes |
Yes |
Yes |
| text-align |
Yes |
Yes |
Yes |
| text-decoration |
Yes |
Yes |
Yes |
| text-indent |
Yes |
Yes |
Yes |
| text-transform |
Yes |
Yes |
Yes |
| top |
No |
Yes |
Yes |
| vertical-align |
Yes |
Yes |
Yes |
| visibility |
No |
Yes |
Yes |
| white-space |
Yes |
Yes |
Yes |
| width |
Yes |
Yes |
Yes |
| word-spacing |
Yes |
Yes |
Yes |
| z-index |
No |
Yes |
Yes |
Example:
<html>
<head>
<style type="text/css" media="screen">
/* Css declarations */
</style>
</head>
<body>
<!– HTML –>
</body>
</html>
No. Gmail strips everything outside the <body> element and removes any <style> element.
No. Hotmail strips everything outside the <body> element.
Yes, but... The browser must be able to support a <style> declaration in a <head> element in the middle of the Yahoo! Mail <body> element. Also, every CSS declarations will be preceded by #message , except for body which will be replaced by #message ("message" being the id value of the <div> element surounding the email's content).
So the following CSS declaration
body{ background-color:#990000; }
p{ font-style:italic; }
div#content{ margin:2em; }
.className{ color:#ffffff; }
#message{ background-color:#990000; }
#message p{ font-style:italic; }
#message div#content{ margin:2em; }
#message .className{ color:#ffffff; }
Be
careful with this method, because when replying or forwading this
message, Yahoo! Mail will convert your style definition as plain text
and your declarations will appear in the message.
Example:
<html>
<body>
<style type="text/css" media="screen">
/* Css declarations */
</style>
<!– HTML –>
</body>
</html>
No. Gmail removes any <style> element
Yes, but... Hotmail removes the <style> element's attributes, converts all CSS comments found in the <style> element to "Javascript like" comments, restructure CSS declarations on two lines and converts > to >, so the following code
<style type="text/css" media="screen">
/* CSS comment */
div.className{ color:#ffffff; }
p>code{ font-weight:bold; }
</style>
will become
<style>
// CSS comment
div.className
{ color:#ffffff; }
p>code
{ font-weight:bold; }
</style>
I have not checked if this style sheet is valid, but, to be sure, don't use CSS comments and the child selector (>). A CSS rule on two lines is valid.
Yes, but... The rules are the same as if the <style> element was in the <head> element except for the location of the <style> element,
Example:
<html>
<head>
<link href="http://path.to/stylesheet.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!– HTML –>
</body>
</html>
No. Gmail removes any <link> element.
No. Hotmail removes any <link> element.
No. Yahoo! Mail renames <link> elements <xlink>, thus disabling the <link> action.
Example:
<html>
<body>
<link href="http://path.to/stylesheet.css" type="text/css" rel="stylesheet" />
<!– HTML –>
</body>
</html>
Be aware that the W3C specification about the <link> element specifies that <link> may only appear in the <head> element.
No. Gmail removes any <link> element.
No. Hotmail removes any <link> element.
No. Yahoo! Mail renames <link> elements <xlink>, thus disabling the <link> action.
Selectors and properties explanations
Gmail
Hotmail
Yahoo! Mail
|
FEEDBACK
COMMENTS
PRINT
SUBMIT TUTORIAL
RSS
Add comment
(Comments: 1)
