Creating visually appealing and responsive email campaigns can be challenging due to the varying levels of CSS support among different email clients. Therefore, designing html emails that are consistent across all platforms requires you to be aware of these differences in client capabilities.
This guide will talk about the different CSS elements and their compatibility across various email clients, including their browser, desktop, and mobile applications.
<style> and <link> elements
Browser
| Feature | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
<style> in <head> |
✔️ | ✔️ | ✔️ | ✔️ |
<style> in <body> |
✔️ | ✔️ | ❌ | ✔️ |
<link> in <head> |
❌ | ❌ | ❌ | ❌ |
<link> in <body> |
❌ | ❌ | ❌ | ❌ |
Desktop
| Feature | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
<style> within <head> |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
<style> within <body> |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
<link> within <head> |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
<link> within <body> |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Mobile
| Feature | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
<style> within <head> |
✔️ | ✔️ | ✔️ | ❌ |
<style> within <body> |
✔️ | ✔️ | ✔️ | ❌ |
<link> within <head> |
✔️ | ✔️ | ✔️ | ❌ |
<link> within <body> |
✔️ | ✔️ | ✔️ | ❌ |
Element selectors
Browser
| Selector | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
* |
❌ | ❌ | ✔️ | ❌ |
E |
✔️ | ✔️ | ✔️ | ✔️ |
E[$attribute] |
❌ | ❌ | ❌ | ✔️ |
E[$attribute="$value"] |
❌ | ❌ | ❌ | ✔️ |
E F |
✔️ | ✔️ | ✔️ | ✔️ |
E > F |
❌ | ✔️ | ✔️ | ❌ |
E + F |
❌ | ✔️ | ✔️ | ✔️ |
E ~ F |
❌ | ❌ | ✔️ | ✔️ |
E:link |
✔️ | ❌ | ❌ | ✔️ |
E:visited |
✔️ | ✔️ | ❌ | ❌ |
E:active |
✔️ | ✔️ | ❌ | ✔️ |
E:hover |
✔️ | ✔️ | Only in webmail | ✔️ |
E:focus |
❌ | ❌ | ❌ | ❌ |
E:target |
❌ | ❌ | ❌ | ❌ |
E:nth-child(n) |
❌ | ❌ | ❌ | ✔️ |
E:nth-last-child(n) |
❌ | ❌ | ❌ | ✔️ |
E:nth-of-type(n) |
❌ | ❌ | ❌ | ✔️ |
E:nth-last-of-type(n) |
❌ | ❌ | ❌ | ✔️ |
E:first-child |
❌ | ❌ | ❌ | ✔️ |
E:last-child |
❌ | ❌ | ❌ | ✔️ |
E:first-of-type |
❌ | ❌ | ❌ | ✔️ |
E:last-of-type |
❌ | ❌ | ❌ | ✔️ |
E::first-line |
❌ | ✔️ | ❌ | ✔️ |
E::first-letter |
❌ | ✔️ | ❌ | ✔️ |
E::before |
❌ | ❌ | ❌ | ✔️ |
E::after |
❌ | ❌ | ❌ | ✔️ |
E.classname |
❌ | ✔️ | ❌ | ✔️ |
E#id |
❌ | ✔️ | ❌ | ✔️ |
E:not(s) |
❌ | ❌ | ❌ | ✔️ |
Desktop
| Selector | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
* |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
E |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
E[$attribute] |
❌ | ❌ | ✔️ | ✔️ | ✔️ |
E[$attribute="$value"] |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
E F |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
E > F |
❌ | ❌ | ✔️ | ✔️ | ✔️ |
E + F |
❌ | ❌ | ✔️ | ✔️ | ✔️ |
E ~ F |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
E:link |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
E:visited |
✔️ | ❌ | ❌ | ✔️ | ❌ |
E:active |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
E:hover |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
E:focus |
❌ | ❌ | ✔️ | ❌ | ❌ |
E:target |
❌ | ❌ | ❌ | ❌ | ❌ |
E:nth-child(n) |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E:nth-last-child(n) |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E:nth-of-type(n) |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E:nth-last-of-type(n) |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E:first-child |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
E:last-child |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E:first-of-type |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E:last-of-type |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E::first-line |
❌ | ✔️ | ✔️ | ❌ | ✔️ |
E::first-letter |
❌ | ✔️ | ✔️ | ❌ | ✔️ |
E::before |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E::after |
❌ | ❌ | ✔️ | ❌ | ✔️ |
E.classname |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
E#id |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
E:not(s) |
❌ | ❌ | ✔️ | ❌ | ✔️ |
Mobile
| Selector | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
* |
✔️ | ✔️ | ✔️ | ✔️ |
E |
✔️ | ✔️ | ✔️ | ✔️ |
E[$attribute] |
✔️ | ✔️ | ✔️ | ❌ |
E[$attribute="$value"] |
✔️ | ✔️ | ✔️ | ❌ |
E F |
✔️ | ✔️ | ✔️ | ✔️ |
E > F |
✔️ | ✔️ | ✔️ | ✔️ |
E + F |
✔️ | ✔️ | ✔️ | ✔️ |
E ~ F |
✔️ | ✔️ | ✔️ | ✔️ |
E:link |
✔️ | ✔️ | ✔️ | ❌ |
E:visited |
✔️ | ✔️ | ✔️ | ❌ |
E:active |
❌ | ❌ | ❌ | ❌ |
E:hover |
❌ | ❌ | ❌ | Only in Android |
E:focus |
✔️ | ❌ | ❌ | ❌ |
E:target |
❌ | ❌ | ❌ | ❌ |
E:nth-child(n) |
✔️ | ✔️ | ✔️ | ❌ |
E:nth-last-child(n) |
✔️ | ✔️ | ✔️ | ❌ |
E:nth-of-type(n) |
✔️ | ✔️ | ✔️ | ❌ |
E:nth-last-of-type(n) |
✔️ | ✔️ | ✔️ | ❌ |
E:first-child |
✔️ | ✔️ | ✔️ | ❌ |
E:last-child |
✔️ | ✔️ | ✔️ | ❌ |
E:first-of-type |
✔️ | ✔️ | ✔️ | ❌ |
E:last-of-type |
✔️ | ✔️ | ✔️ | ❌ |
E::first-line |
✔️ | ✔️ | ✔️ | ❌ |
E::first-letter |
✔️ | ✔️ | ✔️ | ❌ |
E::before |
✔️ | ✔️ | ✔️ | ❌ |
E::after |
✔️ | ✔️ | ✔️ | ❌ |
E.classname |
✔️ | ✔️ | ✔️ | ✔️ |
E#id |
✔️ | ✔️ | ✔️ | ✔️ |
E:not(s) |
✔️ | ✔️ | ✔️ | ❌ |
Box model
Browser
| Property | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
border |
✔️ | ✔️ | ✔️ | ✔️ |
border-radius [CSS3] |
✔️ | ❌ | ✔️ | ✔️ |
box-shadow [CSS3] |
✔️ | ❌ | ❌ | ✔️ |
height |
✔️ | ✔️ | ✔️ | ✔️ |
margin |
❌ | ✔️ | ✔️ | ✔️ |
padding |
✔️ | ✔️ | ✔️ | ✔️ |
width |
✔️ | ✔️ | ✔️ | ✔️ |
max-width |
Partial IE support | Partial IE support | Partial IE support | Partial IE support |
min-width |
Partial IE support | Partial IE support | Partial IE support | Partial IE support |
Desktop
| Property | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
border |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
border-radius [CSS3] |
❌ | ❌ | ✔️ | ❌ | ✔️ |
box-shadow [CSS3] |
❌ | ❌ | ❌ | ❌ | ❌ |
height |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
margin |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
padding |
Partial element support | ✔️ | ✔️ | ✔️ | ✔️ |
width |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
max-width |
❌ | ❌ | ✔️ | ❌ | ✔️ |
min-width |
❌ | ❌ | ✔️ | ❌ | ✔️ |
Mobile
| Property | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
border |
✔️ | ✔️ | ✔️ | ✔️ |
border-radius [CSS3] |
✔️ | ✔️ | ✔️ | ✔️ |
box-shadow [CSS3] |
❌ | ❌ | ❌ | ❌ |
height |
✔️ | ✔️ | ✔️ | ✔️ |
margin |
✔️ | ✔️ | ✔️ | ✔️ |
padding |
✔️ | ✔️ | ✔️ | ✔️ |
width |
✔️ | ✔️ | ✔️ | ✔️ |
max-width |
✔️ | ✔️ | ✔️ | ✔️ |
min-width |
✔️ | ✔️ | ✔️ | ✔️ |
Tables
Browser
| Property | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
border-collapse |
✔️ | ✔️ | ✔️ | ✔️ |
border-spacing |
✔️ | ✔️ | ✔️ | ✔️ |
caption-side |
✔️ | ✔️ | ✔️ | ✔️ |
empty-cells |
✔️ | ✔️ | ✔️ | ✔️ |
table-layout |
✔️ | ✔️ | ✔️ | ✔️ |
Desktop
| Property | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
border-collapse |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
border-spacing |
❌ | ❌ | ✔️ | ❌ | ✔️ |
caption-side |
❌ | ❌ | ❌ | ❌ | ✔️ |
empty-cells |
❌ | ❌ | ✔️ | ❌ | ✔️ |
table-layout |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Mobile
| Property | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
border-collapse |
✔️ | ✔️ | ✔️ | ✔️ |
border-spacing |
✔️ | ✔️ | ✔️ | ✔️ |
caption-side |
❌ | ✔️ | ✔️ | ✔️ |
empty-cells |
✔️ | ✔️ | ✔️ | ✔️ |
table-layout |
✔️ | ✔️ | ✔️ | ✔️ |
Fonts
Browser
| Property | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
direction |
✔️ | ✔️ | ✔️ | ✔️ |
font |
✔️ | ✔️ | ✔️ | ✔️ |
font-family |
✔️ | ✔️ | ✔️ | ✔️ |
font-style |
✔️ | ✔️ | ✔️ | ✔️ |
font-variant |
✔️ | ✔️ | ✔️ | ✔️ |
font-size |
✔️ | ✔️ | ✔️ | ✔️ |
font-weight |
✔️ | ✔️ | ✔️ | ✔️ |
letter-spacing |
✔️ | ✔️ | ✔️ | ✔️ |
line-height |
✔️ | ✔️ | ✔️ | ✔️ |
text-align |
✔️ | ✔️ | ✔️ | ✔️ |
text-decoration |
✔️ | ✔️ | ✔️ | ✔️ |
text-indent |
✔️ | ✔️ | ✔️ | ✔️ |
text-overflow [CSS3] |
Partial property support | Partial property support | Partial property support | Partial property support |
text-shadow [CSS3] |
✔️ | ✔️ | ❌ | No IE support |
text-transform |
✔️ | ✔️ | ✔️ | ✔️ |
white-space |
✔️ | ✔️ | ✔️ | ✔️ |
word-spacing |
✔️ | ✔️ | ✔️ | ✔️ |
word-wrap [CSS3] |
✔️ | ✔️ | ❌ | ✔️ |
vertical-align |
✔️ | ✔️ | ✔️ | ✔️ |
Desktop
| Property | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
direction |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
font |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
font-family |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
font-style |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
font-variant |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
font-size |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
font-weight |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
letter-spacing |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
line-height |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
text-align |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
text-decoration |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
text-indent |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
text-overflow [CSS3] |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
text-shadow [CSS3] |
❌ | ❌ | ✔️ | ❌ | ✔️ |
text-transform |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
white-space |
✔️ | ❌ | ✔️ | ✔️ | ✔️ |
word-spacing |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
word-wrap [CSS3] |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
vertical-align |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
Mobile
| Property | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
direction |
✔️ | ✔️ | ✔️ | ✔️ |
font |
✔️ | ✔️ | ✔️ | ✔️ |
font-family |
✔️ | ✔️ | ✔️ | ✔️ |
font-style |
✔️ | ✔️ | ✔️ | ✔️ |
font-variant |
✔️ | ✔️ | ✔️ | ✔️ |
font-size |
✔️ | ✔️ | ✔️ | ✔️ |
font-weight |
✔️ | ✔️ | ✔️ | ✔️ |
letter-spacing |
✔️ | ✔️ | ✔️ | ✔️ |
line-height |
✔️ | ✔️ | ✔️ | ✔️ |
text-align |
✔️ | ✔️ | ✔️ | ✔️ |
text-decoration |
✔️ | ✔️ | ✔️ | ✔️ |
text-indent |
✔️ | ✔️ | ✔️ | ✔️ |
text-overflow [CSS3] |
✔️ | ✔️ | ✔️ | ✔️ |
text-shadow [CSS3] |
✔️ | ✔️ | ✔️ | ✔️ |
text-transform |
✔️ | ✔️ | ✔️ | ✔️ |
white-space |
✔️ | ✔️ | ✔️ | ✔️ |
word-spacing |
✔️ | ✔️ | ✔️ | ✔️ |
word-wrap [CSS3] |
✔️ | ✔️ | ✔️ | ❌ |
vertical-align |
✔️ | ✔️ | ✔️ | ✔️ |
Color and Background
Browser
| Property | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
color |
✔️ | ✔️ | ✔️ | ✔️ |
background |
No image support | ✔️ | ✔️ | ✔️ |
background-color |
✔️ | ✔️ | ✔️ | ✔️ |
background-image |
✔️ | ✔️ | ✔️ | ✔️ |
background-position |
✔️ | ✔️ | ✔️ | ✔️ |
background-repeat |
✔️ | ✔️ | ✔️ | ✔️ |
HSL Colors [CSS3] |
✔️ | ✔️ | ✔️ | ✔️ |
HSLA Colors [CSS3] |
❌ | ❌ | ❌ | No IE support |
Opacity [CSS3] |
✔️ | ❌ | ❌ | No IE support |
RGBA Colors [CSS3] |
❌ | ❌ | ❌ | No IE support |
Desktop
| Property | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
color |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
background |
No image support | ✔️ | ✔️ | ✔️ | ✔️ |
background-color |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
background-image |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
background-position |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
background-repeat |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
HSL Colors [CSS3] |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
HSLA Colors [CSS3] |
❌ | ❌ | ✔️ | ❌ | ✔️ |
Opacity [CSS3] |
❌ | ❌ | ✔️ | ❌ | ✔️ |
RGBA Colors [CSS3] |
❌ | ❌ | ✔️ | ❌ | ✔️ |
Mobile
| Property | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
color |
✔️ | ✔️ | ✔️ | ✔️ |
background |
✔️ | ✔️ | ✔️ | ✔️ |
background-color |
✔️ | ✔️ | ✔️ | ✔️ |
background-image |
✔️ | ✔️ | ✔️ | ✔️ |
background-position |
✔️ | ✔️ | ✔️ | ✔️ |
background-repeat |
✔️ | ✔️ | ✔️ | ✔️ |
HSL Colors [CSS3] |
✔️ | ✔️ | ✔️ | ✔️ |
HSLA Colors [CSS3] |
✔️ | ✔️ | ✔️ | ❌ |
Opacity [CSS3] |
✔️ | ✔️ | ✔️ | ❌ |
RGBA Colors [CSS3] |
✔️ | ✔️ | ✔️ | ❌ |
Positioning and display
Browser
| Property | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
bottom |
✔️ | ❌ | ❌ | ✔️ |
clear |
✔️ | ✔️ | ✔️ | ✔️ |
clip |
❌ | ❌ | ❌ | ✔️ |
cursor |
✔️ | ✔️ | ❌ | ✔️ |
display |
✔️ | ✔️ | ✔️ | ✔️ |
float |
❌ | ✔️ | ✔️ | ✔️ |
left |
❌ | ❌ | ❌ | ✔️ |
opacity |
✔️ | ❌ | ✔️ | ✔️ |
outline [CSS3] |
Partial support | Partial support | Partial support | Partial support |
overflow |
Partial property support | Partial property support | Partial property support | ✔️ |
position |
✔️ | ❌ | ❌ | ✔️ |
resize [CSS3] |
✔️ | ✔️ | ❌ | ✔️ |
right |
✔️ | ❌ | ❌ | ✔️ |
top |
✔️ | ❌ | ❌ | ✔️ |
visibility |
✔️ | ✔️ | ❌ | ✔️ |
z-index |
❌ | ❌ | ❌ | ✔️ |
Desktop
| Property | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
bottom |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
clear |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
clip |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
cursor |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
display |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
float |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
left |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
opacity |
❌ | ❌ | ✔️ | ❌ | ✔️ |
outline [CSS3] |
❌ | ❌ | ✔️ | ❌ | ✔️ |
overflow |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
position |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
resize [CSS3] |
❌ | ✔️ | ✔️ | ❌ | ✔️ |
right |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
top |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
visibility |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
z-index |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Mobile
| Property | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
bottom |
✔️ | ✔️ | ✔️ | ❌ |
clear |
✔️ | ✔️ | ✔️ | ✔️ |
clip |
✔️ | ✔️ | ✔️ | ❌ |
cursor |
✔️ | ❌ | ❌ | ❌ |
display |
✔️ | ✔️ | ✔️ | ✔️ |
float |
✔️ | ✔️ | ✔️ | ✔️ |
left |
✔️ | ✔️ | ✔️ | ❌ |
opacity |
✔️ | ✔️ | ✔️ | ✔️ |
outline [CSS3] |
✔️ | ✔️ | ✔️ | ❌ |
overflow |
✔️ | Partial property support | Partial property support | Partial property support |
position |
✔️ | ✔️ | ✔️ | ❌ |
resize [CSS3] |
✔️ | ❌ | ❌ | ❌ |
right |
✔️ | ✔️ | ✔️ | ❌ |
top |
✔️ | ✔️ | ✔️ | ❌ |
visibility |
✔️ | ✔️ | ✔️ | ❌ |
z-index |
✔️ | ✔️ | ✔️ | ❌ |
Lists
Browser
| Property | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
list-style-image |
❌ | ✔️ | ❌ | ✔️ |
list-style-position |
❌ | ✔️ | ✔️ | ✔️ |
list-style-type |
✔️ | ✔️ | ✔️ | ✔️ |
Desktop
| Property | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
list-style-image |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
list-style-position |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
list-style-type |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
Mobile
| Property | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
list-style-image |
✔️ | ✔️ | ✔️ | ❌ |
list-style-position |
✔️ | ✔️ | ✔️ | ✔️ |
list-style-type |
✔️ | ✔️ | ✔️ | ❌ |
Conclusion
Email design is both an art and a science. To create emails that render correctly and consistently across all recipients’ devices, it is important to keep yourself updated about CSS support across email clients and their browser, desktop, and mobile applications. By designing with these considerations in mind, you can enhance the performance of your email marketing campaigns and reach your target audience more effectively.
