163.com (webmail)

# Working
.netease_mail_readhtml .foo, .netease_mail_readhtml .foo{}

Email is wrapped with class="netease_mail_readhtml". CSS is prefixed with the same but will only apply to the first class in a list. So with this code the first class gets double prefixed, the second one works.

Contributed by Mark Robbins

Airmail

# Working
.bloop_container .foo

Contributed by Mark Robbins

Android

# Working
_:-webkit-full-screen, :root .foo

Contributed by Mark Robbins

Android

# Working
@media screen and (pointer) { .foo}

Contributed by Mark Robbins

Android 2.3

# Working
@media screen and (min-width:0\0){ .foo }

This broken media query will also show in Outlook 00–03 so you may need to add an IE conditional comment.

Contributed by Mark Robbins

Android 4.2

# Working
_:-webkit-full-screen, :root .foo

This won’t render on iOS devices but will render on desktop so may need a max-device-width media query.

Contributed by Mark Robbins

Android 4.4

# Working
_:-webkit-full-screen, :root .foo

This won’t render on iOS devices but will render on desktop so may need a max-device-width media query.

Contributed by Mark Robbins

AOL

# Deprecated
.body

AOL also removes class from the body tag so you can use .body to avoid AOL.

Contributed by Mark Robbins

Apple Mail 10

# Working
.Singleton .foo

Contributed by Mark Robbins

Apple Mail 12.4

# Working
[class^="apple-mail"] .foo

Also targets iOS 13.

If the color-scheme is set to light dark or auto then the class is removed and this no longer works.

Contributed by Mark Robbins

Apple Mail 8

# Working
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .foo

Contributed by Mark Robbins

Apple Mail (iPad)

# Working
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) and (hover: none){
  _:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root body:not(.Singleton) .foo {}
}

Media queries detect the device size to filter out iPhones. Using :not(.Singleton) filters out Apple Mail desktop.

Contributed by Wilbert Heinen

Comcast (webmail)

# Working
.mail-detail-content .foo

Comcast wraps code with class="mail-detail-content". This also targets Libero.

Contributed by Mark Robbins

Edison

# Working
#edo-container .foo

Will cover both iOS and Android.

Contributed by Mark Robbins

Edison (Android)

# Working
.edo-email-view .foo

Contributed by Mark Robbins

Freenet

# Working
body[marginwidth][marginheight] .foo{}

Contributed by Mark Robbins

Freenet

# Working
meta ~ * .foo
title ~ * .foo

The head and body structure of the email is removed, making content in the head, siblings of that in the body, so we can target with this. Applies to Thunderbird, Freenet (title element only), Orange.fr, and Samsung.

Contributed by Mark Robbins

Gmail (mobile and web)

# Working
@media screen and (max-width: 480px) {
  u + .body .gmailmobile {
    display: block!important;
  }
}

Contributed by Jay Oram

Gmail

# Working
u + .body .foo

Gmail changes the doctype to <u></u>. This is placed adjacent to a div that inherits class and id from the body tag.

You must include a doctype tag.

Contributed by Mark Robbins

Gmail (Android)

# Working
div > u + .body .foo

Gmail changes the doctype to <u></u>. This is placed adjacent to a div that inherits class and id from the body tag.

You must include a doctype tag.

Contributed by Mark Robbins

Gmail (iOS)

# Deprecated
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff)

Contributed by Jay Oram

GMX/web.de

# Working
u + .body .foo

Any class or ID name prefixed with an unsupported character will kill all the styles following it.

Contributed by Mark Robbins

GMX/web.de (Samsung 7)

# Working
body[style*="overflow-wrap:break-word"]

Contributed by Mark Robbins

iOS Mail 10+

# Working
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) { .foo }

Contributed by Mark Robbins

iOS Mail 13

# Working
[class^="apple-mail"] .foo

Also targets Apple Mail 12.4 on desktop.

If the color-scheme is set to light dark or auto then the class is removed and this no longer works.

Contributed by Mark Robbins

iOS Mail 15+

# Working
@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1 / 1) { .foo }

-webkit-overflow-scrolling:touch is only supported on mobile devices.

aspect-ratio is not supported on older versions of iOS.

Contributed by Mark Robbins

Libero (webmail)

# Working
.mail-detail-content .foo

Libero wraps code with class="mail-detail-content". This also targets Comcast.

Contributed by Mark Robbins

Newton (desktop)

# Working
#cm_mail_smart_body .foo

Contributed by Mark Robbins

Nine

# Working
.body > div > div > .wrapper .foo

Nine inserts a couple of divs between the body and the wrapper. Same hack also targets Samsung and possibly others.

Contributed by Mark Robbins

Notes 8

# Working
.unused.foo

Notes 8 will strip the unrecognised class and render the code behind it.

Contributed by Mark Robbins

Open-Xchange

# Working
.foo[class^="ox-"]

Open-Xchange powers a number of different email clients including Comcast, Libero, 1&1 MailXchange, Network Solutions Secure Mail, Namecheap Email Hosting, Mailbox.org, 123-reg Email, acens Correo Professional, Home.pl Cloud Email Xchange, Virgin Media Mail, and Ziggo Mail.

They prefix class and ID names with ox- so we can target them with this.

Contributed by Mark Robbins

Orange

# Working
meta ~ * .foo
title ~ * .foo

The head and body structure of the email is removed, making content in the head siblings of that in the body, so we can target with this. Applies to Thunderbird, Freenet (title element only), Orange.fr, and Samsung.

Contributed by Mark Robbins

Outlook (various)

# Working
<!--[if mso | ie]>
<td>ALL OUTLOOK</td>
<![endif]-->

<!--[if mso 9]>
<td>OUTLOOK 2000</td>
<![endif]-->

<!--[if  mso 10]>
<td>OUTLOOK 2002</td>
<![endif]-->

<!--[if  mso 11]>
<td>OUTLOOK 2003</td>
<![endif]-->

<!--[if mso 12 | mso 14 | mso 15 ]>
<td>OUTLOOK 2007/10/13</td>
<![endif]-->

<!--[if mso 12]>
<td>OUTLOOK 2007</td>
<![endif]-->

<!--[if mso 14]>
<td>OUTLOOK 2010</td>
<![endif]-->

<!--[if mso 15]>
<td>OUTLOOK 2013</td>
<![endif]-->

<!--[if mso 16]>
<td>OUTLOOK 2016</td>
<![endif]-->

<!--[if mso 16]>
<td>WINDOWS 10 MAIL</td>
<![endif]-->

Contributed by Jay Oram

Outlook (Android)

# Deprecated
@media (min-resolution: 1dpi) {
  body[data-outlook-cycle] .foo {
    display: block!important;
  }
}

Contributed by Jay Oram

Outlook (webmail & iOS dark modes)

# Working
[data-ogsc] .foo{}

When changing a color style in dark mode, Outlook will add data-ogsc to the element. When changing a background-color style in dark mode, Outlook will add data-ogsb to the element.

This requires adding styles that Outlook will change to a wrapping element.

Contributed by Mark Robbins

Outlook (iOS)

# Deprecated
[data-outlook-cycle*="INSERT_STYLES"] .foo{}

Where it says "INSERT_STYLES" you need to keep that text as it is and not actually insert your styles.

This will target only non-Microsoft email addresses (@hotmail, @live, @outlook, etc).

Contributed by Mark Robbins

Outlook (iOS & Android)

# Working
.foo\0{}

The \0 gets removed as part of the HTML cleanup. Be aware that Gmail will remove a style block with this code, so it needs to be included in a separate <style> block.

This can also be added directly to a style, like .foo{ background: red\0/;}.

Contributed by Mark Robbins

Outlook (iOS & Android)

# Deprecated
body[data-outlook-cycle] .foo{}

This attribute is added to both iOS and Android apps. It also renders in webmail if you drop the body tag and just use the attribute.

Contributed by Mark Robbins

Outlook (macOS)

# Working
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root body:not(.Singleton) .foo

The stuff before .body will target WebKit desktop apps on Mac (Apple Mail and Outlook Mac), then we add :not(.Singleton) to remove Apple Mail.

This also targets Spark desktop app.

Note that this will not work for non-Outlook accounts.

Contributed by Mark Robbins

Outlook (PWA)

# Working
@media (display-mode: standalone) {
  [class~=""x_foo""]{}
}

Outlook PWA supports the same targeting as Outlook.com and Outlook apps. However, its display-mode is set to standalone so we can target it with the display-mode media query.

Contributed by Mark Robbins

Outlook (webmail)

# Working
[class~="x_foo"]{}

Outlook.com prefixes class names with x_ but doesn’t do this on attribute selectors. So <div class="foo"> can be targeted with [class="x_foo"] and it’ll only apply to Outlook.

Contributed by Mark Robbins

Outlook (webmail)

# Deprecated
[owa].foo x:default .foo

Contributed by Mark Robbins

Postbox

# Working
.moz-text-html .foo

Contributed by Mark Robbins

Samsung Email (S4)

# Working
#secdiv

Contributed by Mark Robbins

Samsung Email (S5–S9)

# Working
meta ~ * .foo
title ~ * .foo

Contributed by Mark Robbins

Samsung Email (S5–S9)

# Working
#MessageViewBody

Contributed by Mark Robbins

Samsung Email (S5–S9)

# Working
.body > div > div > .wrapper .foo

Samsung inserts a couple of divs between the body and the wrapper. Same hack as Nine.

Contributed by Mark Robbins

Sapo

# Working
body[style="overflow-y:hidden;width:auto !important; font-family: sans-serif"] .foo{}

Email is opened in an iframe and these styles are added to the body.

Contributed by Mark Robbins

Spark

# Working
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton)

Same target as Outlook for macOS.

Contributed by Mark Robbins

T-online.de

# Working
<!--[if tonline]> T-Online <![endif]-->
<!--[if false]> T-Online <![endif]-->
<!--[if !true]> T-Online <![endif]-->

Supports any conditional comment.

Contributed by Mark Robbins

Thunderbird

# Working
@media screen and (-moz-device-pixel-ratio){
  class {
    // add styles here
  }
}

Contributed by Arfon Davis

Thunderbird

# Working
meta ~ * .foo
title ~ * .foo

The head and body structure of the email is removed, making content in the head siblings of that in the body, so we can target with this. Applies to Thunderbird, Freenet (title element only), Orange.fr, and Samsung.

Contributed by Mark Robbins

Thunderbird

# Working
.moz-text-html .foo

This class is placed on a div inserted between the body and the wrapper so you can also do something like body > div > .wrapper .foo.

Contributed by Mark Robbins

Windows Mail (Phone & Surface)

# Unknown
_:-ms-input-placeholder, :root .foo

Contributed by Mark Robbins

Windows Mail (Phone & Surface)

# Unknown
_:-ms-fullscreen, :root .foo

Contributed by Mark Robbins

Yahoo

# Working
.foo{
  background:/* red */;
  font-size: /* 50px */;
  color: /* white */;
}

Yahoo and AOL will remove comment markers inside a style and render the content left behind.

Contributed by Mark Robbins

Yahoo

# Working
.& .foo{}

Yahoo and AOL will replace the .& with their wrapping ID name. It can also be used to target element selectors (like .&h1{}) and the wrapping div itself (with .&{}).

Contributed by Mark Robbins

Yahoo

# Deprecated
@media screen yahoo{ .foo }

Yahoo & AOL remove invalid media query selectors so will render the above as @media screen {}. Yahoo doesn’t support max-device-width which makes it tricky to split mobile but we can use max-width.

Be sure to keep the space between yahoo and {. If you use it without a space (yahoo{) then it may also render some of the code in Outlook.com.

Contributed by Mark Robbins

Yahoo

# Deprecated
id="★foo"

AOL will strip this out but Yahoo will leave it. AOL also strips <title> and empty <style> elements.

Contributed by Mark Robbins

Yahoo & AOL

# Working
.foo{background:red !yahoo}

Add !yahoo after a style. (This could be any word.)

This will also render on some older versions of Notes.

Contributed by Mark Robbins

Yahoo Japan (webmail)

# Working
<noscript>
  <style>
    .& .foo{}
  </style>
</noscript>

Although it’s run as a separate company, the same targeting works for Yahoo Japan and Yahoo.com. However, Yahoo Japan displays the email in a sandboxed iframe and we can separate it with a noscript tag that Yahoo.com will ignore.

Contributed by Mark Robbins

Need help? Can't find what you’re looking for?

Start a discussion on the GitHub repo or ask the #email-code channel on Email Geeks Slack.