Pregunta "Compilar" CSS en HTML como estilos en línea


Estoy escribiendo una plantilla HTML de correo electrónico y algunos clientes de correo electrónico no son compatibles <style> para especificar CSS La única alternativa para aplicar CSS es usar estilos en línea (style atributo). ¿Hay una herramienta o biblioteca (Node.JS) para aplicar una hoja de estilo a algún HTML y recuperar el HTML con los estilos aplicados?

La herramienta no tiene que admitir muchos selectores; Los selectores de ID, clase y nombre de elemento deberían ser suficientes para mis necesidades.

Ejemplo de lo que se necesita:

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


origen


Respuestas:


creo jugo es lo que estás buscando.

Simplemente solicítelo, luego páselo por html y css, y deje que haga el trabajo pesado por usted de esta manera:

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

Se basa en una serie de bibliotecas maduras, incluida la mancha de mootools, y es compatible con una amplia gama de selectores.

Usted también podría estar interesado en node-email-templates, que es un buen contenedor para correos electrónicos dinámicos en el nodo.


16
2017-10-21 15:36



Aquí están los proyectos de javascript activos que hacen lo que quieres:

  • juice. 1.7Mb con dependencias.
  • juice2. 5.9Mb con dependencias. Este es un tenedor de jugo, parece contener más opciones que el jugo. Este no elimina consultas de medios como lo hace juice. Ordena alfabéticamente las reglas CSS en línea.
  • styliner. 4.0Mb con dependencias. Este usa promesas en su lugar. Tiene un par de opciones diferentes de juice2. Tiene un compact opción que otros no tienen que minimiza el html. No lee el archivo html como lo hacen otros. También se extiende margin y padding manos cortas. Y en caso de que de alguna manera modifiques tus objetos nativos (como si estuvieras usando azúcar) No sugiero usar esto hasta este problema esta resuelto.

Entonces, ¿cuál usar? Bueno, depende de la forma en que escribas CSS. Cada uno de ellos tiene soporte diferente para casos extremos. Mejor revise cada uno y haga algunas pruebas para comprenderlas perfectamente.


7
2018-01-11 09:09



Hizo una búsqueda en Google y encontré esto: http://inlinestyler.torchboxapps.com/


5
2018-02-04 02:52



Podrías usar jsdom + jquery para aplicar $ ('a'). css ({color: 'red'});


3
2018-02-04 05:21



Otra alternativa es volver a lo básico. Si desea que un enlace sea rojo, en lugar de

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

hacer

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

Casi cualquier navegador, incluido el terrible navegador BlackBerry puede manejar eso.


0
2018-02-04 05:33