Pertanyaan "Kompilasi" CSS ke HTML sebagai gaya sebaris


Saya menulis template HTML e-mail, dan beberapa klien e-mail tidak mendukung <style> untuk menentukan CSS. Satu-satunya alternatif untuk menerapkan CSS adalah menggunakan gaya inline (style atribut). Apakah ada alat atau pustaka (Node.JS) untuk menerapkan stylesheet ke beberapa HTML dan mendapatkan kembali HTML dengan gaya yang diterapkan?

Alat ini tidak harus mendukung banyak pemilih; id, kelas, dan pemilihan nama elemen harus cukup untuk kebutuhan saya.

Contoh apa yang dibutuhkan:

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

32
2018-02-04 02:49


asal


Jawaban:


kupikir jus adalah apa yang Anda cari.

Cukup tuntut, lalu berikan html dan css Anda dan biarkan melakukan pengangkatan berat untuk Anda seperti ini:

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

Ini dibangun di sejumlah perpustakaan matang termasuk apik mootools, dan mendukung berbagai pemilih.

Anda mungkin juga tertarik template-email-simpul, yang merupakan pembungkus yang bagus untuk email dinamis di node.


16
2017-10-21 15:36



Inilah proyek javascript hidup yang melakukan apa yang Anda inginkan:

  • juice. 1.7 MB dengan dependensi.
  • juice2. 5.9Mb dengan dependensi. Ini adalah garpu jus, tampaknya mengandung lebih banyak pilihan daripada jus. Yang ini tidak menjatuhkan kueri media seperti halnya jus. Mengurutkan aturan css inline menurut abjad.
  • styliner. 4.0 MB dengan dependensi. Yang ini menggunakan janji sebagai gantinya. Memiliki beberapa pilihan berbeda daripada juice2. Mempunyai sebuah compact opsi yang lain tidak memiliki yang mengecilkan html. Tidak membaca file html itu sendiri seperti yang dilakukan orang lain. Juga meluas margin dan padding singkatan. Dan jika Anda memodifikasi objek asli Anda (seperti jika Anda menggunakan Gula) Saya tidak menyarankan menggunakan ini sampai masalah ini terselesaikan.

Jadi yang mana yang digunakan? Yah itu tergantung pada cara Anda menulis CSS. Mereka masing-masing memiliki dukungan yang berbeda untuk kasus tepi. Lebih baik periksa masing-masing dan lakukan beberapa tes untuk memahami dengan sempurna.


7
2018-01-11 09:09



Melakukan pencarian google dan menemukan ini: http://inlinestyler.torchboxapps.com/


5
2018-02-04 02:52



Anda bisa menggunakannya jsdom + jquery untuk menerapkan $ ('a'). css ({color: 'red'});


3
2018-02-04 05:21



Alternatif lain adalah kembali ke dasar. Jika Anda ingin tautan menjadi merah, bukan

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

melakukan

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

Hampir semua browser, termasuk browser BlackBerry yang mengerikan dapat mengatasinya.


0
2018-02-04 05:33