Search code examples
cssemailhtml-email

Yahoo Mail CSS Targeting 2020

In 2019, email developers used to be able to target yahoo mail's css with the media query below:

<body>
<style>
@media screen yahoo {
.class-name {css}
}
</style>

My issue is with using web fonts. I need to target font-size for yahoo mail.

Is there a new method for targeting yahoo mail css in 2020?

Thanks

Solution

  • Alice Li of Litmus has worked out that the new Yahoo filters for 2020 do not filter out weird unicode characters.

    However, it appears to capture AOL & Yahoo (I say 'appears' because it comes up intermittently on Litmus previews):

    <html>
<body>
<!-- START force fallback on Yahoo/AOL -->
<style>
    .& #√ .yahooAOLhide {display: none !important;}
    .& #√ .yahooAOLshow {display: block !important;}
</style>
<!-- END force fallback on Yahoo/AOL -->
<table id="√"><tr><td>  
<div class="yahooAOLhide">
    @@@@@@@@
</div>
<div class="yahooAOLshow" style="display: none;mso-hide:all;">
    YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!
</div>
</td></tr></table>
</body>
</html>

    As you can see, the <style> section must be written in the <body> so as to work with the Yahoo app too.