{"id":4108,"date":"2015-04-07T09:30:13","date_gmt":"2015-04-07T07:30:13","guid":{"rendered":"http:\/\/www.digitalresponse.es\/blog\/?p=4108"},"modified":"2015-04-07T09:30:13","modified_gmt":"2015-04-07T07:30:13","slug":"yahoo-soluciona-problemas-media-queries","status":"publish","type":"post","link":"https:\/\/www.digitalresponse.es\/en\/yahoo-soluciona-problemas-media-queries\/","title":{"rendered":"Yahoo fixes its problems with media queries"},"content":{"rendered":"

At the beginning of February, Fresh Inbox started a campaign to ask Yahoo to fix its incompatibility with media queries<\/a> we use to make our emails responsive. The problem was that Yahoo applied the latest rules declared within our media queries even though they were desktop resolutions, which threw our entire layout out of whack and forced us to look for hacks to avoid disaster.
\nThe solution found was to structure the CSS rules with attribute selectors<\/strong>because Yahoo does not interpret them, and would therefore ignore them and keep the inline style applied. This caused our styles to look like this:
\n\"css-email4\"<\/a>
\nBut a few days ago, Fresh Inbox gave us the good news<\/a>. Yahoo seems to responsive to the demands of developers<\/strong> and barely a month after the request, he replied fixing the bug and supporting responsive design.<\/strong><\/p>\n

Take note, Gmail<\/strong><\/span><\/p>\n

\"Toma<\/a><\/p>\n

So, email developers can get rid of the attribute selectors and declare CSS rules \"like normal people\".
\n\"css-email3\"<\/a>
\nBut that's not the only good news, as in addition to fixing the problem, Yahoo now provides support for responsive design in both Webmail and its mobile application<\/strong>However, not all the filters we can apply will work. Yahoo seems to understand the most commonly used ones without any problems: max-width and min-width<\/strong>but max-device-width, min-device-width, -webkit-min-device-pixel-ratio are left unsupported. We will also encounter problems if we use multiple filters in a media query. That is, this code will work correctly:
\n\"media<\/a>
\nBut if we add another filter, as in this example, it will not work.
\n\"media2\"<\/a>
\nIn addition, Yahoo, according to Mark Robbins<\/a>yahoo, offers us the possibility to select only its client in case we want to apply specific styles or correct bugs that may occur in its service. This can be done with the filter \"yahoo\" in a media query, in this way:
\n\"soloyahoo\"<\/a>
\n 
\n 
\n 
\nAll in all, good news for the email industry. And don't forget that we are still hounding Gmail to get its act together to solve the problems with responsive design. You can retweet this tweet from Freshinbox to join the petition:<\/p>\n

\n

Hi @google<\/a>, when will @gmail<\/a> be \"mobile friendly\"? http:\/\/t.co\/nj8vI4IVh1<\/a> #SupportMediaQueries<\/a> #CanHasStyle<\/a><\/p>\n

- FreshInbox (@FreshInbox) March 27, 2015<\/a><\/p>\n<\/blockquote>\n