Question

我正在构建一个电子邮件模板，我想知道是否可以定位特定的电子邮件客户端（例如Gmail），只有在使用这些特定客户端查看电子邮件时才能显示内容。

例如，有没有办法只将这个显示在gmail中查看的电子邮件中？

<div class="gmailOnly">This text will be displayed in Gmail only</div>

谢谢！

Answer 1

不，遗憾的是，无论如何都无法定位gmail客户端，就像你可以使用<!--[if gte mso 9]>来解决微软问题一样。

Answer 2

目前可以定位Gmail和收件箱。您需要利用HTML在它到达渲染引擎之前被修改的事实（如在大多数电子邮件客户端中），并且在这些电子邮件客户端中，邮件正文将以<u></u>标记开头。这样：

   <!DOCTYPE html>
    <html><head>
    <style>
        u + .body .gmail{
            display:block !important;
        }
    </style>
    </head>
    <body class="body">
      <div class="gmail" style="display:none;">
        THIS IS GMAIL OR INBOX
      </div>
    </html>

将转换为：

    <u></u>    
    <div class="m_-4764228206553811341body">
      <div class="m_-4764228206553811341gmail" style="display:none">
        THIS IS GMAIL OR INBOX
      </div>
      <div class="yj6qo"></div>
      <div class="adL"></div>
    </div>

<u>代码专用于收件箱和Gmail客户端。因此，原始模板中的div只会显示在这些客户端中。

Answer 3

Outlook 应用（iOS/Android）

要从 Outlook 应用程序隐藏元素，我们可以使用以下 CSS 片段。属性 [data-outlook-cycle] 被添加到这些应用程序中所有电子邮件的元素中。然后我们可以使用一个类来定位元素，例如下面示例中的 .outlookhide：

<head>
<style>
body[data-outlook-cycle] .outlookhide {display:none!important;}
</style>
</head>
<body>
<table>
<tr>
<td class="outlookhide">Content hidden from Outlook app on Android and iOS</td>
</tr>
</table>
</body>

Outlook Webmail (outlook.com)

为了定位 Outlook 网络邮件，我们利用它向我们在 HTML 中使用的所有类添加 x_ 的方式。 CSS target 属性可用于通过添加运算符 ~ 来定位包含 x_[your class] 的任何类。在下面的示例中，我们使用类“hideoutlookweb”。

<head>
<style>
[class~="x_hideoutlookweb"] {display:none!important;}
</style>
</head>
<body>
<table>
<tr>
<td class="hideoutlookweb">Content hidden from Outlook.com</td>
</tr>
</table>
</body>

还有其他几种方法可以隐藏在 Outlook 中：

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

您还可以将特定版本的 Outlook 定位为：

<!--[if gte mso 9]>
CONTENT (versions greater or equal to mso 9)
<!--<![endif]-->

要从 Outlook 桌面或 Windows 邮件（不是 Web 或移动应用程序）中隐藏，还有以下方法：

<span style="mso-element:field-begin;"></span>
 Content to hide from Outlook 
<span style="mso-element:field-end;"></span>

Gmail

隐藏 Gmail 中的内容 – 此 CSS 之所以起作用，是因为 Gmail 将标签转换为这样，将 class=”body” 添加到您的标签中，然后使用类定位要从 Gmail 中隐藏的元素，在下面的示例中称为“nogmail” ”并使用 display:none;隐藏内容，使其不可点击，从站点隐藏，不占用空间并且不被屏幕阅读器看到。添加围绕此 CSS 的媒体查询可以选择仅在移动屏幕上隐藏内容。

<!DOCTYPE html>
<head>
<style>
u + .body .nogmail {display:none!important;}
</style>
</head>
<body class="body">
<table>
<tr>
<td class="nogmail">Content hidden from Gmail</td>
</tr>
</table>
</body>
</html>

雅虎和美国在线

Yahoo 和 AOL 最近开始使用相同的渲染引擎，因此可以使用以下 CSS 代码段一起定位。一个包装 div 与类 .& 一起添加，因此我们可以通过将类链接在一起来定位特定元素：

<head>
<style>
.& .yahooaol {display:none!important;}
</style>
</head>
<body>
<table>
<tr>
<td class="yahooaol">Content hidden from Yahoo and AOL</td>
</tr>
</table>
</body>

要仅定位 Yahoo，您可以在带有 unicode id 名称的元素周围添加一个 div - aol 去除该样式，因此它只会影响 Yahoo。

<head>
<style>
  .& #★ .hideyahoo {display:none!important;}
</style>
</head>
<body>
<table>
<tr>
<div id="★">
<td class="hideyahoo">Content hidden from Yahoo only</td>
  </div>
</tr>
</table>
</body>

这些技巧是在这篇很棒的 blog 中找到的，关于如何为 Outlook、gmail、yahoo 等特定电子邮件提供商隐藏元素。

电子邮件模板 - 目标特定电子邮件客户端（gmail）

3 个答案: