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 2007-2016Outlook.com/ Office 365Outlook iOS/MacYahoo! MailYMail AppWindows Phone 8.1
Kinetic support
?
 
 
?
 
 
?
 
 
 
 
?
 
?
 
?
 
?
 
?
 
<style> 
?
 
 
 
?
 
?
 
 
 
 
 
?
 
 
?
 
@media 
 
 
 
 
 
 
 
 
 
?
 
?
 
?
 
@(max-device-width) 
 
 
 
 
 
 
 
 
 
 
 
 
@(webkit 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=y] 
 
 
 
 
 
 
 
 
 
 
 
 
E[x(~=,*=,^=)y] 
 
 
 
 
 
 
 
 
 
 
 
 
E:x-of-type 
 
 
 
 
 
 
 
 
 
?
 
?
 
 
E:x-child 
 
 
 
 
 
 
 
 
 
?
 
?
 
 
E::before, E::after 
 
 
 
 
 
 
 
 
 
 
 
 
E:not(x) 
 
 
 
 
 
 
 
 
 
 
 
 
E + X 
 
 
 
 
 
 
 
 
 
 
 
 
E ~ X 
?
 
 
 
 
 
?
 
 
 
 
 
 
 
 
CSS transitions 
 
 
 
 
 
 
 
 
 
 
 
 
CSS animations 
 
 
 
 
 
 
 
 
 
 
 
 
CSS transforms 
 
 
 
 
 
 
 
 
 
 
 
 
 
SVG 
 
 
 
 
 
 
 
 
 
 
 
 
iframe 
 
 
 
 
 
 
 
 
 
 
 
 
Last updated: Sept 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.

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]

Gmail Webmail (Since Sept 2016)

After 12 years, Gmail finally supported embedded styles (<style> tag) and media queries on Sept 2016. [link]

  1. <style> supported in the <head> only.
  2. Does not support attribute selectors
  3. You can target Gmail in your styles by using the Google proxy image hack. [link]

Gmail Mobile App (Android/iOS)

  1. Does not support attribute selectors
  2. Gmail on Android doesn’t display background images or support overflow: hidden on non-Gmail accounts. [link]

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]

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

Microsoft launched a new version of Outlook.com 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. Unlike the legacy version the new version 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.
  4. You can target CSS to Outlook.com by using the attribute selector hack ([owa]) [link]
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, 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]

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)

Thunderbird

  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]

Yahoo! Mail Mobile App

  1. Unlike webmail, the app allows "display: none" in BOTH <style> and inline.
  2. Media queries do not support min-device-width, max-device-width. [link].
  3. Only supports single query in media queries. [link]
  4. 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