電子郵件模板 - 針對特定的電子郵件客戶端 (gmail)

Question

我正在構建一個電子郵件模板，我想知道是否可以將特定電子郵件客戶端（例如 Gmail）定位為僅在使用這些特定客戶端查看電子郵件時才顯示內容。

例如，有沒有辦法只顯示在 gmail 中查看的電子郵件？

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

謝謝！

Answer 1

目前可以定位 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 客戶端。 因此，原始模板中的div將僅顯示在這些客戶端中。

Answer 2

不，不幸的是，無論如何都不能只針對 gmail 客戶端，就像您可以使用<!--[if gte mso 9]>為 Microsoft 做的那樣。

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 webmail，我們利用它向我們在 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”並使用顯示：無； 隱藏內容，使其不可點擊，從站點隱藏，不占用空間並且不被屏幕閱讀器看到。 添加圍繞此 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>

雅虎和美國在線

雅虎和 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>

這些技巧是在這個很棒的博客中找到的，關於如何隱藏某些特定電子郵件提供商的元素，如 Outlook、gmail、雅虎。

電子郵件模板 - 針對特定的電子郵件客戶端 (gmail)

問題描述

3 個解決方案

解決方案1
2 2017-08-17 16:22:16

解決方案2
1 2016-02-11 08:21:33

解決方案3
0 2021-06-10 08:36:27

電子郵件模板 - 針對特定的電子郵件客戶端 (gmail)

問題描述

3 個解決方案

解決方案1 2 2017-08-17 16:22:16

解決方案2 1 2016-02-11 08:21:33

解決方案3 0 2021-06-10 08:36:27

解決方案1
2 2017-08-17 16:22:16

解決方案2
1 2016-02-11 08:21:33

解決方案3
0 2021-06-10 08:36:27