Email 客戶端之 CSS 支援問題

活到老學到老,今天又學到新知 - 雖然顯示 HTML 格式已是當今 Email 軟體或線上信箱的必要條件,但許多被視為基本的 CSS 功能卻不一定在支援範圍內。

用以下範例展示,我設計一段 HTML 當作 Email 內文。先將 .dynamic 設成 display: none,再指定 .mode-1 .dynamic.mode-1 及 .mode-2 .dynamic.mode-2 為 display: inline,如此在容器加 class="mode-1" 或 class="mode-2" 可切換顯示不同區塊內容;下方 <div> 則示範 overflow: hidden 效果。

<style>
	.dynamic { display: none; }
	.mode-1 .dynamic.mode-1 { display: inline; }
	.mode-2 .dynamic.mode-2 { display: inline; }
</style>
<div class="mode-1">
	<span class="dynamic mode-1">Show on Mode 1</span>
	<span class="dynamic mode-2">Show on Mode 2</span>
</div>
<div style="width:200px;overflow:hidden;border:1px solid red;">
	<div style="width:480px;background-color:yellow;">
		Overflow Hidden Test
	</div>
</div>

裡面用到的都是很基本的 CSS 技巧,感覺不應會有問題。不過,當成信件內文寄到 Outlook 卻面目全非。mode-1 / mode-2 切換文字沒出現,設了寬度及 overflow: hidden 的 <div> 被內層 <div> 撐開。

Outlook 介面上有個「如果這個訊息的顯示有任何問題,請按一下這裡,在瀏覽器中檢視。」,點選改用 IE 開啟,這才呈現它應有的樣貌。

由此我學到一件事,Outlook 雖然支援 HTML 格式,但只支援部分的 CSS 功能!

基於安全考量不允許 JavaScript 我能理解,但不支援一些很基本的 CSS 倒在意料之外(猜想是為了簡化程式複雜度及效能考量)。

爬文找到一個很棒的參考資源: Email Client CSS Support - Email Design Reference

其中整理 Gmail、Outlook.com、Yahoo! Mail、Outlook、Apple Mail、iOS、Android 等各家 Email 客戶端對各式 CSS 特性的支援程度,大家在設計 Email HTML 記得參考,以免信件內容在客戶端走針而不自知。

歡迎推文分享:
Published 21 May 2018 10:30 PM 由 Jeffrey
Filed under:
Views: 3,821



意見

# soarlin said on 21 May, 2018 11:03 PM

EDM 的 CSS 應該是我覺得最難寫的,沒有之一了

最保險的做法,還是都使用 CSS 2.0 的語法,用 table 排版,使用 inline style 來寫 CSS,因為 gmail 也不支援使用 Internal style sheet 的方式

後來是去找 mjml 這套 email 樣版引擎來寫 email 的 html + css

( https://mjml.io/ )

# Jeffrey said on 22 May, 2018 12:01 AM

to soarlin, 感謝! 已筆記。

# Johnny Li said on 22 May, 2018 09:46 PM

推 1F 提到的 mjml,想當初因公司需求需要手刻 email html+css,處理 client 支援度問題還有 RWD 搞到吐血,且只能用古早時代的 table 切版 code 看起來就很慘烈,後來用 react 寫成的 mjml 加上它專門的 IDE 才發現世界的美好

# Jeffrey said on 23 May, 2018 01:31 AM

to Johnny Li,感謝分享經驗,再筆記(這回用紅筆+粗體)。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<May 2018>
SunMonTueWedThuFriSat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication