我正在构建一个电子邮件模板，我想知道是否可以针对特定电子邮件客户端（例如 Gmail）仅在使用这些特定客户端查看电子邮件时显示内容。
例如，有没有办法只显示在 gmail 中查看的电子邮件？
<div class="gmailOnly">This text will be displayed in Gmail only</div>
谢谢！
【问题讨论】：
标签： html email gmail html-email gmail-contextual-gadgets
目前可以定位 Gmail 和 Inbox。您需要利用这样一个事实，即 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> 标记特定于 Inbox 和 Gmail 客户端。因此，原始模板中的divs 只会在这些客户端中显示。
【讨论】：
不，不幸的是，无论如何都不会只针对 gmail 客户端，就像您可以为 Microsoft 使用 <!--[if gte mso 9]> 一样。
【讨论】：
Outlook 应用程序（iOS/Android）
要从 Outlook 应用程序中隐藏元素，我们可以使用以下 CSS 的 sn-p。属性 [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 网络邮件，我们利用了它将 x_ 添加到我们在 HTML 中使用的所有类的方式。 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 sn-p 一起定位。 .& 类添加了一个包装 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、雅虎）的元素。
【讨论】：