¿Qué herramientas para alinear estilo CSS automáticamente para crear código HTML de correo electrónico?

Question

Al echar un vistazo a http://www.campaignmonitor.com/css/, aprenderá que debe incrustar estilos en línea en su HTML, para que su correo sea leído en cualquier cliente de correo.

¿Conoces alguna herramienta o script para convertir automáticamente un archivo HTML con un archivo declarado en un archivo HTML con solo atributos de estilo CCS en línea?

Editar: ¿Alguna solución de Javascript (es decir: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/)? Con jQuery?

Answer 1

Compruebe el convertidor en línea premailer.dialect.ca o este Python script para hacerlo.

Answer 2

No es suficiente simplemente con insertar su CSS. No hay estándares observados sobre cómo se mostrará un correo electrónico HTML en cualquier cliente de correo electrónico que se utilice. Todos lo hacen de manera diferente, y cuanto más diseñe su correo electrónico, mayor será la probabilidad de que se rompa en una mayor cantidad de clientes. Muchos profesionales en este espacio simplemente usan imágenes y tablas y tal vez algunos colores de fondo, pero nada más. Siempre incluya un enlace a un sitio web que tenga una copia de trabajo del correo electrónico y siempre proporcione una variante de texto sin formato.

Answer 3

otro de MailChimp - http://beaker.mailchimp.com/inline-css

Answer 4

Es posible que desee echar un vistazo a PostageApp.

Una de sus características realmente sólidas es que tiene un sistema de plantillas muy robusto que puede alinear automáticamente HTML y CSS sin ningún problema.

(Full Disclosure: soy el administrador de producto para PostageApp.)

Answer 5

Si le gustaría tener una solución PHP, puede intentar CssToInlineStyles.

Answer 6

Dos variantes C#:

http://chrispebble.com/Blog/7/inlining-a-css-stylesheet-with-c

PreMailer.Net - https://github.com/milkshakesoftware/PreMailer.Net

no hemos probado bien hasta el momento, pero será después de vuelta si/cuando lo haga.

Answer 7

Esto puede ser un poco tarde, pero si desea hacer que su HTML sea lo mejor posible para la comercialización del correo electrónico (mediante la delimitación de su CSS y utilizando otras herramientas geniales), use el Premailer. Es gratis, y por supuesto, se hizo en asociación con CampaignMonitor.

Espero que ayude.

Answer 8

Para programadores de PHP: verifique esto online converter o este PHP script para hacerlo.

Answer 9

Escribí una biblioteca de Node.js llamada Styliner que inserta CSS en el lado del servidor de Javascript.

Es compatible con hojas de estilo menos también (y soporta plugins para otros formatos)

Answer 10

Una solución Javascript por Tikku aquí: https://tikku.com/open-source/utilities/css-inline-transformer/

Answer 11

Estoy un poco tarde al juego pero espero que esto ayude a alguien .

me encontré con este pequeño jQuery/javascript método que puede ser embebido en una página - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

he editado un poco para apoyar el IE y también para apoyar una página con múltiples archivos CSS adjunta en la aplicación de estilos el orden correcto

$(document).ready(function ($) { 
      var rules; 
      for(var i = document.styleSheets.length - 1; i >= 0; i--){ 
       if(document.styleSheets[i].cssRules) 
        rules = document.styleSheets[i].cssRules; 
       else if(document.styleSheets[i].rules) 
        rules = document.styleSheets[i].rules; 
       for (var idx = 0, len = rules.length; idx < len; idx++) { 
        if(rules[idx].selectorText.indexOf("hover") == -1) { 
         $(rules[idx].selectorText).each(function (i, elem) { 
          elem.style.cssText = rules[idx].style.cssText + elem.style.cssText; 
         }); 
        } 
       } 
      } 
      $('style').remove(); 
      $('script').remove(); 
      $('link').remove(); 
     }); 

La página se puede copiar/pegar en el cuerpo del correo electrónico.

Answer 12

Aquí hay una lista de herramientas de línea lista para usar listas para usar, una pareja se ha mencionado anteriormente. Si hay alguno que he perdido, siéntase libre de editar y agregarlos. No puedo prometer cada uno funciona como se anuncia, para dejar comentarios, pero no matar al mensajero ...

• Campaign Monitor
• Mailchimp
• Premailer
• Inline Styler
• Emogrifier
• MailerMailer
• Tikku
• Mally

Y aquí es uno que funciona a la inversa de (des-inlining el CSS)

• CSS Out