Yahoo! Mail Now Supports Media Queries
Kudos to Justin Khoo at FreshInbox for starting the petition for Yahoo! to change their parser to support media queries. It seems we’ll need to revise our previous post, 9 Ways to Prevent Yahoo! Headaches, and that the fix described in Stop Yahoo! Mail from Rendering Your Media Queries is no longer needed.
Though Yahoo! has remedied the media queries issue, it looks like attribute selectors are still not supported. Is another petition in the works? Maybe. But for now, we’ll break down the changes and what they mean for you.
The Good News
Supporting media queries is nice, but let’s face it, it isn’t terribly exciting for most email developers. In fact, the browser window has to be quite narrow to render media queries to trigger on most devices. Just to be clear, though, with this Yahoo! fix, you no longer need to include attribute selectors in your media queries when designing emails for any client.
Are There Any Exceptions?
Absolutely. We’re still talking about email design, right? The media features max-device-width, min-device-width and webkit-min-device-pixel-ratio are not supported in Yahoo! Mail. And Yahoo! Mail also does not support queries with more than one media feature.
For example, the following media queries are not supported:
@media only screen and (max-device-width: 2000px) { .. }
@media only screen and (min-device-width: 2000px) { .. }
@media only screen and (webkit-min-device-pixel-ratio: 2000px) { .. }
@media only screen and (max-width: 2000px) and (min-width: 1px) { .. }
Targeting Yahoo! Mail with Media Queries
Mark Robbins of GoRebelMail noticed that you can use a special media query to target only Yahoo! Mail.
He tweeted:
It’s simple; just use the mediatype “yahoo” in your query.
@media screen yahoo { .. }
In Mark’s testing, and in ours here at EOA, we have yet to find another client that is rendering these styles. So if you have a style that needs to be added just for Yahoo! Mail, here is your work around. Note: An earlier version of the hack did not work on IE10 and IE11 because the screen mediatype was missing.
The Bad News
Though Yahoo! has fixed the media queries conundrum, they have mostly not changed how their parser handles attribute selectors. Most are still ignored by the parser. The only attribute selector that we have observed working in Yahoo! Mail (thanks again Justin Khoo!) is the element[class=XXX] selector. For example:
div[class="classname"]
Does this mean you need to go back through all of your templates and remove the attribute selectors? Probably not. Due to the wider screen size of most desktops, most media queries wouldn’t have triggered on Yahoo! Mail anyway.
If you do want to see responsive behavior in this client, you should go in and remove the attribute selectors. You can use this lack of support to your advantage, too, if you’d like to include styles that Yahoo! Mail will ignore.
Test and Test Again
We applaud Yahoo! for listening to their customers and fixing their parser. Now if we could get Gmail to do the same…
Want to make sure all of your templates are looking good in Yahoo! Mail or any other email client? No problem! Sign up for our 7 day free trial and test your heart out.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
15 thoughts on “Yahoo! Mail Now Supports Media Queries”
Comments are closed.
Thanks for the shout out! Actually it appears that Yahoo! Mail does support the simplest form of attribute selector – the element[class=XXX] selector (ie. table[class=”foo”]).
It doesn’t appear to support the other ones such as ^=, ~=, *= etc.
I am having an issue with my emails not switching to a single column layout. It is being squished all in one row but extending the text down much farther than the rest of the elements.
Does this limited media query support apply to the Yahoo! mobile apps on iPhone and Android now also, or only the webmail version?
So for multi-media queries to work in Yahoo such as this:
@media only screen and (max-device-width: 2000px) { .. }
@media only screen and (min-device-width: 2000px) { .. }
@media only screen and (webkit-min-device-pixel-ratio: 2000px) { .. }
@media only screen and (max-width: 2000px) and (min-width: 1px) { .. }
Do we write it like this?
@media yahoo only screen and (max-device-width: 2000px) { .. }
@media yahoo only screen and (min-device-width: 2000px) { .. }
@media yahoo only screen and (webkit-min-device-pixel-ratio: 2000px) { .. }
@media yahoo only screen and (max-width: 2000px) and (min-width: 1px) { .. }
I tried this in my email but it’s not working on the Yahoo Mail app on iphone:
@media only screen and (max-width: 480px) {
…
}
@media yahoo {
…same rules as above…
}
Can you tell me what I’m doing wrong? Thanks!
Adam: From my tests the media query support extends to Yahoo!’s iOS mobile app, which makes Yahoo!’s mobile app responsive!
With Outlook’s mobile app also responsive, that leaves Gmail as the odd one out.
Does this mean we can now start using table less html markup for emails with external css sheets? I’m still so confused as to why people feel the need to have another app for email when iOS comes with a perfectly viable solution. But hey now we have media queries for a browser based email client. Until all of the email clients collectively change their engines the one tried and true method remains. Tables and inline-styles.
Thomas: Nope the reason we STILL have to code with antiquated tables is MS Outlook for Windows.
Until the folks at Redmond wake up and smell the web standards, we’re stuck with furniture in our emails.
It looks like Yahoo! doesn’t support selector grouping, whereas all other email clients that I’ve tested on do.
div[class=”classname1″], div[class=”classname2″] { property: value; }
It appears Yahoo! ignores the first attribute listed and only applies the second. I’ve not tested beyond combining two selectors, but you may want to avoid any sort of combining.
Justin Khoo,
Agreed, Outlook is terrible at best. But I do think it’s unfair to blame just one. They are all under performing. Gmail. Made by Google. Makers of Chrome. “The most advanced browser yet” can’t include media query support to their “Web based email client”. I know they say that is happening 2015 without an announcement…and the list goes on for others as well.
I’ve created the most basic tests and my Yahoo Email iOS app still does not show anything from my media query. I have the following class on a table, even tried the BODY tag and the email still doesn’t show a background color.
@media yahoo
{
.yahoo
{
background-color:#666666;
}
}
@media yahoo { … } doesn’t appear to be working anymore. @Geoff Phillips can deny or confirm this to be true?
As far as I can remember, Yahoo mail app stopped supporting @media yahoo since around Feb 2017??? I even tried putting my simple @media after the opening <body> tag (as I’ve seen from another post) with no luck.
Hoping to spark up this conversation again… well because I am stuck.
As of today I can pin point Yahoo! app ios, no problem. However when I am trying to make an email responsive (desktop vs. mobile), I can’t get Yahoo! Mail on desktop to be different than Yahoo! app Android.
Right now I am using:
@media screen yahoo and (max-width:480px) for Yahoo ios, and @media screen yahoo (inside the body tag) to trigger the Yahoo app android (but what I do for this media query effects the yahoo mail desktop)
Send help… pleaseeee.
Hi Devan —
Thanks for reaching out! Have you tried pitching your question to the #emailgeeks channel at all? We find that’s a fantastic resource when we’re stumped. You can use the hashtag on Twitter or check out their Slack community: https://email.geeks.chat/
Hope that helps!