[英]“Compile” CSS into HTML as inline styles
I am writing an e-mail HTML template, and some e-mail clients do not support <style>
for specifying CSS.我正在编写一个电子邮件 HTML 模板,一些电子邮件客户端不支持
<style>
来指定 CSS。 The only alternative for applying CSS is to use inline styles ( style
attribute).应用 CSS 的唯一替代方法是使用内联样式(
style
属性)。 Is there a tool or library (Node.JS) for applying a stylesheet to some HTML and getting back the HTML with the styles applied?是否有工具或库(Node.JS)用于将样式表应用于某些 HTML 并使用应用的样式取回 HTML?
The tool does not have to support many selectors;该工具不必支持许多选择器; id, class, and element name selectors should be sufficient for my needs.
id、class 和元素名称选择器应该足以满足我的需要。
Example of what is needed:需要什么的例子:
// 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>
I think juice is what you're looking for.我认为果汁就是你要找的。
Simply require it, then pass it your html and css and let it do the heavy lifting for you like this:只需要它,然后将你的 html 和 css 传递给它,让它像这样为你做繁重的工作:
var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');
It builds on a number of mature libraries including mootools' slick, and supports a broad range of selectors.它建立在许多成熟的库上,包括 mootools 的 slick,并支持广泛的选择器。
You may also be interested in node-email-templates , which is a nice wrapper for dynamic emails in node.您可能还对node-email-templates感兴趣,它是 node.js 中动态电子邮件的一个很好的包装器。
Here's the alive javascript projects that does what you want:这是可以完成您想要的活动的 javascript 项目:
juice
. juice
。 1.7Mb with dependencies. juice2
. juice2
。 5.9Mb with dependencies. styliner
. styliner
。 4.0Mb with dependencies. compact
option that other ones don't have that minifies the html.compact
选项,其他人没有,可以缩小 html。 Doesn't read the html file itself as others do.margin
and padding
shorthands.margin
和padding
速记。 And in case you somehow modify your native objects(like if you are using sugar ) I don't suggest using this till this issue is resolved. So which one to use?那么使用哪一种呢? Well it depends on the way you write CSS.
好吧,这取决于您编写 CSS 的方式。 They each have different support for edge cases.
他们每个人对边缘情况都有不同的支持。 Better check each and do some tests to understand perfectly.
最好检查每个并做一些测试以完全理解。
谷歌搜索并找到了这个: http : //inlinestyler.torchboxapps.com/
你可以使用jsdom + jquery来应用 $('a').css({color:'red'});
2020 solution https://www.npmjs.com/package/inline-css 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); });
Another alternative is to go back to basics.另一种选择是回归基础。 If you want a link to be red, instead of
如果您希望链接为红色,而不是
<a href="" style="color: red">my link</a>
do做
<a href=""><font color="red">my link</font></a>
Almost any browser, including the terrible BlackBerry browser can handle that.几乎所有浏览器,包括糟糕的黑莓浏览器,都可以处理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.