Menu
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
658
asked Oct 28 '25 20:10
I am using this system to solve this problem. I have just found that with a lot of try/error testing with the Gmail/Yahoo/Outlook and MacMail and this seems to work. The element with the id="yahoo-show" is only visible in Yahoo. However I don't know if it will still work with other less used mailing systems. None of the answers written here seems to work fine for me but this.
@media only screen{
[id="yahoo-show"]{display:block !important;}
}
/* Intended commented line (Otherwise it will appear in both Yahoo and MacMail App) */
a[id="yahoo-show"]{display:none !important;}
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
