編碼HTML電子郵件的基本技巧和技巧

HTML郵件編碼的挑戰：應對不同郵件客戶端的特性與局限

HTML郵件編碼最棘手的問題在於每個郵件客戶端都有其獨特的特性和局限。這些差異通常源於客戶端出於善意而添加的功能，例如自動將純文本網站地址轉換為可點擊鏈接，但卻給郵件開髮帶來了複雜性。此外，安全問題也至關重要。郵件客戶端需要確保郵件的HTML和CSS不會干擾其自身界面的HTML和CSS。惡意郵件可能會利用某些CSS屬性（如絕對定位）誘導用戶點擊隱藏的鏈接。因此，郵件客戶端應該解析、過濾和操作HTML郵件代碼，但這意味著我們作為郵件開發者必須意識到這一點，並使我們的代碼盡可能地對它們友好。

本文節選自SitePoint Premium上的《Crafting HTML Email》，總結了HTML郵件開發中一些重要的技巧和竅門。

關鍵要點

• 客戶端特定差異： 由於每個郵件客戶端都有其獨特的特性和局限，HTML郵件編碼極具挑戰性。這些差異通常源於諸如自動將文本轉換為可點擊鏈接等功能，但卻會使郵件開發過程複雜化。
• Outlook的獨特渲染引擎： 相當一部分郵件市場份額由Outlook佔據，它使用Word作為HTML和CSS渲染引擎。這要求採用特定的編碼方法來確保郵件在Outlook中正確顯示，包括理解Word渲染的局限性和功能。
• 適應安全措施和样式限制： 郵件客戶端實施各種安全措施以防止HTML和CSS干擾其界面，這可能導致某些CSS屬性被修改或過濾。這需要一種謹慎且知情的HTML郵件編碼和样式方法，以確保跨不同客戶端的兼容性。

支持Outlook

根據郵件分析工具Litmus的數據，2022年1月，Outlook（Windows和macOS版本）佔據了4.44%的郵件客戶端市場份額。這看起來可能不多，並且記住要謹慎對待郵件分析數據，但您很有可能在郵件開發過程中遇到Windows版本的Outlook。

以下是在Windows版本的Outlook中使您的HTML郵件無縫運行所需了解的內容。

Outlook渲染引擎的工作原理

自2007年以來，Windows版本的Outlook一直使用Word作為HTML和CSS的渲染引擎。微軟在2009年解釋了使用Word的原因：

我們決定繼續使用Word來創建電子郵件，因為我們相信這是最好的電子郵件創作體驗，它擁有Word用戶25多年來一直享用的豐富工具。

Word不僅不擅長渲染HTML和CSS，而且這方面的文檔也極其匱乏。關於Word渲染的唯一現有官方文檔是微軟在2006年發布的一篇博文，解釋了Outlook 2007中HTML和CSS的渲染能力。

其中包括以下信息：

• CORE： 顏色、背景顏色、文本屬性（字體、字體系列、字體樣式、字體大小、字體粗細、文本修飾、文本對齊、垂直對齊、字母間距、行高、空白） 、邊框簡寫屬性（邊框、邊框顏色、邊框樣式、邊框寬度、邊框塌陷）以及其他一些屬性。
• COREEXTENDED： 文本縮進和邊距屬性（邊距、左邊距、右邊距、上邊距、下邊距）。
• FULL： 寬度、高度、填充（以及左填充、右填充、上填充、下填充）和邊框完整屬性（左邊框、左邊框顏色、左邊框寬度、左邊框樣式，等等）。

並且每個類別僅適用於某些HTML元素：

1. <span></span> 和 <font></font> 僅支持CORE屬性。
2. <div> 和 <code><code><p></p> 支持CORE和COREEXTENDED屬性。
3. Outlook支持的所有其他元素（如<table>、<code><td>、<code><tr>、<code><th>、<code><tbody>、<code><tfoot>、<code><thead>等等）都支持CORE、COREEXTENDED和FULL屬性。 <p>這意味著我們必須考慮使用哪個元素來應用特定的樣式。因此，如果我們必須在通用容器元素上定義寬度或高度，我們將使用<code><table>。如果我們需要填充，我們也使用<code><table>和<code><td>。直到今天，Windows版本的Outlook仍然是我們仍在HTML電子郵件中使用表格的唯一原因。幸運的是，有一些方法可以只使這些表格對Outlook可見，對功能更強大的郵件客戶端隱藏它們，並允許我們使用更語義化的代碼。 <p><strong>(以下內容因篇幅限制，僅保留部分關鍵技術點概述，完整內容請參考原文)</strong></p> <ul> <li> <strong>條件註釋:</strong> 利用條件註釋針對Outlook進行特定代碼的添加。 </li> <li> <strong>mso-屬性:</strong> 使用Outlook專有的CSS屬性（以<code>mso-為前綴）來實現特定樣式。
4. VML: 使用VML（矢量標記語言）來模擬Outlook不支持的屬性，例如背景圖片。
5. 120dpi渲染: 解決Outlook在某些Windows配置下應用DPI縮放導致的顯示問題。
6. 避免自動鏈接: 使用多種方法避免郵件客戶端自動將URL、郵箱地址等轉換為鏈接。
7. 使用真實URL: 避免在<a></a>元素的href屬性中使用非URL文本。
8. 添加空: 解決Yahoo Mail on Android移除元素的問題。
9. 保持郵件大小低於102KB: 避免Gmail因郵件大小超過102KB而截斷郵件內容。
10. 移除CSS註釋: 避免Yahoo和AOL客戶端因CSS註釋導致的樣式失效問題。
11. 使用HTML5文檔類型: 處理HTML5文檔類型對<img alt="編碼HTML電子郵件的基本技巧和技巧" >元素行間距的影響。

結論

處理郵件客戶端的特性是郵件開發人員工作的一部分。關注郵件開發者社區，了解最新的更新和實踐非常重要。 通過報告我們觀察到的問題，郵件客戶端可以改進並修復其自身的代碼。雖然這是一個緩慢的過程，但我確實覺得HTML郵件正在走向一個更好的未來，具有更好的互操作性和標準支持。 這將為更多有趣和令人興奮的功能（例如交互性）打開大門！

請注意，由於原文篇幅過長，此輸出對部分技術細節進行了簡化和概括。 如需更詳細的信息，請參考原文。