In April 2011, Marketing campaign Monitor revealed this text which identifies a problem in the best way Yahoo! Mail handles media queries. With the assistance of Brian Sisolak @bsisolak at Trilogy Interactive, we’ve recognized a couple of extra points with regard to the best way Yahoo! Mail handles media question kinds meant for cellular gadgets solely. To make a protracted story brief, every model of Yahoo! ignores your media question declaration together with all of its conditional statements. It then renders every of the kinds as if they’re outdoors of the media question to start with. On prime of that, it will get confused along with your first declaration which is subsequently ignored. So for instance, this:

<model>
 @media solely display and (max-device-width: 480px) {
   #smallScreen {width:100px; padding:2px;}
   .desktop {width:500px; padding:10px;}
 }
</model>

Will get transformed to this:

<model>
 _filtered #yiv1449593645 {padding:2px;} 
 #yiv1449593645 .yiv1449593645desktop {width:500px;padding:10px;} 
 #yiv1449593645
</model>

As you’ll be able to see, Yahoo! converts every of your model names into a reputation that’s distinctive to your electronic mail. They do that with the intention to hold your kinds separate from those they use of their interface. So later within the doc, it additionally converts your HTML:

<div class="desktop">Textual content</div>

Is transformed to:

<div class=" yiv1449593645desktop ">Textual content</div>

Though Yahoo! has actually good intentions, I believe the issue is happening as a result of their parsing software doesn’t have in mind media queries and the best way they’re formatted.

So what’s the repair?

Marketing campaign Monitor got here up with a sneaky answer to make use of attribute selectors since they don’t seem to be supported both.  That manner your media question and the kinds inside is not going to get picked up by Yahoo!

To present an instance, if I convert my authentic question from above, it will appear like this:

<model>
 @media solely display and (max-device-width: 480px) {
   *[id=smallScreen] {width:100px; padding:2px;}
   *[class=desktop] {width:500px; padding:10px;}
 }
</model>

Another choice is to make use of attribute selectors a bit in another way whereby you add a “*[class]” earlier than all class declarations and “*[id]” earlier than ID’s like this:

<model>
 @media solely display and (max-device-width: 480px) {
   *[id]#smallScreen {width:100px; padding:2px;}
   *[class].desktop {width:500px; padding:10px;}
 }
</model>

The bugger about utilizing the examples above is that every component managed inside your media question should comprise an HTML attribute (id, class, model, and so forth). Unfortunatly, common, sort and decendent selectors are out of the query.

So right here’s another artistic tactic that provides you entry to extra selector sorts:

<model>
   @media solely display and (max-device-width: 480px) {
      physique[yahoo] p {shade:#00C}
      physique[yahoo] .foo {shade:#C03}
      physique[yahoo] .bar {shade:#C03}
    }
 </model>
...
<physique yahoo="repair">
    <p>take a look at</p>
   <p class="foo">take a look at</p>
   <div class="bar">take a look at</div>
</physique>

On this instance, I’m making up a “yahoo” attribute and inserting it within the physique tag.  I may have disregarded the worth “repair” however this can assist me keep in mind what it’s for in a while.  Then I’m inserting “physique[yahoo] ” earlier than every declaration which now permits me to entry common selectors.

Every of the suggestions above will work in each Yahoo! Basic and Yahoo! Mail.