HTML电子邮件：备用mso有条件的吗？ [英] HTML Emails: fallback for mso conditional?

问题描述

如果你和我一样，那么读完这本书后你的眼睛就会抽搐。我们不责怪您。

我们的客户要求我们开发一个响应式HTML电子邮件模板，有两种规格：

1. 使用尽可能少的图片


2. 尽可能多地使用花哨的css功能。大多数情况下，这只是表示盒子上的圆角。

这个问题特别关于执行圆角。 Gmail和Apple支持CSS圆角，Outlook需要矢量图形。对于其余平台，它们可以使用方形边缘。

以下是我们如何检测和执行Outlook：

 <！ -  [if mso]>< v：shape> ...< / v：shape><！[endif]  - > 
  

像魅力一样，甚至回到Outlook 2000中。问题是，我无法弄清楚如何创建回退。直觉表示：

 <！ -  [if！mso]> ...<！[endif]  -  - > 
  

但大多数其他电子邮件客户端都会直接忽略它，这些盒子一起。我问你，SO社区的优秀成员：除了 MSO之外，是否可以为所有平台部署标记？也许有一种更聪明的方式来完成这个我没有考虑过的事情？或者说，电子邮件HTML仍然太过于石头化的尝试像这样？

解决方案

而不是：

 <！ -  [if mso]>< v：shape> ...< / v：形状>< ENDIF]  -  GT; 
 <！ -  [if！mso]> [后退到这里]<！[endif]  - > 
  

这个效果很好：

 <！ -  [if mso]> 
< v：shape> ...< / v：形状> 
< div style =width：0px; height：0px; overflow：hidden; display：none; visibility：hidden; mso-hide：all;> 
<！[endif]  - > 
 
 [后退到这里] 
 
 <！ -  [if mso]>< / div><！[endif]  - > 
  

它所做的只是将回退包装在MSO中的不可见div中，并部署矢量解决方案。

希望这有助于未来的人！

If you're like me, your eye will be twitching by the end of reading this. I don't blame you.

Our client has requested us to develop a responsive HTML email template, with two specifications:

1. Using as few images as possible
2. Using as many "fancy css-enabled features" as possible. Mostly, this just means rounded corners on boxes.

This question is specifically about executing the rounded corners. Gmail and Apple support CSS rounded corners, and Outlook requires vector graphics. For the remaining platforms, they're ok with using square edges.

Here's how we're detecting and executing outlook:

<!--[if mso]><v:shape>...</v:shape><![endif]-->

Works like a charm, even back to Outlook 2000. The problem is, I can't figure out how to create a fallback. Intuition says this:

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

but it just gets ignored outright as a comment by most other email clients, and then corners are missing from the boxes altogether. I ask you, fine members of the SO community: is it possible to deploy markup for all platforms except MSO? Perhaps there's a more clever way to accomplish this that I haven't considered? Or is email HTML still too stone-age to attempt something like this?

解决方案

Found a solution after much brain-wracking. Instead of this:

<!--[if mso]><v:shape>...</v:shape><![endif]-->
<!--[if !mso]>[fallback goes here]<![endif]-->

This works very well:

<!--[if mso]>
    <v:shape>...</v:shape>
    <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->

    [fallback goes here]

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

All it does is wrap the fallback in an invisible div in MSO, and deploys the vector solution instead.

Hope this helps someone in the future!

这篇关于HTML电子邮件：备用mso有条件的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！