Update: It looks like Yahoo! Mail fixed this issue, so the advice in this column is no longer relevant! :)

In a previous blog post we saw how Yahoo! Mail mangles media queries and how we can address it. However there is a less well known, adverse effect that arises from Yahoo! Mail’s mangling of CSS. If you have CSS rules after  Media Query blocks, it can get frustrating trying to figure out why Yahoo! Mail seems to be enabling and disabling rules seemingly at random.

Here’s an example:

<style>
.box1, .box2 {
 display: inline-block;
 width: 50px;
 height: 50px;
 border: 1px solid black;
}

 @media only screen and (max-device-width: 480px) {
 .random-rule1 { height: 50px; }
}

.box1 {
 background-color: blue;
}

.box2 {
 background-color: red;
}
</style>
<div class="box1">box1</div>
<div class="box2">box2</div>

From the above code block, you’d expect to see two squares with the first one colored blue and the second one red.

However if the same code was sent in an email and rendered in Yahoo! Mail, the first square would have a white background instead of blue.

This happens because the CSS rule that sets box1’s background to blue is mangled by Yahoo! Mail’s processing of CSS since it appears right after the Media Query block. Although most people already place Media Queries at the bottom of the style block, this adds another reason not to place regular CSS under Media Query blocks. However it is possible to place a bogus rule right after the block to address this problem.

...
@media only screen and (max-device-width: 1024px) {
.random-rule1 { height:50px; }
}

.yfix {}

.div1 {
background-color: blue;
}
...

The Key Take Away

In part two I’ll go into detail to explain what appears to be happening but in order to make sure your Media Queries and CSS are not producing unwanted results in Yahoo! Mail follow these two rules:

1) Make sure to write your Media Query CSS rules according to the tips given by Campaign Monitor and Email on Acid.
2) Place regular CSS above Media Query blocks.

For more information on what exactly appears to be happening see How Yahoo! Mail’s Mangling of Media Queries affects your CSS



Update:

This problem also happens if you put CSS right under a comment as well. But since most mailers strip comments before an email is sent this is less likely to be a problem.