{"id":1497,"date":"2015-03-03T15:08:23","date_gmt":"2015-03-03T15:08:23","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=1497"},"modified":"2015-10-07T11:02:16","modified_gmt":"2015-10-07T11:02:16","slug":"yahoo-mail-fixes-media-query-bug-yahoo","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/yahoo-mail-fixes-media-query-bug-yahoo\/","title":{"rendered":"Yahoo! Mail Fixes Media Query Bug. Yahoo!!!"},"content":{"rendered":"

It looks like the folks at Yahoo! Mail are responsive (pun intended) to the email design and developer community. Less than a month after the petition for Yahoo! Mail to fix their CSS parser<\/a> that causes emails with media queries to break, they have put in a fix for it. <\/p>\n

This is SERIOUSLY great news. Thank you Team Yahoo! Mail!

<\/p>\n

All the hacks you had to add to your styles within media queries so that they don’t “activate” in Yahoo! Mail are no longer needed. The Yahoo! Mail CSS parser now handles nested CSS blocks properly and styles within media queries remain enclosed after the parser is done with it.<\/p>\n

Hacks that you no longer need to use in your email:<\/p>\n

Prevent Yahoo! Mail from displaying the mobile version of your email<\/a>
(Attribute selector hack)\n
```
@media (...) {\r\n  table[class=foo]{...}\r\n}<\/pre>\n
\n<\/li>\nStop Yahoo! Mail from Rendering Your Media Queries<\/a> (Body attribute hack)\n\r\n@media (...) {\r\n  body[yahoo] .foo {...}\r\n}\r\n...\r\n\r\n<\/pre>\n
<\/li>\nWhy Not to Put Regular CSS Under Media Query Blocks<\/a><\/li>\n<\/ul>\n
<\/p>\nYahoo! Mail Web and Mobile App Is Now Responsive<\/h4>\nAn icing on the cake is that not only does Yahoo! Mail support media queries, the Yahoo! Mail mobile app does as well! Yahoo! Mail supports a limited set of media queries but most importantly the ubiquitous min-width and max-width filters.<\/p>\n
So media queries such as these now work as designed in Yahoo! Mail and Yahoo! Mail app. (Note: Responsive content within Webmail will activate narrower than the max-width due to the 190px wide left navigation bar).<\/p>\n@media only screen and (max-width: 480px)  {\r\n  img { width: 100%; }\r\n}<\/pre>\nHowever, max-device-width, min-device-width, -webkit-min-device-pixel-ratio are not supported. It appears media queries with more than one filter are not supported either.<\/p>\n@media screen and (min-width:321px) and (max-width:768px){\r\n  img { width: 100%;}\r\n}<\/pre>\nbecomes: <\/p>\n@media screen and (min-width:321px)and ( _filtered_a ){\r\n #yiv6584440300 img{ width:100%; }\r\n}<\/pre>\n

 <\/p>\nYahoo! Mail Supports Simple Attribute Selectors<\/h4>\nWith this change, Yahoo! Mail also supports the basic class and id attribute selectors, though more advanced selectors (non class\/id attributes and ^=, *=) are still stripped.<\/p>\n
These will work in Yahoo! Mail<\/p>\ndiv[class=foo]{\r\n  color:green;\r\n}\r\ndiv[id=foo]{\r\n  color:green;\r\n}<\/pre>\n

 <\/p>\nYahoo! Mail Client Targeting<\/h4>\nMark Robbins (@m_j_robbins<\/a>) of RebelMail<\/a> also discovered a new way to target the Yahoo! Mail client. (Unfortunately, it appears this technique doesn’t work in IE10\/11) – An alternate way to target Yahoo! Mail is by leveraging a quirk<\/a> in how it handles comments.<\/p>\n
\n@stigm<\/a> @freshinbox<\/a> Looks like you can target yahoo with @media<\/a> yahoo{} 
Yahoo will change it to @media<\/a> nothing else I've seen will render it<\/p>\n
— Mark Robbins (@M_J_Robbins) March 3, 2015<\/a><\/p><\/blockquote>\n

<\/p>\n
You can put CSS specifically for Yahoo! Mail like the example below and it will only be activated in Yahoo! Mail and nowhere else. (Use at your own risk :) )<\/p>\n
@media yahoo{\r\n  .div1{width:200px;}\r\n}<\/pre>\n

 <\/p>\nTest Your Existing Templates<\/h4>\nThis update may potentially affect templates that depended on Yahoo! Mail’s quirks, so I would run some tests through Yahoo! Mail to make sure everything’s A-OK. Hat tip to Stig Morten Myre<\/a> for kicking off this discussion and for suggesting the petition on Yahoo! Mail’s forum<\/a>. <\/p>\n
Notice any new quirks? Pipe in in the comments below! The Litmus forum<\/a> also has some interesting discussion.<\/p>\n
Gmail, the ball’s in your court now. Time to support embedded styles and media queries! #CanHasStyle<\/a>

<\/p>\n
\n\nSubscribe to the #EmailGeeks Newsletter<\/span>\n<\/p>\n
```

Yahoo! Mail Supports Simple Attribute Selectors<\/h4>\nWith this change, Yahoo! Mail also supports the basic class and id attribute selectors, though more advanced selectors (non class\/id attributes and ^=, *=) are still stripped.<\/p>\nThese will work in Yahoo! Mail<\/p>\n