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 AppOutlook MacYahoo! MailYMail App
Kinetic support
?
 
 
 
 
?
 
?
 
 
 
 
?
 
 
?
 
?
 
<style> 
?
 
 
 
?
 
?
 
 
 
 
 
 
?
 
?
 
@media 
 
 
 
 
?
 
 
 
 
 
 
?
 
?
 
@(max-device-width) 
 
 
 
 
?
 
 
 
 
 
 
 
 
@(webkit pixel ratio)
?
 
 
?
 
 
 
 
 
 
 
 
 
 
 
Linked CSS 
 
 
 
 
 
 
 
 
 
 
 
 
 
CSS transitions 
 
 
 
 
 
 
 
 
 
 
 
 
CSS animations 
 
 
 
 
 
 
 
 
 
 
 
 
CSS transforms 
 
 
 
 
 
 
 
 
 
 
 
 
 
E: hover 
 
 
 
 
?
 
?
 
 
 
?
 
 
 
 
E: checked 
 
?
 
 
 
 
 
 
 
 
 
?
 
 
E: active 
 
 
 
 
 
?
 
 
 
?
 
 
 
 
 
<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 
?
 
 
 
 
 
?
 
 
 
 
 
 
 
 
SVG 
 
 
 
 
 
 
 
 
 
 
 
 
audio/video 
?
 
 
 
 
 
?
 
 
 
 
?
 
 
 
iframe 
 
 
 
 
 
 
 
 
 
 
 
 
Last updated: Oct 18, 2018 (Updated Gmail App CSS background image 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. There are a few ways to target AOL Mail using CSS. [link]
  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.

Apple Mail

  1. Most capable desktop client.
  2. Occassionally hides last image in an email if there are no text under it. [link]

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 and Gmail Webmail supports the :hover selector
  6. Gmail Android App supports the Filmstrip interactive technique that uses named anchors instead of checkboxes. [link]
  7. Gmail App with non-Google accounts (GANGA) does not support embedded styles or overflow: hidden. [link]
  8. GANGA started supporting CSS background images in Oct 2018 but does not support background-size property. Background size can be specified using background shorthand. [link]

IBM Lotus Notes

  1. A formerly popular desktop email client among large companies that has been neglected by IBM [link]
  2. Notes has a companion Web-based version called Verse.
  3. Negligable marketshare (less than 1%) but still used in certain large enterprises... like IBM
  4. Will completely strip your inline or embedded CSS if it encounters styles it doesn't like - like CSS background images.

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. [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. iOS 10 and 11 started to introduce artifacts with zooming and scaling of email that can be addressed with <meta name="x-apple-disable-message-reformatting"> [link]
  8. 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.

Outlook.com / Office 365

Microsoft launched a new version of Outlook.com with new CSS handling in 2016

  1. Removes certain placeholder or empty links. [link]
  2. 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.
  3. You can target CSS to Outlook.com by using the attribute selector hack ([owa]) [link]
  4. Outlook.com appends x_ to form element names (h/t @bvrobby)

Outlook App

  1. Modified version of Webkit browser
  2. Outlook App on Android does not support embedded styles when accessing a Outlook.com or Office 365 account.
  3. Does not support forms, form elements or :checked selector
  4. For "position: fixed", top starts 1/3 from top (under the initial header display).
    Bottom works fine.
  5. 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.
  6. The :hover selector will only work on elements with images (ie. images or links wrapping images)
  7. The :active selector requires a hack to prevent the client from opening the browser when clicked. [link]

Outlook Mac

  1. The most capable Outlook client when it comes to CSS support
  2. Support forms, form elements, animation and the :checked selector
  3. Quirky video support. Requires user to right click the video to access the play menu option.

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]
  9. For attribute in labels targeting ids in checkboxes not supported. Labels have to wrap checkboxes in order to toggle checkbox elements.
  10. Will activate max-width media queries in Internet Explorer if contains selectors that wrap a checked radio element. [link]

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 2018 FreshInbox