Как применить условное содержимое для веб-почты Outlook - PullRequest
Новая
       7

Как применить условное содержимое для веб-почты Outlook

0 голосов
/ 08 января 2020

Итак, я создал интерактивное html электронное письмо, но по какой-то причине outlook.com игнорирует условный контент. Когда я добавляю условное содержимое к электронному письму, то оно разрывается в яблочном письме. По сути, предполагается, что электронная почта исчезает и выпадает снег, и она отлично работает, а другой внешний вид отображает только обычный почтовый плавник, но outlook.com не загружает контент с постепенным исчезновением, и если вы добавите его условно, он не исчезнет на яблоке. почта. Это то, что я пробовал 

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

Но это заставляет Apple Mail установить непрозрачность 1 для showlater, а outlook.com по-прежнему не показывает непрозрачность 1. Я также пытался использовать 

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

и настройка непрозрачности: 1! Важно; но тогда это также делает это в яблочной почте. Я также попытался обернуть всю интерактивную часть в <!--[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>

Ответы [ 2 ]

0 голосов
/ 09 января 2020

Итак, я наконец понял это. 

[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, который будет применять созданный вами стиль, потому что классы теперь соответствуют

0 голосов
/ 08 января 2020

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.

Удачи.

...