Target Yahoo! Mail Android using CSS Media Queries

Hiding styles in Yahoo! Mail Android is simple, you simply need to place these within the head.

If, however, you want to have styles that are only shown in Yahoo! Mail Android, then it gets a little more complicated, requiring a small workaround. You will need to place all the styles you want to only be shown in the Yahoo! Mail Android app within the body, straight after the first <body> tag, then overriding these styles in the head by adding a !important to those styles you wish to override.

If a style in the body already contains an !important, you can take advantage of CSS specificity rules, which have more specificity and weight.

For example, if you only want to show an element with the class .android in the Yahoo! Mail Android app, you can declare the element as visible in the body and then add a div in front of the .class by declaring it in the head, giving it more weight.

HTML


  <html>
    <head>
      <style type="text/css">
        @media screen yahoo {
         div .android{
           display:none!important;
         }
        }
      </style>
    </head>
    <body>
      <style type="text/css">
        @media screen yahoo {
         .android{
           display:block!important;
         }
       }
      </style>
    <div class="android" style="display:none;">Hello Yahoo! Mail Android!</div>
    </body>
  </html>

Leave a Reply

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