Question

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

该工具不必支持多个选择器; id，class和element name选择器应该足以满足我的需求。

需要的示例：

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

我认为juice正是您所寻找的。

只需要它，然后传递你的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个缩写。如果你以某种方式修改你的原生对象（比如你正在使用sugar），我建议不要使用它直到this issue被解决。

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

Answer 3

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

Answer 4

您可以使用jsdom + jquery来应用$（'a'）。css（{color：'red'}）;

Answer 5

2020解决方案 https://www.npmjs.com/package/inline-css

var inlineCss = require('inline-css');
var html = "<style>div{color:red;}</style><div/>";

inlineCss(html, options)
    .then(function(html) { console.log(html); });

Answer 6

另一种选择是回归基础。如果您希望链接为红色，而不是

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

DO

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

几乎任何浏览器，包括可怕的黑莓浏览器都可以处理。

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

6 个答案: