Kinetic Email CSS Support

The following table lists the major HTML & CSS features that are commonly used by interactive and dynamic CSS techniques and their support among the major email clients.

Scroll past the table for a summary of quirks by email clients.
Learn more about kinetic email.

FeatureOutlook 2007/10/13Apple MailiOSAndroid 4Gmail AppWindows Phone 8.1Yahoo! MailGmailOutlook.comOffice 365/OWAAOL MailYMail AppOutlook iOS
Kinetic support
?
 
 
 
 
 
 
?
 
?
 
?
 
?
 
 
?
 
?
 
?
 
<style> 
 
 
 
?
 
 
?
 
?
 
?
 
 
 
 
?
 
 
@media 
 
 
 
 
 
?
 
?
 
?
 
 
 
 
?
 
 
@(max-device-width) 
 
 
 
 
 
 
 
?
 
 
 
 
 
 
@(min pixel ratio)
?
 
 
 
 
 
 
 
 
 
 
 
?
 
 
 
Linked CSS 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
E: hover 
 
 
?
 
 
 
?
 
 
?
 
 
 
 
 
?
 
E: checked 
 
 
 
 
 
 
 
?
 
 
 
 
 
 
<form> 
 
 
 
 
 
 
 
 
 
 
?
 
 
 
checkbox, radio 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
table bg image
?
 
?
 
 
 
 
?
 
 
 
 
 
 
 
 
 
background-image 
?
 
 
 
 
?
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
position: absolute 
 
 
 
 
 
 
 
 
 
 
 
 
 
position: fixed 
 
 
 
 
 
 
 
 
 
 
 
 
 
z-index 
 
 
 
 
 
 
 
 
 
 
 
 
 
opacity 
 
 
 
 
 
 
 
 
 
 
 
 
 
visibility: hidden 
 
 
 
 
 
 
 
 
 
 
 
 
 
display: none 
?
 
 
 
 
?
 
 
?
 
?
 
 
 
 
 
 
overflow: hidden 
 
 
 
 
?
 
 
 
 
 
 
 
 
 
min/max-width 
 
 
 
 
 
 
 
 
 
 
 
 
 
margin 
 
 
 
 
?
 
 
?
 
?
 
?
 
?
 
 
?
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
padding 
?
 
 
 
 
 
 
 
 
 
 
 
 
 
float 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
E:x-of-type 
 
 
 
 
 
 
?
 
?
 
 
 
 
?
 
 
E:x-child 
 
 
 
 
 
 
?
 
?
 
 
 
 
?
 
 
E[x=y] 
 
 
 
 
 
 
 
?
 
 
 
 
 
 
E[x(~=,*=,^=)y] 
 
 
 
 
 
 
 
?
 
 
 
 
 
 
E::before, E::after 
 
 
 
 
 
 
 
 
 
 
 
 
 
E:not(x) 
 
 
 
 
 
 
 
?
 
 
 
 
 
 
E + X 
 
 
 
 
 
 
 
?
 
 
 
 
 
 
E ~ X 
 
 
?
 
?
 
 
 
 
?
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
CSS transitions 
 
 
 
 
 
 
 
 
 
 
 
 
 
CSS animations 
 
 
 
 
 
 
 
 
 
 
 
 
 
CSS transforms 
 
 
 
 
 
 
 
 
?
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
SVG 
 
 
 
 
 
 
 
 
 
 
 
 
 
iframe 
 
 
 
 
 
 
 
 
 
 
 
 
 
Last updated: December 10, 2015 (Updated Yahoo! Mail App)



Client Specific Quirks

iOS

  1. Requires "-webkit-text-size-adjust: none !important;" to prevent font from being increased
  2. Top and bottom positions when using "position: fixed" is obscured by the top and bottom toolbars
  3. The :hover selector will only work on images or links.
  4. iOS9 requires a hack in order to use the general sibling selector (E ~ Y). [link]

Android 4.4

  1. Android 5.0 (lollipop) replaced native email client with Gmail (boo)
  2. Certain Android clients require weird animation hack to support general sibling selector E~Y. [link]
  3. Unlike iOS, :hover selector works on any element.
  4. Certain Android clients (ie. LG Realm) requires a space before a selector (ie. <space>.myclass{...}) to be enabled.

Yahoo! Mail Webmail

  1. YMail used to require attribute selectors in media queries but that has been fixed. [link]
  2. Does not allow "display:none" (incl !important) inline but allows in <style>.
  3. Removes !important for *SOME* styles (display,color) if there is a space between the style and !important
  4. Media queries do not support min-device-width, max-device-width. [link]
  5. Only supports single query in media queries. [link]
  6. Only supports simple id and class attribute selectors. [link]
  7. Converts height CSS to min-height.
  8. Removes first style beneath CSS comments, requires the .yfix{} hack. [link]

Yahoo! Mail Mobile App (Dec 2015)

  1. Only supports <style> in the body
  2. Unlike webmail, the app allows "display: none" in BOTH <style> and inline.
  3. Media queries do not support min-device-width, max-device-width. [link].
  4. Only supports single query in media queries. [link]
  5. Converts height CSS style to min-height.

Gmail Webmail

  1. <style> supported in the <head> on Gmail.com and Googlemail.com domains.
    (Gmail for Business and mobile Gmail apps do not support the <style> tag)
  2. id's and classes are stripped from all elements.
    To target elements use the attribute selector hack. [link]
  3. You can target Gmail in your styles by using the Google proxy image hack. [link]
  4. Hiding elements - Gmail strips "display: none" but allows "display: none !important"
    Other hiding methods are more suitable if you want to revert in media query (for other clients). [link]
  5. Converts height CSS to min-height

Gmail Mobile App (Android/iOS)

  1. Does not support the <style> tag
  2. Gmail iOS randomly increases font sizes - use the nowrap hack to prevent change. [link]
    Hack prevents fluid layout in Gmail app - pick your poison.
  3. Gmail Android narrows tables and ignores element widths - to prevent change, use nowrap hack above or min-width image hack. [link]
  4. Hiding elements - Gmail strips "display: none" but allows "display: none !important"
    Other hiding methods are more suitable if you want to revert in media query (for other clients). [link]
  5. Converts height CSS to min-height
  6. Gmail on Android doesn’t display background images or support overflow: hidden on non-Gmail accounts. [link]
  7. Gmail on Android supports regular display: none on non-Gmail accounts.

Outlook 2007/2010/2013

  1. Very limited HTML/CSS support - Outlook is the reason emails are still designed with <table>. [link]
  2. Outlook does not support width and padding on <div>, <p> and <a> [link]
    Tables are required to set padding and widths.
  3. Images without width attribute set (ie. <img width=XXX ...>) will render at native image width. [link]
    Outlook ignores CSS width on images.
  4. Outlook does not support max-width. To simulate max-width use phantom tables in conditional comments. [link]
  5. Need to set border-collapse and other table settings to remove 1px whitespace around cells:
    "border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"
  6. Use conditional comments or "mso-hide: all" to hide or show elements. [link]
  7. Background images (CSS & property) are not supported. Requires VML to support background images. [link]

Outlook 2003

  1. Emails without a DOCTYPE sometimes exhibit random rendering quirks.
    This includes images with "width: 100%" pushing out its containing table to its native width.

Outlook.com

  1. Outlook.com is the only webmail that does not support background-image CSS style
  2. Outlook.com is the only webmail that does not support :checked CSS selector
  3. Sets line-height to 131%. Reset by setting ".ExternalClass * {line-height: 100%;}". [link]
  4. In order to use margins, capitalize the 'm' (ie. Margin: 10px) [link]
  5. Unlike Gmail and Yahoo! Mail, Outlook.com supports opacity and visibilily and a limited set of transtions
  6. ALL content within conditional comments are hidden. [link]
  7. A subset of CSS transforms are supported - see comment by Remi Parmentier. [link]

Office 365/ Outlook Web App (OWA)

  1. Many many quirks. [link]
  2. Unlike Outlook.com, OWA doesn't strip content within conditional comments.
  3. Doesn't strip certain CSS cleanly (ie. ".foo :first-child" becomes ".foo" and "[class=foo] span" becomes "span")
    Wrap advanced CSS within media query (@media screen {...}) as OWA removes the whole block.

Outlook iOS App (Accompli)

  1. Modified version of Webkit browser
  2. Does not support forms, form elements or :checked selector
  3. For "position: fixed", top starts 1/3 from top (under the initial header display).
    Bottom works fine.
  4. If email contains wide table hidden by overflow, this client will still scale the window as if the table is fully displayed. Either don't use tables wider than email (for carousel) or use negative margin to shift table to left.
  5. The :hover selector will only work on elements with images (ie. images or links wrapping images)

Windows Phone 8.1

  1. Requires X-UA-Compatible meta tag to support CSS3/Media Queries. [link]
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  2. Certain designs may benefit from a viewport selector. [link]
  3. Activating a :hover selector requires a long press (1-2 seconds).

AOL Mail

  1. Most capable webmail client by far - supports absolute positioning and transitions.
  2. Slight CSS processor bug prevents animations from working.
    AOL Mail adds ".aolReplacedBody" within animation keyframes, messing it up.
  3. Action attribute in forms must be https and target attribute must be set. [link]

Other Email Clients

  1. Samsung email client in Galaxy phones (Android 5.0/6.0) does not support absolute positioning. [link]
  2. Thunderbird supports checkboxes but requires that the form action be set to "#" to allow it to toggle. [link]













Copyright 2015 FreshInbox