Css guide Email clients

Desktop See all 11

AOL Desktop Apple Mail 10 IBM Notes 9 Outlook 2000–03 Outlook 2007–16 Outlook Express Outlook for Mac Postbox
Thunderbird Windows 10 Mail Windows Live Mail

Mobile See all 16

Android 4.2.2 Mail Android 4.4.4 Mail AOL Alto Android app AOL Alto iOS app BlackBerry Gmail Android app Gmail Android app IMAP Gmail iOS app
Gmail mobile webmail iOS 10 Mail iOS 11 Mail Outlook Android app Outlook iOS app Windows Phone 8 Mail Yahoo! Mail Android app Yahoo! Mail iOS app

Webmail

AOL Mail G Suite Gmail Outlook.com Yahoo! Mail

Desktop

Outlook 2007–16

Outlook 2007, 2010, 2013, and 2016 are part of Microsoft’s Office suites of the same years. These versions display emails using the rendering engine from Word, the word processing software known from the same Office suite.

Because it uses Word to render emails, Outlook has very limited CSS support and significant discrepancies in how emails are displayed compared to other email clients.

In versions previous to Outlook 2007, emails were rendered using Internet Explorer.

Outlook 2007 tested on Windows XP, Outlook 2016 tested on Windows 8.

Link Element
<link> in <head>
<link> in <body>
Selectors
*
E > F
E + F
E ~ F
E:not(s)
E[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E::first-letter
E::first-line
E::before
E::after
E:active
E:checked
E:empty
E:focus
E:hover
E:target
E:visited
Media Queries
@media
and
or (comma)
not
screen
only screen
all
any-hover
any-pointer
hover
max-aspect-ratio
max-device-aspect-ratio
max-device-height
max-device-pixel-ratio
max-device-width
max-height
max-resolution
max-width
min-aspect-ratio
min-device-aspect-ratio
min-device-height
min-device-pixel-ratio
min-device-width
min-height
min-resolution
min-width
orientation
pointer
Text & Fonts
@font-face
EOT
SVG
TTF
WOFF
WOFF2
WOFF base64 encoded
WOFF2 base64 encoded
font

Mostly supported, but the shorthand property fails to override font-weight.

font-feature-settings
font-kerning
font-size-adjust
font-stretch
font-synthesis
font-variant

Partial. Supports CSS2 values, but not CSS3.

hyphens
line-height

Buggy.

overflow-wrap
text-fill-color
text-overflow
text-shadow
text-size-adjust
text-stroke
text-stroke-color
text-stroke-width
text-transform

Partial. Only uppercase is supported.

vertical-align

Partial. Supports keywords and px values, but not %.

white-space

Partial. Supports normal and pre, but not nowrap.

word-spacing
word-wrap
Color & Background
background
background-attachment
background-blend-mode
background-clip
background-color

Buggy.

background-image
background-origin
background-position
background-repeat
background-size
isolation
mix-blend-mode
CSS gradients
Data URI background image
Multiple background images
HSL Colors
HSLA Colors
RGBA Colors
currentColor
Box Model
border

Buggy.

border-bottom

Buggy.

border-bottom-left-radius
border-bottom-right-radius
border-bottom-width

Buggy.

border-color

Buggy. Fails to override the shorthand border property.

border-image
border-left

Buggy.

border-left-width

Buggy.

border-radius
border-right

Buggy.

border-right-width

Buggy.

border-top

Buggy.

border-top-left-radius
border-top-right-radius
border-top-width

Buggy.

border-width

Buggy.

box-shadow
box-sizing
height

Partial support on table elements.

margin

Buggy.

margin-bottom

Buggy.

margin-left

Buggy.

margin-right

Buggy.

margin-top

Buggy.

max-height
max-width
min-height
min-width
padding

Partial but buggy support, mainly on table elements.

padding-bottom

Partial but buggy support, mainly on table elements.

padding-left

Partial but buggy support, mainly on table elements.

padding-right

Partial but buggy support, mainly on table elements.

padding-top

Partial but buggy support, mainly on table elements.

width

Partial support on table elements.

Positioning & Display
bottom
clear
cursor
Positioning and Display: Display

Partial. Sometimes supports none.

float
left
object-fit
object-position
opacity
outline
outline-color
outline-style
outline-width
overflow
position
resize
right
top
visibility
z-index
Lists
list-style

Partial. Supports only the list-style-type part of the shorthand. Non-list elements with display: list-item are unsupported.

list-style-image
list-style-position
list-style-type

Partial. Supports disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, and upper-roman.

Tables
border-spacing
caption-side
empty-cells
table-layout
Animations
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
Transforms
backface-visibility
perspective
perspective-origin
transform
transform-origin
transform-style
Transitions
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Filters
backdrop-filter
filter
Columns
break-after
break-before
break-inside
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
Flexbox
Flexbox: align-content
Flexbox: align-items
align-self
Flexbox: display
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
justify-content
order
Grid
align-content
align-items
align-self
display
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template-areas
grid-template-columns
grid-template-rows
justify-content
justify-items
justify-self

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free