html - para - etiquetas css

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

Question

Cuando veas http://www.campaignmonitor.com/css/ , sabrás que necesitas incrustar estilos en línea en tu HTML, para que tu 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 : Cualquier solución de Javascript (es decir: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ )? Con jQuery?

Answer 1

Aquí hay una lista de herramientas de alineación listas para usar basadas en la web, una pareja ha sido mencionada anteriormente. Si hay alguno que he perdido, siéntase libre de editar y agregarlos. No puedo prometerle a cada uno de los trabajos que se anuncian, así que suelta los comentarios, pero no dispares al messenger ...

• Monitor de Campaña
• beaker.mailchimp.com/inline-css
• premailer.dialect.ca
• Estilista en línea
• Emogrifier
• MailerMailer
• Tikku
• Mally

Y aquí hay uno que funciona al revés (desmarcando tu CSS)

• CSS fuera

Answer 2

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

Answer 3

Dos variantes de C #:

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

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

Aún no he probado, pero publicaré nuevamente si / cuando lo haga.

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.

( Divulgación completa: soy el administrador de productos de PostageApp).

Answer 5

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

También es compatible con LESS stylesheets (y admite complementos para otros formatos)

Answer 6

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 el uso de otras herramientas geniales), utilice el premailer.dialect.ca . Es gratis, y por supuesto, se hizo en asociación con CampaignMonitor.

Espero eso ayude.

Answer 7

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

Encontré este pequeño y agradable método jQuery / javascript que se puede incrustar en una página - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

Lo he editado un poco para soportar IE y también para admitir una página con múltiples archivos CSS adjuntos aplicando estilos en 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 8

No es suficiente simplemente alinear 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 9

Otro de mailchimp - beaker.mailchimp.com/inline-css

Answer 10

Para programadores PHP: verifique este Emogrifier o este script PHP para hacerlo.

Answer 11

Si desea tener una solución PHP, puede probar CssToInlineStyles .

Answer 12

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