paginas - "Compilar" CSS en HTML como estilos en línea

etiquetas css

Question

Estoy escribiendo una plantilla HTML de correo electrónico y algunos clientes de correo electrónico no son compatibles con <style> para especificar CSS. La única alternativa para aplicar CSS es usar estilos en línea (atributo de style ). ¿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>

Answer 1

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 una opción compact que otros no tienen que minimiza el html. No lee el archivo html como lo hacen otros. También extiende el margin y el shorthands de padding . Y en caso de que de alguna manera modifiques tus objetos nativos (como si estuvieras usando azúcar ), no sugiero usar esto hasta que se resuelva este problema .

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.

Answer 2

Creo que el juice 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.

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

Answer 3

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

Answer 4

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.

Answer 5

Puede usar jsdom + jquery para aplicar $ (''a''). Css ({color: ''red''});