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

Question

所以我创建了一个交互式 html 电子邮件，但由于某种原因，outlook.com 忽略了条件内容。当我将条件内容添加到电子邮件时，电子邮件会在苹果邮件中中断。基本上，假设电子邮件会淡入并有降雪，它可以完美运行，而其他 Outlook 仅呈现常规电子邮件鳍，但 Outlook.com 不会加载淡入内容，如果您添加条件，它不会在苹果上淡入邮件。这是我试过的

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

但这会导致苹果邮件将不透明度设置为 1 以供 showlater 和outlook.com 仍然不显示不透明度为 1。我也尝试使用

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

并设置 opacity:1!important;但它也在苹果邮件中这样做。我还尝试将整个交互部分包含在 <!--[if !mso]> <!----> <!-- <![endif]--> 中，但 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~="x_classname"]{outlook.com specific code } 的类样式，因为 Outlook.com 会自动更改任何类以包含 x_。完成此操作后，将类添加到要影响但没有x_ 的元素。所以在这种情况下，它将是showlaterout 和showlater2out。这可以让您获得想要的效果，但是当用户在 outlook.com 上打开它时，它会将类更改为 x_showlater2out 和 x_showlaterout，这将应用您创建的样式，因为类现在匹配