Some time ago Yahoo Mail handled media queries in a strange way, which means it recognized all of them, even those which were targeted to other email clients (more info about the bug here). The solution was to use a special, tricky CSS media query which was only recognized by Yahoo Mail and fixed the issue.

Yahoo Mail is now responsive!

Yahoo Mail CSS media query support

It’s a small step for Yahoo but a giant leap for email designers! Since they fixed their media query parser engine, only those CSS parts count, which are designed for Yahoo. It has been an old debate if email clients should have their unique targeting options or need to comply with standards.

Yahoo’s choice was to favor email coders and designers instead of obeying coding principles, so they introduced their unique media query:

@media yahoo { .. }

Thanks to this recent update to their web client and mobile apps as well, responsive emails will work properly all over the Yahoo universe! There are still some limitations though, but at least min-width and max-width filters are supported.

We would like to say a big THANK YOU to Yahoo and direct our question to Google, Gmail…

*When will Gmail support media queries? *

Author
Roland Pokornyik

Roland Pokornyik

CEO / Co-founder @ Chamaileon.io & EDMdesigner.com

  • A Step-by-Step Guide to Sending Emails with PHP A Step-by-Step Guide to Sending Emails with PHP

    In this comprehensive guide you will learn the ins and outs of sending text and HTML emails with built-in packages and email delivery services using PHP.

    Read more
  • How to Use a Templating Language in HTML Email Development How to Use a Templating Language in HTML Email Development

    Shorten your development time with templating languages. EJS and the new JavaScript ES6 template strings can reduce the pain of responsive email coding.

    Read more
  • CSS Inliner Tools Worth Considering for Your Next Email CSS Inliner Tools Worth Considering for Your Next Email

    I hope you have never tried inlining CSS to your email code manually. Thankfully there are several CSS inliner tools. Check out their pros and cons.

    Read more