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.
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.