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

  • HTML Email Development Tools HTML Email Development Tools

    Would you like to improve your HTML email development workflow and learn about new developer tools? This article series is for you.

    Read more
  • Git Branching Workflows in SaaS Development and the Review ASAP Policy Git Branching Workflows in SaaS Development and the Review ASAP Policy

    This article shows you a git branching workflow which helps developers to review changes frequently, leading to better code quality.

    Read more
  • Tabular Data Representation in Modern HTML Emails Tabular Data Representation in Modern HTML Emails

    Responsive tables are the most common ways to represent tabular data in HTML emails. Learn about the best practices and the card layout design approach.

    Read more