HTML 电子邮件:!mso 条件技巧

Wei*_*ime 4 html html-email conditional-statements

我对 HTML 电子邮件开发还比较陌生,我正在尝试通过剖析“reallygoodemails.com”上的 HTML 电子邮件来提高对 HTML 电子邮件结构的理解。

在我的尝试中,我遇到了四种不同的方法来为非 Microsoft Outlook 的电子邮件平台创建条件后备。

版本 1。

<!--[if !mso]><!-->
  <style>
    .innerTable{
      border: 1px solid black;
    }
  </style>
<![endif]-->
Run Code Online (Sandbox Code Playgroud)

版本 2。

<!--[if !mso]><!---->
  <style>
    .innerTable{
      border: 1px solid black;
    }
  </style>
<![endif]-->
Run Code Online (Sandbox Code Playgroud)

版本 3。

<!--[if !mso]><!---->
  <style>
    .innerTable{
      border: 1px solid black;
    }
  </style>
<!--<![endif]-->
Run Code Online (Sandbox Code Playgroud)

版本 4。

<!--[if !mso]>-->
  <style>
    .innerTable{
      border: 1px solid black;
    }
  </style>
<!--<![endif]-->
Run Code Online (Sandbox Code Playgroud)

谁能告诉我应该使用哪个版本并解释为什么该特定版本实际上可以跨平台工作?例如,您选择的后备语法如何欺骗 MSO 忽略代码?

小智 19

条件注释是 Microsoft 在 Internet Explorer(直到 IE9)和 Word\xe2\x80\x99s 渲染引擎(Outlook 2007 及更高版本使用)中实现的机制。这个想法是通过常规 HTML 注释隐藏渲染引擎的内容,以便其他渲染引擎不会看到它。我\xe2\x80\x99m 将详细介绍我使用的语法,然后我将回到您观察到的语法之间的差异。

\n

这里\xe2\x80\x99是我用来隐藏 Outlook 内容的语法:

\n
<!--[if !mso]><!-->\n<style>\n    .innerTable{\n        border: 1px solid black;\n    }\n</style>\n<!--<![endif]-->\n
Run Code Online (Sandbox Code Playgroud)\n

让\xe2\x80\x99s一步步打破这个,看看Outlook和其他渲染引擎会如何解释这个。

\n
    \n
  1. <!--:这是 HTML 注释的开头。每个渲染引擎都期望接下来的内容成为注释的一部分,并且不会将其显示在屏幕上。
  2. \n
  3. [if !mso]>:这是支持条件注释的渲染引擎(IE、Outlook)的条件。其他渲染引擎和浏览器只会将其视为纯文本,即注释的一部分。但 IE 和 Outlook 会评估该条件。这里的条件是!mso不是 mso)。Outlook 会看到这个并认为 \xe2\x80\x9c好吧,我是 mso!I\xe2\x80\x99d 宁愿忽略后面的所有内容,直到找到 [endif] 语句。\xe2\x80\x9d
  4. \n
  5. <!-->:这将关闭在步骤 1 中打开的 HTML 注释。Outlook 会忽略此注释,因为它\xe2\x80\x99 是内容的一部分!mso。但其他渲染引擎会理解这一点并认为 \xe2\x80\x9c好吧,这个评论结束了。最好准备好执行并显示接下来的\xe2\x80\x99s。\xe2\x80\x9d
  6. \n
  7. <style>\xe2\x80\xa6</style>:这是我们的 HTML 内容。它\xe2\x80\x99s 对 Outlook 来说是隐藏的,因为它\xe2\x80\x99s 仍然是 Outlook 的一部分。!mso。其他渲染引擎将正常渲染它。
  8. \n
  9. <!--:这是 HTML 注释的开头(再次)。
  10. \n
  11. <![endif]:这是支持条件注释的渲染引擎(IE、Outlook)的结束条件语句。Outlook 将对此进行评估并认为 \xe2\x80\x9c好的,条件时间结束。然后回去工作吧。\xe2\x80\x9d。其他渲染引擎和浏览器只会将其视为纯文本,即注释的一部分。
  12. \n
  13. -->:这是第 5 步中打开的 HTML 注释的结束。所有渲染引擎都会对此进行评估。
  14. \n
\n

现在您可能会想: \xe2\x80\x9c 为什么我们在第 3 步中使用<!-->而不仅仅是-->?\xe2\x80\x9d 考虑到其他支持条件注释的渲染引擎,这是一个很好的技巧(例如 Internet Explorer)。IE 会看到!mso条件并认为 \xe2\x80\x9c好吧,我当然不是 mso。让\xe2\x80\x99s 看看接下来我会做什么\xe2\x80\x99s!\xe2\x80\x9d 如果我们只有一个结束 HTML 注释 ( -->),IE 会吓坏了,因为 \xe2\x80\x99d 看到一个结束而没有开头。所以\xe2\x80\x99就是技巧:<!-->同时打开和关闭 HTML 注释。我们也可以这样写<!-- --><!----->(正如您在版本 23中注意到的那样)中注意到的那样)。

\n

至于你发布的其他版本之间的区别,版本12仅使用<![endif]-->作结束语。这对于 Outlook 来说是正确的,但对于任何其他渲染引擎来说都是不正确的。幸运的是,他们无论如何都会将其呈现为 HTML 注释。所以它最终可以正常工作,但它以标准方式无效。

\n

因此,我的建议是始终使用以下语法来隐藏Outlook中的内容:

\n
<!--[if !mso]><!-->\n\xe2\x80\xa6\n<!--<![endif]-->\n
Run Code Online (Sandbox Code Playgroud)\n

如果您只需要在Outlooks上显示内容上显示内容:

\n
<!--[if mso]>\n<![endif]-->\n
Run Code Online (Sandbox Code Playgroud)\n

其他可能有用的资源:

\n\n

  • 这是迄今为止我在 StackOverflow 上提出的问题得到的最好答案。感谢您花时间写它! (3认同)
  • 谢谢 Rémi 如此全面且有用的答案 (2认同)