html邮件模板编写实践

编写邮件模板

最近在写业务开发的时候,需要去写邮件通知的模板。 积累了一些邮箱编写经验呀呀。

邮件html编写要求

邮件编写参照的是 阮一峰大神的HTML Email 编写指南

里面大致提了

使用table 布局 外链除了图片全部失效 css使用行内样式为佳

各邮件对css的支持

实验

行内样式写起来很痛苦,所以,一开始我打算写的是<style></style>标签。 写完后,我向各个主邮箱发送了测试

gmail.com 163.com qq.com tencent.com

结果如图 图上可见,QQtencent163<style>的支持尚可,但是gmail已经完全把<style>过滤掉了。

所以需要改用 行内样式 做实验

可以看到,样式完全支持了

如何写行内样式

如果让自己手动写行内样式,那么就是太痛苦了。 那么,有没有办法自动将自己的样式转成行内样式呢?

一开始,我的想法是,使用js遍历所有dom,获取css值,然后写在dom的style属性里。 可是这个办法我探索了一晚上,没有找到一个函数,只获取css声明过的样式,只能获得所有样式的值。

后台直接google了一下gulp-inline,结果搜索出一个gulp-inline-css插件,可以将css转成 inline-css,即行内样式, 用法如下

var gulp = require('gulp'),
    inlineCss = require('gulp-inline-css');

gulp.task('default', function() {
    return gulp.src('./*.html')
        .pipe(inlineCss({
                applyStyleTags: true,
                applyLinkTags: true,
                removeStyleTags: true,
                removeLinkTags: true
        }))
        .pipe(gulp.dest('build/'));
});

完美。

顺便提一下,gmail不支持 position样式,我发现各个邮箱,就gmail的限制比较多。

结尾

有了合适的插件,编写邮件就方便多了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

一文读懂Xcode 9 所有更新:全新模拟器,兼容Swift低版本等

代码重构功能增强 这次 Xcode 9 对代码重构功能有较大的提升,首先是重命名功能,在编辑器中点击类名,然后选择 Refactor -> Rename: ?...

4267
来自专栏影子

Ionic如何实现单选二级菜单切换

3699
来自专栏小程序·云开发专栏

解剖小程序的 setData

原文链接:https://godbasin.github.io/2018/10/05/wxapp-set-data/

1.1K3
来自专栏小李刀刀的专栏

禁用Firefox自带的元素查看工具

对于web前端工程师来说,用Firefox+Firebug进行CSS和JavaScript的调试已经是非常熟悉和习惯了。如今,新版本的Firefox中又内嵌了一...

3448
来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

1173
来自专栏西安-晁州

Vuejs中slot实现自定义组件header、footer等

vue中的slot主要负责内容分发,之前有介绍过slot的内容,具体链接:http://www.cnblogs.com/vipzhou/p/6640056.ht...

1364
来自专栏小程序之家

如何在小程序中使用加速度计

在小程序日常开发中,我们可能会遇到需要通过旋转手机等方式来触发某种事件,为此,就需要调用手机当中的加速度计来为我们获取手机的当前状态了。

7.7K1
来自专栏游戏杂谈

HTML5的Histroy API

比较典型的是GitHub,在点击代码文件夹和文件时,会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了(跟新开了一个新页面感觉一样),但体验起来很...

1693
来自专栏程序员的知识天地

移动端上拉加载和下拉刷新的vue插件

npm install --save mescroll.js //不要使用cnpm安装

1.2K2
来自专栏司想君

HTML5.2新特性解读

不到一个月之前,W3C官方发布 HTML5.2,并成为官方推荐使用标准。这意味着作为web开发者,我们可以愉快地使用5.2中的新特性了。 W3C在HTML5.2...

3665

扫码关注云+社区

领取腾讯云代金券