脆弱的HTML郵件模板

Gao Li Jia｜發表於2019-03-01
HTML

在開展我們的專案時，在一些方面，如：註冊確認、營銷推廣等，都需要以給使用者發郵件的方式，進行溝通，但是我們編寫的HTML郵件，很多主流郵箱都會或多或少的過濾掉一些東西，所以就要考慮如何編寫才是能相容各種。

本文原創發表於所問資料HT前端團隊：ht.askingdata.com/article/5b9…

模板問題

  1. iframe為代表的模版不支援特殊標籤包括html5新特性：如：button、nav、footer，這些會被過濾掉。
  2. div為模板，不支援定義style類名的方式寫樣式，會被過濾掉
  3. 無法使用@media做自適應佈局
  4. 無法引入外聯樣式，比如bootstrap。
  5. css3樣式大部分不支援
圖例

解決思路：

先從整體佈局方式說起，常見的兩種方式就是iframe和div。
首先iframe它其實已經是一個被廢棄了，但是在163、sina等這類郵箱，它是在用iframe的。至於為什麼會用iframe……

  1. iframe能夠原封不動的把嵌入的網頁展現出來。
  2. 如果有多個網頁引用iframe，那麼你只需要修改iframe的內容，就可以實現呼叫的每一個頁面內容的更改，方便快捷。
  3. 網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來巢狀，可以增加程式碼的可重用。
  4. 如果遇到載入緩慢的第三方內容如圖示和廣告，這些問題可以由iframe來解決。

第二種佈局table，為什麼要用table代替div原因如下：

  1. Div+css佈局不完全被郵件客戶端支援
  2. Div+css郵件的機制很容易導致css不能正常解析

因為head裡面的內容會被過濾掉的原因，我們不要寫<style>標籤、不要寫class，所有CSS都用style屬性，什麼元素需要什麼樣式就用style寫內聯的CSS。所以說可以的話，就用標籤的自帶屬性，也是比較方便的。table屬性是我們整個郵件的重要部分，所以它的一些自帶屬性，大家可以去網上搜尋一下，都是比較基礎的，在這裡就不一一列舉了。

回到樣式上，其實直接寫內聯樣式的話，是比較麻煩的，所以，我們在寫樣式的時候，可以先以class的方式書寫，其後使用：tonny-zhang.github.io/pages/css_f…
將內聯樣式轉換成嵌入樣式。

無法使用@media，主要認為是@media是全域性的，而我們需要改變的東西是區域性的，所以說不適合用。
無法引入bootstrap等外聯樣式，因為上面說過的，它會把head過濾掉，所以說引入了也是沒有用的。
至於它不支援大部分CSS3屬性，就是不支援，也不知道為什麼，嘿嘿。
而且它對背景圖片的支援也不太理想，還有就是圖片要寫上alt屬性，因為就算圖片不出來，至少還有個提示嘛。
如果有比較複雜的佈局，不要用float，position之類的，因為也會被過濾，我們就用table就可以的。

模板封裝

在專案中會有各種郵件的傳送，但是有些產品資訊，公司資訊是不會改變的，所以說，將郵件封裝成模板。

<table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#fff" collapse>
    <tr>
          <td valign="middle" style="color:#333">
                <table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff" border="0" align="center" class="border-collapse">
                    ……
                </table>
          </td>
    </tr>
</table>
複製程式碼

整體的大table可以像如上這樣寫。
對於像字型、間距、行高，我們可寫一個公共類，到時候用前面我給予的網站去轉換一下就好了。

最後

一個郵件的樣子也是非常重要的，它也是專案的一部分，並且作為一個可研究的東西，也是非常有價值的。
奮鬥吧，猿們。

相關文章