如何为 Outlook 网络邮件应用条件内容

Question

所以我创建了一个交互式 html 电子邮件，但由于某种原因 outlook.com 忽略了条件内容。当我将条件内容添加到电子邮件中时，电子邮件会在 Apple 邮件中中断。基本上电子邮件应该淡入淡出并且下雪并且它工作得很好并且其他 outlook 只呈现常规电子邮件 fin，但是 outlook.com 不会加载淡入内容并且如果你添加条件它不会淡入在苹果邮件上。这是我试过的

[class=".x_showlater"]{opacity:1;}

但是这会导致 apple mail 将不透明度设置为 1 以显示稍后 outlook.com 仍然不会将不透明度显示为 1。我也尝试使用

<!--[if mso]> <![endif]-->

和设置 opacity:1!重要；但它也在苹果邮件中这样做。我还尝试将整个交互部分包装在   中，但 outlook.com 仍然读取代码。

<style>
  @media screen and (-webkit-min-device-pixel-ratio:0),
  (-ms-high-contrast: none), (-ms-high-contrast: active){
    .ball-shadow{
      animation: shadow 2s forwards;
      display:block!important;
      max-height:none!important;
      position:relative;
    }
    .ball{
      z-index:100;
      animation: drop 2s forwards;
      position:relative;
    }
  [class=".x_showlater"]{
opacity:1;}

    .showlater,.showlater2{
opacity:0;

   
      animation: showlater 0.5s 2s forwards;
    }
    .showlater2{
      animation-delay: 5.2s;
    }
  }
  @keyframes drop{
    0%{
      opacity:0;
    }
    25%{
      opacity:0;
      transform:translateY(-30px);
    }
    80%{
      opacity:0.9;
    }
    100%{
      opacity:1;
      transform:translateY(30px);
    }
  }
  @keyframes shadow{
    0%{
      opacity:0;
    }
    40%{
      opacity:0;
      transform: scale(0.8);
    }
    100%{  opacity:1;
      transform: scale(1);
    }
  }
  @keyframes showlater{
    from{opacity:0;}
    to{opacity:1;}
  }
</style>
<style>
@media screen and (-webkit-min-device-pixel-ratio: 0) {
 .snowcontainer{
  position:relative;
  width:100%;
  overflow:visible;
 }
 
.fallingSnow {
    text-align: center;
}
.fallingSnow span {
    display: inline-block;

    width: 20px;
    height: 21px;
 margin: -280px 60px 54px  -34px;
 background:url("https://i.imgur.com/kMATQ2d.png");
    
    -webkit-animation: fallingSnow 12s infinite  cubic-bezier(0.35,0.45,0.39,0.29);
    -moz-animation: fallingSnow 12s infinite  cubic-bezier(0.35,0.45,0.39,0.29);
}
.fallingSnow span:nth-child(5n+5) {

    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.fallingSnow span:nth-child(3n+2) {

    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.fallingSnow span:nth-child(2n+5) {

    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}

.fallingSnow span:nth-child(3n+10) {

    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.fallingSnow span:nth-child(7n+2) {

    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.fallingSnow span:nth-child(4n+5) {

    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.fallingSnow span:nth-child(3n+7) {

    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
@-webkit-keyframes fallingSnow {
  0% {
    opacity: 1;

 -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;

 -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;

 -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
@-moz-keyframes fallingSnow {
  0% {
    opacity: 1;
    
 -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;
   
 -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;
    
 -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
</style>

<div class="containerSnow" style="height: 100%;">
 <div class="fallingSnow showlater">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
 
 
 </div>

  <table class="gmail-fix" width="100%" bgcolor=”#FFFFFF” style=" min-width:320px;" cellspacing="0" cellpadding="0">
   <tbody><tr>
    <td>
     <table class="w-100p" width="650" align="center" style="max-width:650px; margin:0 auto;" cellpadding="0" cellspacing="0">
      <!-- header -->
      <tbody><tr>
       <td class="p-15 showlater"  style="padding:9px 38px 26px; border-bottom:3px solid #00aeef;">
        <a style="text-decoration:none;" href="#">
         <img src="#" width="230" style="width:230px; font:14px/18px Arial, Helvetica, sans-serif; color:#00acee; vertical-align:top;" alt="Circle">
        </a>
       </td>
      </tr>
      <!-- content -->
      <!-- block -->
      <tr>
       <td class="ptb-30"  class="container" style="padding:41px 15px 52px;">
        <table class="w-100p" width="560" align="center" style="max-width:560px; margin:0 auto;" cellpadding="0" cellspacing="0">
         <tbody><tr>
          <td style="padding:0 0 30px; font:16px/24px Helvetica, Arial, sans-serif; color:#000;"><center>
<table>
 <tbody>
  <tr>
   <td>
    <div><a href="#"><img border="0" img="" style="display: block; margin: 0  auto; height: auto; width: 554px; max-width: 100%;" src="#" alt="alt"></a></div>
    <div class="ball-shadow">
    <a href="#"><img border="0" img="" style="display: block; margin: 0  auto; height: auto; width: 554px; max-width: 100%;" src="#" alt="alt"></a></div>
<!--[if gte mso 9]>
<br />
<![endif]-->

<br>
<div class="ball-shadow">
    <center><a href="#"><img border="0" width="362" img="" style="display: block; margin: 0  auto; height: auto;  width: 100%; max-width: 362px;" src="#" alt="alt"></a></center></div>
</td>
</tr>
</tbody>
</table>
</center>
<div class="showlater">
<br>
Hi,
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut eros non massa malesuada cursus quis et purus. Proin eget dui efficitur, accumsan purus in, condimentum sapien. Aenean nec maximus tortor. Proin massa urna, euismod sit amet risus a, condimentum pellentesque ex. Mauris tincidunt turpis vel ex egestas egestas. Nunc maximus venenatis volutpat. Integer ultricies malesuada metus ut varius. Phasellus in dui tortor. In molestie sodales massa nec lobortis. Sed mattis ex non nunc consectetur, et porta dolor fringilla. Nam orci magna, lacinia vitae efficitur vel, facilisis ut sem. Vestibulum dictum ullamcorper urna sit amet blandit. Etiam at sollicitudin leo. In et orci nec sapien semper sagittis. Nulla facilisi. Etiam nec sem tincidunt, finibus quam nec, egestas neque.

</div>

Answer 1

opacity 适用于 Outlook.com，但不适用于大多数版本的 Outlook。

https://www.campaignmonitor.com/css/positioning-display/opacity/

z-index 不适用于大多数版本的 Outlook 和大多数电子邮件客户端。

https://www.campaignmonitor.com/css/positioning-display/z-index/

animation 不适用于大多数电子邮件客户端。

https://www.campaignmonitor.com/css/animations/animation/

如果一切对您有用，那就太好了。如果您想接触更多的 Outlook 受众，我可能建议寻找替代方案。

祝你好运。

Answer 2

所以，我终于想通了。

[class~="x_showlaterout"], [class~="x_showlater2out"]{   /* work around for outlook.com */
                    opacity:1 !important;
            }

您需要创建这样的 class 样式 [class~="x_classname"]{outlook.com specific code }，因为 outlook.com 会自动更改任何 class 以包含 x_。在你这样做之后，你将 class 添加到你想要影响的元素，但没有 x_。所以在这种情况下，它将是 showlaterout 和 showlater2out。这让你有你想要的效果，但是当用户在 outlook.com 上打开它时，它会将 class 更改为 x_showlater2out 和 x_showlaterout，这将应用你创建的样式因为 classes 现在匹配

如何为 Outlook 网络邮件应用条件内容

How to apply Conditional content for Outlook webmail

html

css

outlook

html-email