Complete CSS Guide

Overview

This table gives you a complete guide to which CSS elements are supported in the 10 most common and popular email clients.

Style ElementOutlook 2007/10/13Outlook 03/Express/MailiPhone iOS 7/iPadOutlookApple Mail 6.5Yahoo! MailGmailAndroid 4+ Gmail
ResponsiveNoNoYesNoYesNoNoNo
<style> in <head>YesYesYesYesYesYesNoYes
<style> in <body>YesYesYesYesYesYesNoYes
<link> in <head>YesYesYesNoYesNoNoYes
<link> in <body>YesYesYesNoYesNoNoYes
Selectors
*NoYesYesNoYesNoYes (but not in Google Apps)Yes
EYesYesYesYesYesYesNoYes
E[foo]NoYesYesYesYesNoNoYes
E[foo="bar"]NoYesYesYesYesNoNoYes
E[foo~="bar"]NoYesYesNoYesNoNoYes
E[foo^="bar"]NoYesYesNoYesNoNoYes
E[foo$="bar"]NoYesYesNoYesNoNoYes
E[foo*="bar"]NoYesYesNoYesNoNoYes
E:nth-child(n)NoNoYesYesYesNoNoYes
E:nth-last-child(n)NoNoYesYesYesNoNoYes
E:nth-of-type(n)NoNoYesYesYesNoNoYes
E:nth-last-of-type(n)NoNoYesYesYesNoNoYes
E:first-childNoYesYesYesYesNoNoYes
E:last-childNoNoYesYesYesNoNoYes
E:first-of-typeNoNoYesYesYesNoNoYes
E:last-of-typeNoNoYesYesYesNoNoYes
E:emptyNoNoYesYesYesNoNoYes
E:linkYesYesYesNoYesNoNoYes
E:visitedYesNoYesNoNoYesNoYes
E:activeNoYesNoYesYesYesNoNo
E:hoverNoYesNoYesYesYesNoNo
E:focusNoNoYesYesYesYesNoNo
E:targetNoNoNoYesNoNoNoNo
E:first-lineNoYesYesYesYesYesNoYes
E:first-letterNoYesYesYesYesYesNoYes
E:beforeNoNoYesNoYesNoNoYes
E:afterNoNoYesNoYesNoNoYes
E:classnameYesYesYesYesYesYesNoYes
E#idYesYesYesNoYesYesNoYes
E:not(s)NoNoYesNoYesNoNoYes
E FYesYesYesYesYesYesNoYes
E > FNoYesYesYesYesYesYes (Not in Google Apps)Yes
E + FNoYesYesYesYesYesNoYes
E ~ FNoYesYesYesYesNoNoYes
Text & Fonts
@font-faceNoNoYesNoYesNoNoNo
directionYesYesYesYesYesYesYesYes
fontYesYesYesYesYesYesYesYes
font-familyYesYesYesYesYesYesYesYes
font-styleYesYesYesYesYesYesYesYes
font-variantYesYesYesYesYesYesYesYes
font-sizeYesYesDefault minimum = 13px. Use -webkit-text-size-adjust: 100%; to override.YesYesYesYesYes
font-weightYesYesYesYesYesYesYesYes
letter-spacingYesYesYesYesYesYesYesYes
line-heightYesYesYesIgnored on td, use on p instead.YesYesYesYes
text-alignYesYesYesYesYesYesYesYes
text-decorationYesYesYesYesYesYesYesYes
text-indentYesYesYesYesYesYesYesYes
text-overflow (CSS3)NoYesYestext-overflow: elipsis; does not work.Yestext-overflow: elipsis; does not work.text-overflow: elipsis; does not work in FirefoxYes
text-shadow (CSS3)NoNoYesYesYesYesNoYes
text-transformYesYesYesYesYesYesYesYes
white-spaceNoYesYesYesYesYesYesYes
word-spacingNoYesYesYesYesYesYesYes
word-wrap (CSS3)Noword-wrap: normal; not supportedYesYesYesYesNoNo
vertical-align +YesYesYesYesYesYesYesYes
text-fill-color (CSS3)NoNoYesNoYesNoNoYes
text-fill-stroke (CSS3)NoNoYesNoYesNoNoYes
Colour & Background
colorYesYesYesYesYesYesYesYes
backgroundImages not supportedYesYesImages not supportedYesYesYesYes
background (CSS3)NoNoYesNoYesNoNoYes
background-colorYesYesYesYesYesYesYesYes
background-imageNoYesYesNoYesYesYesYes
background-positionNoYesYesNoYesYesNoYes
background-repeatNoYesYesNoYesYesYesYes
background-size (CSS3)NoNoYesNoYesImage not stretchedNoImage not stretched
HSL Colors (CSS3)YesYesYesYesYesYesYesYes
HSLA Colors (CSS3)NoNoYesNoYesNoYesYes
Opacity (CSS3)NoNoYesYesYesNoNoYes
RGBA Colors (CSS3)NoNoYesNoYesNoYesYes
Box Model
borderYesYesYesYesYesYesYesYes
border-colorNoNoYesYesYesYesYesNo
border-image (CSS3)NoNoYesNoYesNoNoNo
border-radius (CSS3)NoNoYesYesYesNoYesNo
box-shadow (CSS3)NoNoYesYesYesNoNoNo
heightNoYesYesYesYesYesYesYes
marginNoYesYesNoYesYesYesYes
paddingPadding for p, div, and a tags is not supportedYesYesYesYesYesYesYes
widthWidth for p and div tags is not supportedYesYesYesYesYesYesYes
max-widthNoYesYesYesYesYesYesYes
min-widthNoYesYesYesYesYesYesYes
Positioning & Display
bottomNoYesYesYesYesNoNoYes
clearNoYesYesYesYesYesYesYes
clipNoYesYesNoYesNoNoYes
cursorNoYesYesYesYesYesNoNo
displayNoYesYesYesYesYesNoYes
floatNoYesYesNoYesYesYesYes
leftNoYesYesNoYesNoNoYes
opacityNoNoYesYesYesNoNoYes
outline (CSS3)NoNoYesInner & outer border are collapsedYesInner & outer border are collapsedInner & outer border are collapsedYes
overflowNoYesYesoverflow: hidden; does not workYesoverflow: hidden; does not workoverflow: hidden; does not workoverflow: scroll; does not work
positionNoYesposition: fixed; doesn't result in elements being positioned relative to the reading pane.YesYesNoNoYes
resize (CSS3)NoYesYesInline text field with scrollbar displays, but no resize tab.YesInline text field with scrollbar displays, but no resize tab.NoNo
rightNoYesYesYesYesNoNoYes
topNoYesYesYesYesNoNoYes
visibilityNoYesYesYesYesYesNoYes
z-indexYesYesYesYesYesYesNoYes
Lists
list-style-imageNoYesYesNoYesYesNoYes
list-style-positionNoYesYesNoYesYesYesYes
list-style-typeYesYesYesYesYesYesYesYes
Tables
border-collapseYesYesYesYesYesYesYesYes
border-spacingNoNoYesYesYesYesYesYes
caption-sideNoNoYesYesYesYesYesYes
empty-cellsNoNoYesYesYesYesYesYes
table-layoutYesYesYesYesYesYesYesYes
HTML 5
<canvas>NoNoYesYesNoNoNoNo
<audio>NoNoYesMedia player controls are disabled.YesNoNoNo
<video>NoNoYesMedia player controls are disabled.YesNoNoNo
Translate ยป