web-dev-qa-db-ja.com

CSSをインラインスタイルとしてHTMLに「コンパイル」する

電子メールのHTMLテンプレートを作成していますが、一部の電子メールクライアントはCSSを指定するための<style>をサポートしていません。 CSSを適用する唯一の方法は、インラインスタイル（style属性）を使用することです。一部のHTMLにスタイルシートを適用し、スタイルが適用されたHTMLを取得するためのツールまたはライブラリ（Node.JS）はありますか？

ツールは多くのセレクターをサポートする必要はありません。 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>
htmlcssnode.jsstylesheet
33
strager

ジュース があなたが探しているものだと思います。

単にそれを要求し、それからあなたのhtmlとcssを渡して、次のようにあなたのために重労働をさせてください：

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

Mootoolsのslickを含む多くの成熟したライブラリに基づいて構築されており、幅広いセレクターをサポートしています。

node-email-templates にも興味があるかもしれません。これは、ノード内の動的な電子メールの優れたラッパーです。

17
Jed Watson

これがあなたが望むことをする生きているjavascriptプロジェクトです：

  • juice 。依存関係のある1.7Mb。
  • juice2 。依存関係のある5.9Mb。これはジュースのフォークで、ジュースよりも多くのオプションが含まれているようです。これは、ジュースのようにメディアクエリをドロップしません。インラインCSSルールをアルファベット順にソートします。
  • styliner 。依存関係のある4.0Mb。これは代わりにpromiseを使用します。ジュース2とは異なるオプションがいくつかあります。 htmlを最小化する他の人にはないcompactオプションがあります。他の人がするようにhtmlファイル自体を読みません。 marginおよびpaddingの省略形も拡張します。また、ネイティブオブジェクトを何らかの方法で変更した場合（ sugar を使用している場合など）、 この問題 が解決されるまでこれを使用することはお勧めしません。

では、どちらを使用しますか？それはCSSの書き方によって異なります。それぞれ、エッジケースのサポートが異なります。それぞれをよくチェックし、いくつかのテストを行って完全に理解してください。

7
Farid Nouri Neshat

グーグル検索をして、これを見つけました： http://inlinestyler.torchboxapps.com/

5
Brian Flanagan

jsdom + jquery を使用して$（ 'a'）。css（{color： 'red'}）;を適用できます。

3
generalhenry

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); });
0
waza123

もう1つの方法は、基本に戻ることです。リンクを赤ではなく赤にしたい場合

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

行う

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

ひどいBlackBerryブラウザを含むほとんどすべてのブラウザがそれを処理できます。

0
Sean