Targeting Yahoo Mail browser CSS

I was wondering if anyone came up with a hack for targeting the Yahoo Mail CSS on browsers. Specifically, not the inline CSS but the Yahoo-created classes within a tag in an email.

The problem that I am facing is this: I coded a responsive template for a campaign, and while everything works as it should on iOS and every major mail clients, Yahoo has a quirk that I have not found anywhere else: It reads the tag as it would read a regular one, completely skipping over media queries (Actually, it changes the code of everything considered as styling). What I mean by that is this: It'll read the styles from the bottom to the top, therefore applying the smaller screen styles to the email even if it is read on a big device, like a computer screen.

Here is what it looks like after being processed by Yahoo Mail :

<style type="text/css">

_filtered #yiv6637726198 {
text-align:left;}
#yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical-    align:middle !important;height:20px !important;}
#yiv6637726198 

_filtered #yiv6637726198 {
}
#yiv6637726198 .yiv6637726198main {width:100%;}
#yiv6637726198 .yiv6637726198header {width:100%;}
#yiv6637726198 .yiv6637726198header-img {width:100%;height:auto;}
#yiv6637726198 .yiv6637726198logo-img {width:75px;height:30px;}
#yiv6637726198 .yiv6637726198icon-img {width:19px;height:18px;}
#yiv6637726198 .yiv6637726198icon-wrap {width:19px;}
#yiv6637726198 .yiv6637726198button {width:100%;height:auto;}
#yiv6637726198 .yiv6637726198footer {display:none;}
#yiv6637726198 .yiv6637726198footer-size {width:100%;}
#yiv6637726198 .yiv6637726198btn {width:100px !important;height:auto !important;}
#yiv6637726198 .yiv6637726198text {font-size:9px !important;text-align:center;}
#yiv6637726198 .yiv6637726198smaller {width:5px !important;height:5px !important;}
#yiv6637726198 .yiv6637726198show {display:block;}
#yiv6637726198 .yiv6637726198title {font-size:12px !important;}
#yiv6637726198 .yiv6637726198date {font-size:9px !important;line-height:14px !important;}
#yiv6637726198 .yiv6637726198smaller {width:10px !important;}
#yiv6637726198 .yiv6637726198small-hide {display:none;}
#yiv6637726198 .yiv6637726198row {display:table-row;text-align:left;}
#yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical-   align:middle !important;height:20px !important;}
#yiv6637726198 

</style>

And here is my code, as written in my HTML and understood by other responsive-enabled mail clients :

<style type="text/css">

@media (max-width:321px) {
    .row { display:table-row !important; text-align:left !important;  }
    .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important;  }
    }

    @media (max-width:241px) {
    .hide { display:none !important; }
    .main { width:100% }
    .header { width:100%; }
    .header-img { width:100%; height:auto; }
    .logo-img { width:75px; height:30px; }
    .icon-img { width:19px; height:18px; }
    .icon-wrap { width:19px; }
    .button { width:100%; height:auto; }
    .footer { display:none !important; }
    .footer-size { width:100% } 
    .btn { width:100px !important; height:auto !important }
    .text { font-size:9px !important; text-align:center !important; }
    .smaller { width:5px !important; height:5px !important; }
    .show { display:block; }
    .title { font-size:12px !important; }
    .date { font-size:9px !important; line-height:14px !important; }
    .smaller { width:10px !important }
    .small-hide { display:none !important; } 
    .row { display:table-row !important; text-align:left !important;  }
    .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important;  }
    }

    </style>

(You'll understand this is some small part of the whole thing, as showing the full code would take too much place).

Also, my inline CSS is done properly as needed for html-emails.

So, do you guys have any idea for a little hack? And a small question here, would an inline !important have priority over a media query activated !important ?

Thanks for your help.

// UPDATE 1 //

With some testing, I found out that by specifying a "full width" media query (max-width:900px) or something like that, and by styling every element the same as their inline styles with !important, AND by inverting the order off my media queries (Adding a min-width to those now that the order is inverted), Yahoo Mail would pick that bottom one to style the whole email. It removes every responsiveness, but at least it doesn't break the whole layout or stretch it to the moon and back...

回答1:

This is a known issue, although there had been mixed reports that it had been resolved by Yahoo. I guess not...

Here are some techniques to work around the Yahoo media queries bug

Here is an example of a responsive template with the fix in action

回答2:

As John has mentioned, this is a widely known issue where Yahoo! Mail "exposes" your media query intended only for mobile devices.

One of the strategies you have found out is to add another media query block after your mobile media queries and targeting it to a larger browser width, but the strategies linked by John makes it unnecessary to do that.

I wrote an article analyzing what exactly Yahoo! Mail appears to be doing with your media queries - although it doesn't give you any new strategies per se.

http://freshinbox.com/blog/how-yahoo-mails-mangling-of-media-queries-affects-your-css/

UPDATE As of 3/2/2015 Yahoo! Mail finally fixed their CSS parser. So the problems you were facing will no longer manifest.

See: http://freshinbox.com/blog/yahoo-mail-fixes-media-query-bug-yahoo