Properties to avoid
Property | Where |
---|---|
position |
(Outlook, Gmail, Yahoo) |
display |
(Outlook, Gmail) |
float |
(Outlook) |
height |
(Outlook) |
width in p/div |
(Outlook) |
padding in p/div |
(Outlook) |
background |
(Outlook, Gmail) |
min-width |
(Outlook) |
max-width |
(Outlook) |
opacity |
(Outlook, Gmail, Yahoo) |
box-shadow |
(Outlook, Gmail, Yahoo) |
rgba() |
(Outlook) |
data-uri |
(all webmail) |
Selectors to avoid
E[attr] |
(Outlook, Gmail) |
E:nth-child(n) |
(Outlook, Gmail) |
::before and ::after |
(Outlook, Yahoo, Gmail) |
E F |
(Gmail) |
E + F , E > F etc |
(Outlook, Gmail) |
Inline your CSS as much as possible.
Basic layout
<table cellpadding="0" cellspacing="0">
<tr>
<td width="auto"></td>
<td width="600" background="#ffffff">
···
</td>
<td width="auto"></td>
</tr>
</table>
Responsive
<style>
@media only screen and (max-device-width: 480px)
</style>
<style>
is supported in the head and body by everything except Gmail. Only use them for responsive styles.
References
- CSS support matrix campaignmonitor.com