Gmail 現在支持顯示：無；：這對您的電子郵件設計意味著什麼

已發表: 2016-09-01

Gmail 是電子郵件開發人員的許多頭疼問題。 它缺乏對許多 CSS 屬性的支持——包括缺乏對電子郵件<head>中的<style>標籤的支持——引起了全世界電子郵件開發人員的集體感嘆。 編寫電子郵件很難，尤其是對於 Gmail。

但在 2016 年 8 月 31 日，世界各地的電子郵件極客注意到 Gmail 發生了重大變化。 開始支持 CSS 屬性display: none; .

什麼是顯示：無； ?

display:none; 是隱藏電子郵件特定元素的 CSS 屬性。 例如， display:none; 可用於隱藏您想用來控制收件箱中顯示哪些預覽文本但您不希望在電子郵件正文中顯示的預標題文本。 或者，它可用於控制您希望在訂閱者在移動設備上打開時隱藏的特定於桌面的內容。

試試石蕊

在 Gmail 中預覽您的電子郵件

了解 Gmail 中的變化如何影響您的設計。 使用 Litmus 在 Gmail 和 50 多個其他電子郵件客戶端中即時預覽您的電子郵件。

免費試用 Litmus →

但是，Gmail 不支持使用display:none; 在過去，在電子郵件社區中引起了很多挫折。

過去，為了使 Gmail 電子郵件正文中的預標題文本消失，電子郵件設計人員必須使用以下解決方法之一：

  • <div style=”max-height: 0px; overflow: hidden;”></div>
  • <div style=”width: 0px; height: 0px; max-width: 0px; max-height: 0px; overflow: hidden;”></div>
  • <img style=”width: 0px; height: 0px;” />

為可能不支持這些 CSS 屬性的其他客戶端設置這些變通方法並覆蓋樣式變得非常耗時，有時會增加您的開發和測試時間。

現在，事情似乎發生了變化——這可能是今年電子郵件設計師的最大新聞。

Gmail 現在支持 display:none;

正如一些細心的電子郵件愛好者本週發現的那樣，Gmail 支持使用display:none; 在我們測試過的所有重要 HTML 元素上，包括：

  • <div>
  • <img>
  • <a>
  • <table>
  • <input>

親眼所見不信？ 我們也沒有。 因此，這裡有一個帶有屏幕截圖的代碼示例供您查看：

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Gmail display: none;</title> <style> @media screen and (max-width: 2000px) { * [summary~="hide"] {display:none;} } </style> </head> <body> <div>I will not show</div> <div class="hide" summary="hide">I will not show in Gmail.com webmail accounts</div> <a href="https://litmus.com">I will not show</a> <img src="http://pages.litmus.com/l/31032/2015-06-30/3kn7qh/31032/63832/litmus_logo_white.png" width="130" height="48"> <table> <tr> <td>I will not show</td> </tr> </table> <input type="checkbox"> </body> </html>

此更改已推廣到整個客戶端系列，包括 Gmail、Google Apps 和 Inbox by Gmail。

顯示：無； Gmail 中的支持

檢查綠色

Gmail（Chrome/Firefox/Explorer 中的@gmail.com 地址）

檢查綠色

Google Apps (Chrome/Firefox/Explorer)

檢查綠色

Gmail 收件箱（Chrome + Firefox）

檢查綠色

Gmail 收件箱（iOS/Android）

檢查綠色

Gmail 應用程序（iOS/Android）

沒有改變的是 Gmail 仍然缺乏對 CSS 類或 ID 的支持，這意味著您仍然需要內聯任何 CSS 並移動所有樣式信息——包括display:none; 屬性 - 放入您的 HTML 電子郵件正文中。

其他含義

與電子郵件客戶端中 CSS 支持的任何更改一樣， display:none;的支持display:none; 在 Gmail 中有幾個有趣的影響：

控制 Gmail iOS 應用的字體縮放

在 Gmail 應用程序的 iOS 版本上，自動字體縮放是一個真正的問題。 字體大小會被放大，導致電子郵件在應用程序中看起來很糟糕。 引入了一個 hack 來阻止這種情況的發生：

 <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>

作為display:none; 現在 Gmail 支持（包括 iOS 應用程序）這個 hack 不再有效，再次破壞數百封電子郵件！ 有一個修復方法——只需移除或移動display:none; 從你的內聯 CSS 到嵌入式 CSS。 來自 Fresh Inbox 的 Justin Khoo 在這裡寫到了這個修復。

使用屬性選擇器 hack 隱藏元素（包括媒體查詢！）

雖然 Gmail 通常不支持<head> CSS，但一些 CSS 選擇器確實有效，特別是僅用於 @gmail.com 地址的 lang 和 summary 。 例如：

 * [summary~="foo"]{ {display:none;} }

這可用於定位 HTML 中也適用於 Gmail 的元素：

 <div summary=”foo”>I will not display (even in Gmail)</div>

現在 Gmail 支持display:none; ，您可以將其與媒體查詢結合使用以隱藏 Gmail 網絡郵件中的內容：

 @media screen and (max-width: 600px) { * [summary~="hide"] {display:none;} } <div summary=”hide”>I will not display when width is 600px or below</div>

關於在不修復 Gmail 的情況下如何處理的想法

既然您將花費更少的時間來開發和排除電子郵件故障，那麼您將如何利用現在可用的所有空閒時間？ 以下是一些建議：

  • 保持你的手指交叉，這個變化是永久性的
    有時，收件箱提供商會測試對其渲染引擎的更改，但可以隨時回滾更改。 讓我們希望他們永遠不會拿走這個。 為什麼不向他們發推文，讓他們知道我們有多欣賞這種變化？
  • 加載 Litmus 的片段庫
    使用所有新display:none; Gmail 黑客。
  • 讀一本書
    不過，如果它是關於電子郵件的，那也沒關係。 這是我們的建議。
  • 測試，測試，再測試一些
    繼續測試您發送的每封電子郵件，因為電子郵件客戶端將來會繼續推出此類未宣布的更改。

在 Gmail 中預覽您的電子郵件

這些變化如何影響您的電子郵件設計？ 使用 Litmus 在 Gmail 和 50 多個其他電子郵件客戶端中即時預覽您的電子郵件，以確保您的設計按預期顯示。

Gmail 的此更新是電子郵件客戶端如何在不通知電子郵件社區的情況下進行支持更改的主要示例。 始終確保您將最好的電子郵件放在首位。 在每次發送之前測試每封電子郵件。

免費試用 Litmus →