JK5
Looks Like Yahoo Mail Finally Fixed Their Media Query Bug
It looks like the days of adding attribute filters and body attributes to styles in media queries just to address the Yahoo! Mail media query bug are finally over.
http://freshinbox.com/blog/yahoo-mail-fixes-media-query-bug-yahoo/
No more attribute selector syntax in media queries!
@media (...) {
div[class=myclass]{...}
}
Not only does it appear that they've fixed the bug, it seems they're supporting responsive emails (min-width, max-width). There's also the possibility of a new Yahoo! Mail client targetting technique leveraging a quirk in how Yahoo! Mail processes media query declarations.
I have just done a quick test on one of our clients emails where we do a little bit of showing and hiding of mobile & desktop imagery using classes.
Yahoo didn't like any !important definitions with a space between the declaration and the exclamation mark...
So it liked
display:block!importantoverdisplay:block !important.Interesting! Is this in the style block or inline and did the space work before the fix?
In the style block. Yes it worked fine with the space in apps like Outlook and the native Android email client.
Should have mentioned, this is all Android testing.
Did the space work fine in Yahoo! Mail Android app before this new update?
And it looks like the issue is back. IE10 and Yahoo mail are showing parts of the mobile version instead of the desktop and adding the attribute selector back in seems to have fixed the problem.
I'm curious, could you post an example or provide a codepen link? From what I can see its not breaking media queries like it did in the past.
However this also means that if have a media query like below, and the user's browser is narrower than 600px, the media query will activate.
I've done some testing of this and have learned that my retina mobile-optimized images are causing issues in the Yahoo Mail app (on Android) because it now actually shows the responsive layout.
I'm swapping a few images for mobile (hiding desktop inline image, showing a mobile background image version), and
display: none;doesn't work to hide the desktop one... fixed it after I found this thread: https://litmus.com/community/discussions/815-yahoo-no-longer-supports-display-noneHowever, my mobile images are retina, so they need
background-size... which doesn't work.Continuing to use the attribute filters the desktop version still shows, though it seems like some mobile CSS is being applied in one or two spots which is quite odd (doesn't apply to an older send of the template, has to be a new send). It seems like my options are either a) continue to force it to use desktop and figure out any quirks like random mobile styles appearing or b) don't use retina background images for mobile.
Yahoo! Mail only supports the basic element[class=theclass] but not ~= or ^= so try that if you don't want it to activate in the media query in Yahoo! (I haven't checked if that's the case in mobile though so I'm speculating)
I haven't had an issue with ~= in the attribute selectors in Yahoo Mail on desktop. Either using attribute selectors or not (with the new update), desktop is totally fine.
I'm only now running into issues where the Yahoo Mail App is showing some mobile styles when using attribute selectors, whereas before the new update it did not.
I'm was trying to point out that Yahoo! shouldn't be showing styles with ~= in the selectors, either web or mobile, so if you don't want it to show in mobile you should use that.
Oh sorry, I totally didn't get that lol. Long day!
Yes that works, thanks! That's too bad to have to keep using the attribute selector, but once you go back to retina images it's hard to go back to fuzzy regular ones. :P
Unfortunately this issue is still not fixed in Yahoo Mail Japan :(
With Gmail about to support media queries (and not support attribute selectors),
this is gonna be a problem...
The official response from Yahoo
https://yahoo.uservoice.com/forums/210695-yahoo-mail/suggestions/7053455-css-parser-should-not-break-responsive-emails-when
The funny thing is, I got sent this in an email to my Yahoo account and it ended up in my spam folder :)