---

Yahoo! Mail released an update two weeks ago that came with a new UI, a few new features and some performance improvements. Yahoo! Mail also made some tweaks on how they process CSS as well. The significant change is that the new Yahoo! Mail no longer strips display:none styles when applied inline. You should note that since Yahoo! is taking an opt-in approach to the new UI, a large portion of the user base will still be using the old version.

Changes In Yahoo! Mail Webmail

Display:none inline allowed

As mentioned earlier, display:none is now allowed as an inline style. Previously Yahoo! only supported display:none within embedded styles (style blocks).

No more scrollbars on elements using max-height and max-width

Yahoo! Mail used to add overflow-y:auto when you use the max-height and overflow-x:auto with max-width. This used to cause frustration to developers as scrollbars would appear in elements that use those styles necessitating the addition of overflow:hidden!important. However Yahoo! Mail no longer adds these styles in the new interface.

Consistent CSS filtering across properties except Android

Yahoo! Mail used to have some slight CSS filtering difference between Webmail and iOS. They're now similar.

Things that haven't changed

Display !important only works without spaces

Yahoo! Mail will still remove !important if there is a space between your display declaration and the !important rule. So display:none!important will be allowed but display:block !important will be converted to display:block.

Yahoo! Mail Android still only supports styles in the body

For some inexplicable reason, the Android app still only supports styles in the body. However the Android app's CSS filtering is similar with Webmail and iOS.

CSS comments still affect adjacent styles

A Yahoo! Mail bug causes CSS styles to be disabled if it is located under a comment. Unfortunately this is still the case.

Height still converted to min-height

Yahoo! Mail frustratingly still converts height to min-height. This causes problems in our media queries when we try to change height to "auto" for responsive images as it gets converted to min-height:auto which is an invalid CSS declaration.

Media query support still limited to max-width and min-width

Although you can use max-width and min-width in media queries, you cannot use both in a single media query since Yahoo! Mail only allows a single filter in media queries.

Targeting Yahoo! Mail (New and Old)

Targeting Yahoo! Mail by far hasn't changed, but I wanted to fix some misconception in earlier articles concerning the @media yahoo{} hack to target Yahoo! Mail. The hack (discovered by Mark Robbins) worked in Yahoo! Mail because Yahoo! Mail removes illegal filters leaving @media{} However @media{} doesn't work in Internet Explorer because Internet Explorer 10 and 11 does not like media queries without any filters. Therefore the proper technique needs at least a filter such as "screen" in it. The Edge browser however has no such problem. Here's a code to only have styles that are active in Yahoo! Mail.

@media screen yahoo{
  ... Yahoo! specific CSS ...
}

If you want the above media query to be active in all Yahoo! Mail properties including Android, place the media query in the body of the email and not head.

Targeting Yahoo! Mail iOS.

Targeting the iOS app is fairly simple, just add a max-width to the media query and place it in the head.

@media screen yahoo and (max-width:480px){
  ... Yahoo! iOS specific CSS ...
 }

Targeting Yahoo! Mail Android

This one is a bit more tricky. If you want to hide styles from Yahoo! Mail Android, you just need to place them in the head. However if you want to have styles only for the Android app, there's a trick. You place the style in the body and then you override the style in the head and you can do that by adding !important to any style that you override in the head. However if the style in the body already contains !important, you can take advantage of CSS specificity rules - rules with more specificity has more weight. Say you want to only show an element with the .show-android class in Yahoo! Mail's Android app you can declare the element as visible in the body and add a div in front of the class of the declaration in the head to give it more weight.

<html>
<head>
<style>
@media screen yahoo {
  div .show-android{
      display:none!important;
  }
}
</style>
</head>
<body>
<style>
@media screen yahoo {
  .show-android{
      display:block!important;
  }
}
</style>
<div class="show-android" style="display:none;">Only displayed in Yahoo! Mail Android</div>
</body>
</html>

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices. Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!