HTML emails are the subject of many discussions. This article doesn't discuss about weither 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).
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.
The tests have been made in the standard Yahoo! Mail, Gmail and Hotmail interface with Firefox on Windows XP.
HTML emails are the subject of many discussions. This article doesn't discuss about weither 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).
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.
The tests have been made in the standard Yahoo! Mail, Gmail and Hotmail interface with Firefox on Windows XP.
HTML emails are the subject of many discussions. This article doesn't discuss about weither 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).
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.
The tests have been made in the standard Yahoo! Mail, Gmail and Hotmail interface with Firefox on Windows XP.
The three clients don't have a DTD declaration in the page that will display your email, so browsers will probably render it in quirks mode. 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.
