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

问题描述 投票:33回答:6

我正在编写电子邮件HTML模板,并且某些电子邮件客户端不支持<style>用于指定CSS。应用CSS的唯一替代方法是使用内联样式(style属性)。是否有工具或库(Node.JS)用于将样式表应用于某些HTML并使用所应用的样式取回HTML?]

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

所需示例:

// 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 node.js stylesheet
6个回答
17
投票

我认为您正在寻找juice

简单地要求它,然后将它传递给您的html和css,然后让它像这样为您做繁重的工作:

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

它基于包括mootools的slick在内的许多成熟的库,并支持广泛的选择器。

您可能还对node-email-templates感兴趣,它是节点中动态电子邮件的不错包装。


7
投票

这是可以满足您需求的动态javascript项目:

  • juice。 1.7Mb,具有依赖性。
  • juice。 5.9Mb具有依赖性。这是果汁的叉子,似乎比果汁包含更多的选择。这不会像榨汁一样丢弃媒体查询。按字母顺序对内联CSS规则进行排序。
  • juice2。具有依赖项的4.0Mb。这个代替了promise。除了juice2,还有其他几种选择。有juice2选项,而其他选项则没有,可将html缩小。不会像其他人一样读取html文件本身。还扩展了stylinerstyliner的简写。而且,如果您以某种方式修改了本机对象(例如,如果您使用的是compact),我不建议在解析margin之前使用它。

那么该使用哪个?好吧,这取决于您编写CSS的方式。它们对边缘情况都有不同的支持。最好检查一下并做一些测试以更好地理解。


5
投票

进行了Google搜索并发现了此内容:padding


3
投票

您可以使用sugar来应用$('a')。css({color:'red'});


0
投票

[另一种选择是回到基础。如果您希望链接为红色,请使用[]代替

this issue

http://inlinestyler.torchboxapps.com/

几乎任何浏览器,包括可怕的BlackBerry浏览器都可以处理。


0
投票

2020解决方案jsdom + jquery

© www.soinside.com 2019 - 2024. All rights reserved.