将"编译"为HTML作为内联样式

Question

我正在编写电子邮件HTML模板,有些电子邮件客户端不支持<style>指定CSS.应用CSS的唯一选择是使用内联样式(style属性).是否有工具或库(Node.JS)用于将样式表应用于某些HTML并返回应用了样式的HTML？

该工具不必支持许多选择器; id,class和元素名称选择器应该足以满足我的需求.

需要的示例:

// stylesheet.css
a { color: red; }

// email.html
<p>This is a <a href="http://example.com/">test</a></p>

// Expected result
<p>This is a <a href="http://example.com/" style="color: red;">test</a></p>

Answer 1

我认为果汁是你正在寻找的.

只需要它,然后传递你的html和css,让它为你做这样繁重的工作:

var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');

它建立在许多成熟的库上,包括mootools的光滑,并支持广泛的选择器.

您可能还对node-email-templates感兴趣,这是节点中动态电子邮件的一个很好的包装器.

Answer 2

这是活着的javascript项目,它们可以满足您的需求:

• juice.1.7Mb依赖.
• juice2.5.9Mb具有依赖性.这是一个果汁叉,似乎含有比果汁更多的选择.这个不会像果汁那样丢弃媒体查询.按字母顺序排列内联css规则.
• styliner.4.0Mb的依赖项.这个使用promises代替.有两个不同的选项比juice2.有一个compact选项,其他人没有那个缩小html.不像其他人那样读取html文件本身.也扩展margin和padding缩短.如果你以某种方式修改你的原生对象(如果你正在使用糖)我不建议使用这个直到这个问题得到解决.

那么哪一个使用？那么这取决于你编写CSS的方式.它们各自对边缘情况有不同的支持.更好地检查每个并做一些测试以完全理解.

Answer 3

谷歌搜索并找到了这个:http://inlinestyler.torchboxapps.com/