Is there a way to target Windows Mail 10 and 11 without affecting the Outlook desktop?
P粉722409996
P粉722409996 2024-03-27 12:55:14
0
1
545

I have a code hack that preserves white text on a black background in most dark mode clients except Windows Mail 10 and 11.

<!--[if mso 16]> Conditional statements work on Outlook (OL 365, OL 2021) desktop but do not display correctly in Windows Mail 10 and 11. Windows Mail likes the css used in <! --[if !mso 16]> conditional blocks. Are there mso condition codes specifically for Windows Mail 10 and 11?

Is there another way to apply styles to separate Outlook (OL Office 365 Dark, Outlook 2021 Dark) and Windows Mail?

<!--[if gte mso 16]>
  
    <style>
  
    .keep-white {
mso-style-textfill-type:gradient;
mso-style-textfill-fill-gradientfill-stoplist:"0 #FFFFFF 0 100000\,100000 #FFFFFF 0 100000";
color:#000000 !important;
}   

    </style>  
    
<![endif]-->
<style>
  
u + .body .gmail-screen { background:#000; mix-blend-mode:screen; }
u + .body .gmail-difference { background:#000; mix-blend-mode:difference; }
</style>
<!--[if (gte mso 9)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" border="0" style="width:640px;background-color:#000000;" role="presentation">
<tr>
<td align="center">
<![endif]-->

    <table role="presentation" style="width:100%;max-width:640px;Margin:0 auto;" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center">
      <tr>
       <td class="body" style="background: linear-gradient(to bottom, #000000 0%, #000000 100%);max-width:640px;" width="100%" valign="top" align="center">
                 <!--[if gte mso 9]>
                 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;" fillcolor="#000000">
                 <v:fill type="gradient" color2="#000000"/>
                 <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                 <center>
                 <![endif]-->
        <table role="presentation" style="width:100%;max-width:640px;Margin:0 auto;" cellspacing="0" cellpadding="0" align="center">
             <tr>
              <td style="padding:40px 10px 40px;" align="center">
         <p style="padding:0;margin:0;font-family:'Open Sans',Helvetica, Arial,sans-serif;font-size:24px;line-height:34px;color:#ffffff;text-align:center;" class="txt16">
  <!--[if mso 16]><strong style="color:#ffffff;" class="keep-white"><![endif]-->      
  <!--[if !mso 16]><!-- --><strong style="font-weight:400;color:#ffffff;" class="gmail-screen"><span class="gmail-difference"><!--<![endif]--> 

Combo text hack. Works everywhere except Windows 10 &amp; 11 mail.

<!--[if mso 16]></strong><![endif]-->
<!--[if !mso 16]><!-- --></span></strong><!--<![endif]-->
        </p>
            </td>
           </tr>
       </table>
                 <!--[if gte mso 9]>
                 </center>
                 </v:textbox>
                 </v:rect>
                 <![endif]-->
        </td>
    </tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

I applied the <!--[if mso 16]> conditional statement for Outlook and Windows Mail 10 and 11, but found that Windows Mail dark mode handles css differently than Outlook dark mode.

P粉722409996
P粉722409996

reply all(1)
P粉208286791

Outlook Dark Mode

Dark Mode Meta Tag




Android/Outlook.com for dark mode


  

More information about Dark Mode can be found here:

https:// www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/

You can use one of two methods to locate Windows Mail:

/* Windows Mail (Phone & Surface) */
_:-ms-input-placeholder, :root .your-class-name {
  /* Replace this comment with your styles */
}

or

/* Windows Mail (Phone & Surface) */
_:-ms-fullscreen, :root .your-class-name {
  /* Replace this comment with your styles */
}

Both articles were submitted by Mark Robbins to https://howtotarget.email/.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template