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

Posted 2023-03-07

【中文标题】将 CSS 作为内联样式“编译”成 HTML

【英文标题】："Compile" CSS into HTML as inline styles

【发布时间】：2011-06-21 02:43:41

【问题描述】：

我正在编写一个电子邮件 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>

【参考方案1】：

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

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

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

【讨论】：

选项的值是什么？

【参考方案2】：

这里是你想要做的活的 javascript 项目：

juice。 1.7Mb 有依赖项。 juice2。 5.9Mb 有依赖关系。这是果汁的叉子，似乎比果汁包含更多的选择。这个不会像果汁那样丢弃媒体查询。按字母顺序对内联 css 规则进行排序。 styliner。 4.0Mb 有依赖关系。这个使用了 Promise。有几个比juice2 不同的选择。有一个 compact 选项，其他选项没有，可以缩小 html。不像其他人那样读取 html 文件本身。还扩展了 margin 和 padding 简写。如果你以某种方式修改你的原生对象（比如你使用sugar），我不建议在this issue得到解决之前使用它。

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

【参考方案3】：

我认为juice 是您正在寻找的。​​p>

只需要它，然后将你的 html 和 css 传递给它，让它像这样为你完成繁重的工作：

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

它建立在许多成熟的库之上，包括 mootools 的 slick，并支持广泛的选择器。

您可能还对 node-email-templates 感兴趣，它是 node 中动态电子邮件的一个很好的包装器。

【参考方案4】：

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

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

做

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

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

【讨论】：

是的，但我仍然需要处理所有这些 HTML 文档以将“普通”CSS 转换为使用 <font>。

【参考方案5】：

您可以使用jsdom + jquery 应用 $('a').css(color:'red');

【讨论】：

这需要电子邮件客户端支持javascript。不幸的是，不是给定的。

@staticsan：jsdom 旨在用作服务器端 javascript，所以我认为电子邮件客户端支持不是问题。

@staticsan，OP特别提到了Node.JS。好主意将军亨利。 +1

嗯。好的，我错过了 OP 中的 Node.js 参考。此外，谷歌搜索 jsdom 并没有告诉我它是作为服务器端 JS 的。我怀疑存在假设的冲突。 （现在要走了……）

这看起来像是我将采用的解决方案。除非我能找到 CSS 解析器，否则我将不得不手动应用样式（这应该不会太麻烦）。