Inline CSS

最近需要寫一個發送 email 的 program。如果要用 HTML 的話,最好都是找到現成的 HTML email framework。(例如 Zurb 的 Ink,其他的可以參考 Responsive Email Resources 網站)因為 HTML email 和平時做網頁分別很大,例如:

  • CSS 要 inline,<style> 並不是全部 email client 都能支援
  • 排版要用 <table>
  • 圖片視乎需要當成附件,Base64 未必能被 email client 支援
    但設計 email 時如果要寫 inline style 是非常難寫,所以都是用工具轉。我試過用 Gulpgulp-inline-cssgulp-inline,效果不錯。

以下是 Gulp 做 inline CSS 的寫法:

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var gulp = require('gulp');
var minifyHTML = require('gulp-minify-html');
var inlineCSS = require('gulp-inline-css');
var inline = require('gulp-inline');

gulp.task('email', function () {
return gulp.src(['templates/email/src/*.html'])
.pipe(inline({
base: 'templates/email/src'
}))
.pipe(inlineCSS({
applyStyleTags: true,
applyLinkTags: true,
removeStyleTags: true,
removeLinkTags: true
}))
.pipe(minifyHTML())
.pipe(gulp.dest('templates/email'));
});

inline 是用來將 HTML 用 <style> 外連的 CSS 檔變成內篏在 HTML 檔的 CSS。之後 inlineCSS 會將 <style> 的 CSS 變成 inline 在每一個 HTML tag 的 style attritube。最後 minifyHTML 是用來將多餘的空格清走,令檔案變得更細。將它抽走都不會影響 inline CSS 的效果。如果不用 gulp-inline 而直接用 gulp-inline-css 的話會令到原先用 <style> 內篏在 HTML 檔的 CSS 不能 override 外連 CSS 檔的 rule。

有一樣東西要留意:inlineinlineCSS 會將 HTML 檔內本應要 escape 的字符 escape 掉。所以如果 HTML 檔是要配合 template engine 用的話,要留意 template engine 所用的字符會否被 escape 掉。