19 mins read
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| Feature | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
<style> in <head> |
✔️ | ✔️ | ✔️ | ✔️ |
<style> in <body> |
✔️ | ✔️ | ❌ | ✔️ |
<link> in <head> |
❌ | ❌ | ❌ | ❌ |
<link> in <body> |
❌ | ❌ | ❌ | ❌ |
| 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> |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| Feature | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
<style> within <head> |
✔️ | ✔️ | ✔️ | ❌ |
<style> within <body> |
✔️ | ✔️ | ✔️ | ❌ |
<link> within <head> |
✔️ | ✔️ | ✔️ | ❌ |
<link> within <body> |
✔️ | ✔️ | ✔️ | ❌ |
| 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) |
❌ | ❌ | ❌ | ✔️ |
| 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) |
❌ | ❌ | ✔️ | ❌ | ✔️ |
| 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) |
✔️ | ✔️ | ✔️ | ❌ |
| 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 |
| 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 |
❌ | ❌ | ✔️ | ❌ | ✔️ |
| 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 |
✔️ | ✔️ | ✔️ | ✔️ |
| Property | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
border-collapse |
✔️ | ✔️ | ✔️ | ✔️ |
border-spacing |
✔️ | ✔️ | ✔️ | ✔️ |
caption-side |
✔️ | ✔️ | ✔️ | ✔️ |
empty-cells |
✔️ | ✔️ | ✔️ | ✔️ |
table-layout |
✔️ | ✔️ | ✔️ | ✔️ |
| 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 |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| Property | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
border-collapse |
✔️ | ✔️ | ✔️ | ✔️ |
border-spacing |
✔️ | ✔️ | ✔️ | ✔️ |
caption-side |
❌ | ✔️ | ✔️ | ✔️ |
empty-cells |
✔️ | ✔️ | ✔️ | ✔️ |
table-layout |
✔️ | ✔️ | ✔️ | ✔️ |
| 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 |
✔️ | ✔️ | ✔️ | ✔️ |
| 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 |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
| 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 |
✔️ | ✔️ | ✔️ | ✔️ |
| 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 |
| 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] |
❌ | ❌ | ✔️ | ❌ | ✔️ |
| 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] |
✔️ | ✔️ | ✔️ | ❌ |
| 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 |
❌ | ❌ | ❌ | ✔️ |
| 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 |
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| 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 |
✔️ | ✔️ | ✔️ | ❌ |
| Property | Outlook | Yahoo! | Gmail | AOL |
|---|---|---|---|---|
list-style-image |
❌ | ✔️ | ❌ | ✔️ |
list-style-position |
❌ | ✔️ | ✔️ | ✔️ |
list-style-type |
✔️ | ✔️ | ✔️ | ✔️ |
| Property | Outlook 2007 - 2013 | Outlook 2000 - 2003 | Apple Mail | Windows Live Mail | Outlook For Mac |
|---|---|---|---|---|---|
list-style-image |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
list-style-position |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
list-style-type |
❌ | ✔️ | ✔️ | ✔️ | ✔️ |
| Property | iOS 6 | Android 4.2 | Android 2.3 | Gmail App |
|---|---|---|---|---|
list-style-image |
✔️ | ✔️ | ✔️ | ❌ |
list-style-position |
✔️ | ✔️ | ✔️ | ✔️ |
list-style-type |
✔️ | ✔️ | ✔️ | ❌ |
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.
The most widely supported CSS properties include color, background color, basic font properties, text align, margin, padding, width, height, border etc.
Best practices include using inline CSS, testing across multiple email clients, avoiding CSS properties with poor support, and providing fallback options for features such as web fonts and images.
Web fonts are supported in some email clients such as Apple Mail and Gmail. However, clients such as Outlook do not support them. Therefore, it is important that you provide fallback fonts in your CSS.
Inline CSS is a method of applying CSS styles directly to the individual HTML elements within the HTML document itself rather than in a separate CSS file or within a <style> tag in the document’s <head>.
You made it till the end! Here's what you can do next to grow your business:
Free guides, ebooks, and other resources to master email marketing.
Send forms, carts, calendars, games and more within your emails to boost ROI.
30-min free email consultation with an expert to fix your email marketing.
Table of contents
Fresh Marketing Ideas, Every Week.
Get the latest marketing roundup & news
Trusted by 10000+ brands
