Yahoo! Mail Fixes Media Query Bug. Yahoo!!!

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 that causes emails with media queries to break, they have put in a fix for it.

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

What This Means

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.

Hacks that you no longer need to use in your email:


Yahoo! Mail Web and Mobile App Is Now Responsive

An 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.

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).

@media only screen and (max-width: 480px)  {
  img { width: 100%; }
}

However, 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.

@media screen and (min-width:321px) and (max-width:768px){
  img { width: 100%;}
}

becomes:

@media screen and (min-width:321px)and ( _filtered_a ){
 #yiv6584440300 img{ width:100%; }
}



Yahoo! Mail Supports Simple Attribute Selectors

With 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.

These will work in Yahoo! Mail

div[class=foo]{
  color:green;
}
div[id=foo]{
  color:green;
}



Yahoo! Mail Client Targeting

Mark Robbins (@m_j_robbins) of RebelMail 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 in how it handles comments.


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 :) )

@media yahoo{
  .div1{width:200px;}
}



Test Your Existing Templates

This 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 for kicking off this discussion and for suggesting the petition on Yahoo! Mail’s forum.

Notice any new quirks? Pipe in in the comments below! The Litmus forum also has some interesting discussion.

Gmail, the ball’s in your court now. Time to support embedded styles and media queries! #CanHasStyle

Subscribe to the #EmailGeeks Newsletter

Latest Comments
  1. Niven

    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!important over display:block !important.

    • Justin

      Thanks for the info Niven. Is this in the style block or inline and did this change from before the fix?

    • Nicole Merlin

      Wow, thanks Niven! I don’t think I would have thought to try that. You just totally saved my bacon.

  2. Susie

    At the moment I can now get yahoo (mobile app) to hide content but that’s about it.. It doesn’t seem to be stacking my 2 column down to 1.. anyone had any joy with this?

    • JessiHD

      I am having the same problem and am working on a solution. If I find one I will let you know .

    • Tina

      Yes, we had the same problem on iPhone only. Android appears to be showing all mobile design without fixes. On iPhone, using table-header-group and table-footer-group seemed to work inside of display:block; in order to stack for mobile, but it still renders a little different from Android. Still working on it….

    • JessiHD

      I had to completely redo my code for the two columns to stack. It is now simply two tables side by side in a table. Everything else was breaking the design. I am able to do much more now with them.

  3. Yahoo

    Hi All, Yahoo here. Just wanted to confirm that that this has been fixed! The information that you gathered was really helpful to our engineering team. Thank you very much.

    If you need to contact Yahoo support in the future you can do so using our help pages. Here’s that link:

    https://help.yahoo.com/kb/helpcentral

    • Justin

      Yahoo, thank you very much for the quick fix!

  4. Tina

    FYI – did 4 tests:

    Test 1: Everything as it was
    Tested an email with Yahoo! desktop and the mobile app with brackets [ ] still in the CSS and yahoo=“fix” still in the body tag. Code also contains display:block;.

    The email rendered:
    • Desktop design for desktop
    • Partial mobile design for Yahoo! Mail Mobile App on an Android
    • Desktop design for Yahoo! Mail Mobile App on an iPhone

    Part of original code:
    @media only screen and (max-device-width: 480px), screen and (max-width: 480px) {
    body .header-mobile-hidden {display: none !important;}
    }

    Changed Into:
    @media screen and ( _filtered_a )screen and ( _filtered_a ){
    #yiv7611061520 body .filtered99999 .yiv7611061520header-mobile-hidden
    {display:none;}
    }

    Test 2: Removed max-device-width in media query
    The email rendered:
    • Desktop design for desktop
    • Partial mobile design for Yahoo! Mail Mobile App on an Android
    • Desktop design for Yahoo! Mail Mobile App on an iPhone

    Original Code:
    @media only screen and (max-width: 480px) {
    body .header-mobile-hidden {display: none !important;}
    }

    Changed Into:
    @media screen and (max-width:480px){
    #yiv6845702281 body .filtered99999 .yiv6845702281header-mobile-hidden
    {display:none;}
    }

    Test 3: Removed max-device-width, brackets [ ] and body yahoo=”fix”
    The email rendered:
    • Desktop design for desktop
    • Mobile design for Yahoo! Mail Mobile App on an Android
    • Partial mobile design for Yahoo! Mail Mobile App on iPhone

    Original Code:
    @media only screen and (max-width: 480px) {
    body .header-mobile-hidden {display: none !important;}
    }

    Changed Into:
    @media screen and (max-width:480px){
    #yiv0531989004 body .yiv0531989004header-mobile-hidden {display:none;}
    }

    Test 4: Removed max-device-width and brackets [ ], body yahoo=”fix” and changed column stacking code to eliminate display:block;

    The email rendered:
    • Desktop design for desktop
    • Mobile design for Yahoo! Mail Mobile App on an Android
    • Mobile design for Yahoo! Mail Mobile App on iPhone

    Same code changes as Test 3

  5. Paul van steenoven

    Is the bug back? My responsive code is back in desktop yahoo :(((

  6. A web Developer

    This was not a good update for us after all. We only have a small codebase but it we had a lot of problem with IE – yahoo.

    • Justin

      What sort of problems are you seeing regarding IE-yahoo?

      • Web Developer Philippines

        I have this one simple code

        ...
        
        @media only screen and (max-width: 599px) {
            table[class="mobile-full"] {
                width: 100% !important;
            }
        }
        
        ...
        
            
                 BUY NOW 
            
        
        

        is being rendered as mobile

        • Justin

          I tested your markup on Yahoo! Mail webmail and it only displayed the “mobile” version when the page was narrower than 599px.
          You could try posting on the Litmus forum with a bigger chunk of your code. I’d be curious to see what’s the issue.

  7. JessiHD

    I am hitting my head against a brick wall trying to get content to hide on the mobile app. It is rendering great otherwise. I have used every form of hiding and including the class on both the cell and the image.

    Here is what I have in my media query right now:

    table[class=”hide”], img[class=”hide”], td[class=”hide”], div[class=”hide”], span[class=”hide”] {
    display:none!important;
    visibility:hidden!important;
    max-height:0px!important;
    overflow:hidden!important;
    font-size:0px!important;
    max-width:0px!important;
    }

    It works when viewing on a mobile browser but not in the app.

    • Justin

      Yahoo! still has issues processing attribute selectors, so I’d change it to

      .hide {

      }

      • JessiHD

        That worked thank you!

  8. WebDevJoshB

    Just wanted to pass this along.

    I had some rendering problems: Yahoo was displaying some CSS from the media query I’d written for 1000px width while also mixing in some of my inline CSS code written at 700px wide.

    It turned out that the problems only happened on the selectors I had grouped together in the media query that share the same declarations. When I wrote them out individually, the layout problems went away.

    So instead of:
    [class=value1], [class=value2], [class=value3], [class=value4] {
    property: value;
    }

    I wrote out each selector:
    [class=value1] {
    property: value;
    }
    [class=value2] {
    property: value;
    }
    [class=value3] {
    property: value;
    }
    [class=value4] {
    property: value;
    }

    There’s probably a better way to do this, but it was a quick fix instead of reworking all my media queries.

    • Justin

      Thanks Joshua, I did notice that Yahoo! removes all except the last selector in a group.

      An alternative is just not to use attribute selectors since its not longer needed for Yahoo! Mail

      .value1,.value2,.value3,.value4 {
      property: value;
      }

  9. Eric

    Seems that the issue may be back with IE10 and Yahoo mail.
    Once we put the attribute selectors back in, bam it worked as expected.

Leave a Reply

Your email address will not be published. Required fields are marked *