邮件模板实践小结

Question

背景

有这么一种业务情景，比如说一个电商网站，用户下单了，然后就往用户的邮件里面发一封邮件告知用户。

此过程一般经历如下

用户下单
后端读取前端的邮件模板（HTML）
后端填充数据
后端把邮件发送到用户邮件服务器
用户打开邮件，浏览器呈现邮件内容

处理时候注意要点

这里面，用户的邮件服务器接收到邮件之后，会进行各种各样奇怪的处理

• 简单的，会把js去掉，因为这些不太安全
• 有一些会把样式标签去掉，例如<link rel="stylesheet">，<style>
• hotmail会非常变态地，把你的网页改得面目全非，一些HTML标签和类名都会改

针对以上情况，我们在做邮件模板的时候，要注意以下要点：

• 样式内联，即 <div style="color:red;">我是红色字</div>
• 不能用伪元素，内联是不支持的
• 不要用css hack <div style="*zoom:1;color:red;">我是红色字</div> 会导致红色的样式无效
• 浮动最好不要用
• 推荐table 布局

实践 -- juice

实践过程中，要把样式都写在style中是一件很蛋疼的事情，这可以用工程化去处理，juice 是一个解决方案。

juice 会分析邮件中html与css语法，根据语法规则去内联css。而邮件发送的过程是需要嵌套后台模板的，所以此处就需要在嵌套的时候不要破坏html的语法，比如

<div class="a <!-- IF b --> b<!-- ENDIF -->">

就要写成

<!-- IF b --><div class="a b"><!-- ELSE --><div class="a"><!-- ENDIF -->

或者是利用node作为中间层去处理。

实践 -- nodemailer

如何调试邮件的模板？首先我们内联之后，嵌套了数据的页面要能在本地访问到，然后可利用 nodemailer 去发送给到要测试的服务器上

request(url).then(resp =>sendEmailUseNodemailer({
    subject: item.subject,
    html: resp.body
}));

体会 -- hotmail

hotmail会把你的邮件改得面目全非，自己体会
原html

<div class="mail">
    <p style="height:100px;background:red;"></p>
    <div class="mail2" style="position:relative;margin-top:1px; background-image:url(https://avatars1.githubusercontent.com/u/4214942);">
        <div class="mail3" style="margin:-3px;">234234234234</div>
    </div>
    <section>asdfasdf</section>
</div>

发送之后

<div class="x_mail">
<p style="height:100px; background:red"></p>
<div class="x_mail2" style="margin-top:1px">
<div class="x_mail3" style="">234234234234</div>
</div>
asdfasdf </div>

体会 -- qqmail

在qq邮箱的css代码中，有这么一行代码

.btn,button,.qm_btn{
    color:#000!important;
}

那么你的邮件正文中 <div class="btn" style="color:red;">我想要红色字</div> 结果将会是 黑色字

总结

我们对于邮件模板的处理方案如下

1. 样式内联
2. 不用伪元素
3. 不用css hack
4. 不用浮动
5. 多用table布局
6. 不要用html5语义化标签如section,header,article,hgroup,asides
7. 不要用 position:relative;margin-top; background-image;
8. 不要用一些属性值为负值 例如 left:-1px，没有细测所有情况
9. 不要带有类名
10. 最后最后，提供一个让用户可以在线访问你的邮件正文的连接