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.

Summary of Quirks
Learn more about kinetic email.

FeatureAndroid/ SamsungAOL MailApple MailGmailGmail AppiOSOutlook Office 365Outlook iOS/MacYahoo! MailYMail AppWindows Phone 8.1
Kinetic support
@(webkit pixel ratio)
Linked CSS 
CSS transitions 
CSS animations 
CSS transforms 
E: hover 
E: checked 
E: active 
checkbox, radio 
table bg image
position: absolute 
position: fixed 
visibility: hidden 
display: none 
overflow: hidden 
E::before, E::after 
E + X 
E ~ X 
Last updated: Nov 21, 2016 (Updated Gmail media queries upport)

Client Specific Quirks

Android 4.4 / Android 5+ (Samsung)

  1. Android 5.0 (lollipop) replaced native email client with Gmail but Samsung Galaxy phones retained its own webkit based native client (envelope with red @ seal icon).
  2. Samsung client does not support absolute positioning. [link]
  3. You can target the Samsung email client using the #MessageViewBody wrapper id. [link]
  4. Certain Android clients require weird animation hack to support general sibling selector E~Y. [link]
  5. Unlike iOS, :hover selector works on any element.
  6. Certain Android clients (ie. LG Realm) requires a space before a selector (ie. <space>.myclass{...}) to be enabled.
  7. The Samsung Galaxy client supports video. Android 4.4 clients will render video controls but will not play. [link]

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]
  4. For attribute in labels targeting ids in checkboxes not supported. Labels have to wrap checkboxes in order to toggle checkbox elements.

Gmail App and Webmail

After 12 years, Gmail finally supported embedded styles (<style> tag) and media queries (except GANGA see below). [link]

  1. <style> supported in the <head> only.
  2. Does not support attribute selectors (Webmail supports :hover)
  3. Gmail removes all CSS in <style> block if it exceeds 8192 characters or if it contains errors or nested @ declarations. [link]
  4. You can target Gmail in your styles by using a technique by Mark Robbins. [link]
  5. Gmail Android App with non-Gmail accounts (GANGA) does not support embedded styles, background images or overflow: hidden. [link]


  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. [link]
  4. iOS9 requires a hack in order to use the general sibling selector (E ~ Y) - not required on iOS10. [link]
  5. iOS 10 supports video. The iOS 8 and 9 clients will render video controls but will not play. [link]
  6. The :active selector only fires briefly regardless of tap duration. [link]
  7. iOS9 pauses animations but not animation-delay during scroll potentially causing timing mismatch. Solution is to use animation delay with negative values. iOS10 no longer pauses animations on scroll.

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. / Office 365

Microsoft launched a new version of in early 2016 but as of Aug 2016 approximately 10% of users are still on the legacy version. [link]

New version
  1. Many many quirks. [link]
  2. Removes certain placeholder or empty links. [link]
  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.
  4. You can target CSS to by using the attribute selector hack ([owa]) [link]
  5. Unlike the legacy version the new version doesn't strip content within conditional comments.
Legacy version
  1. Does not support background-image CSS style
  2. Supports the :hover selector but not :checked
  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, 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]

Outlook iOS App

  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)
  6. The :active selector requires a hack to prevent the client from opening the browser when clicked. [link]


  1. Supports checkboxes but requires that the form action be set to "#" to allow it to toggle. [link]
  2. Supports -moz-device-pixel-ratio media query. [link]
  3. You can target the client using the moz-text-html wrapper class [link]

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]
  9. For attribute in labels targeting ids in checkboxes not supported. Labels have to wrap checkboxes in order to toggle checkbox elements.

Yahoo! Mail Mobile App

  1. The Android version 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.

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).

Copyright 2016 FreshInbox