One of the lesser known quirks of Yahoo! Mail involves their CSS parser removing the next CSS style after comments. This has been in place since Yahoo! Mail’s more infamous media query bug.

Although Yahoo! Mail recently (and thankfully) fixed the media query bug, the comment bug remains. Strangely however, the comment bug only affects the Webmail version and not the Yahoo! Mail app.

In this article, we’ll go into how to address this issue by adding a phantom selector under comments as well as using this to your benefit by using it as a means to target Yahoo! Mail.

Unexpected rendering quirks

The effect of removing CSS styles placed after comments in Yahoo! Mail could make your email exhibit random rendering quirks.

Take the two CSS blocks below.

.main-content {
   font-size: 20px;
}

/* call to action */
.cta {
  font-size: 32px;
}

When this email is rendered in Yahoo! Mail, you’ll notice that “main-content” content has the intended font size, but content with the class “cta” mysteriously does not.

However, because most emails have their styles inlined anyways, often this “bug” does not reveal itself.

Under The Hood

Yahoo! Mail is not really removing CSS after comments but merely rendering them inactive. Yahoo! Mail converts comments into into a “yiv” unique id (#yiv7320523903) without making it into a proper CSS selector – it lacks the { and }. This causes the next style (cta) to in effect have double unique ids which causes it to not match any elements.

#yiv7320523903 .yiv7320523903main-content { 
   font-size: 20px;
}

#yiv7320523903
#yiv7320523903 .yiv7320523903cta { 
  font-size: 32px;
}

If you are using an Email Service Provider (ESP) such as MailChimp or Campaign Monitor, often times the ESP automatically inlines your styles into the HTML. Inlining will negate the issue since the styles are applied directly to the elements. However often times while testing you may send your emails outside of your ESP and then this issue rears its ugly head.

Solution

In order to ensure your styles are not affected in Yahoo! Mail, you could simply eliminate comments in your email. But you may want to keep comments in place for code readability especially if you have many CSS styles in your email.

A simple solution is to place a phantom CSS selector under your comments, such as .yfix{}

/* call to action */
.yfix{}
.cta {
  font-size: 32px;
}

Yahoo! Mail converts it to

#yiv7320523903
#yiv7320523903 .yiv7320523903yfix { }

#yiv7320523903 .yiv7320523903cta { 
  font-size: 32px;
}

As you can see here, the cta class now does not inherit the unique id of the comment.

Target Yahoo! Mail using the comment bug

Here’s a cool way to target the Yahoo! Mail client. You start out by creating a selector filled with styles you only want manifested in Yahoo! Mail. Then you follow it with the same selector but this time with a comment placed above it and filled with the styles you want manifested in other clients.

So lets say you only want text to be green on Yahoo! Mail but red elsewhere. Here’s how you’d do it.

.cta {
  color: green;
}

/* Removed in Yahoo! Mail */
.cta {
  color: red;
}

Note you don’t place the phantom selector under the comments since you want the second selector neutralized in Yahoo! Mail.

Takeaway

This Yahoo! Mail quirk is not a big deal if you’re aware of it. In fact it can even be used to your benefit by using it to style elements only in Yahoo! Mail.

As they say, when life gives you lemons, make lemonade :)