将“编译”为HTML的内联样式

我正在编写一个电子邮件HTML模板,一些电子邮件客户端不支持<style>来指定CSS。 应用CSS的唯一select是使用内联样式( style属性)。 是否有一个工具或库(Node.JS)将样式表应用到某个HTML并获取应用了样式的HTML?

该工具不必支持许多select器; ID,类和元素名称select器应该足以满足我的需要。

需要什么的例子:

 // 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> 

我认为果汁就是你要找的。

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

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

它build立在许多成熟的库上,包括mootools的光滑,并支持广泛的select器。

您也可能对node-email-templates感兴趣,它是节点中dynamic电子邮件的一个很好的包装。

这里是活着的JavaScript项目,你想要什么:

  • juice 。 1.7Mb的依赖。
  • juice2 。 5.9Mb的依赖。 这是一个果汁叉,似乎比果汁更多的select。 这不会像果汁一样放下媒体查询。 按字母顺序排列内联CSS规则。
  • styliner 。 4.0Mb依赖。 这个使用promise来代替。 有两个不同的选项比juice2。 有一个compact选项,其他人没有,缩小的HTML。 不像别人那样阅读html文件本身。 还扩展了marginpadding shorthands。 而且,如果你以某种方式修改你的本地对象(就像你正在使用糖 ),我不build议使用这个,直到这个问题得到解决。

那么使用哪一个? 那么这取决于你写CSS的方式。 他们每个人对边缘情况都有不同的支持。 更好地检查每一个,并做一些testing,以理解完美。

做了谷歌search,发现这个: http : //inlinestyler.torchboxapps.com/

你可以用jsdom + jquery来应用$('a')。css({color:'red'});

另一种select是回到基础。 如果你想要一个链接是红色的,而不是

 <a href="" style="color: red">my link</a> 

 <a href=""><font color="red">my link</font></a> 

几乎所有的浏览器,包括可怕的黑莓浏览器都可以处理。