什么工具可以自动内联CSS样式来创建电子邮件HTML代码？

Question

当您查看http://www.campaignmonitor.com/css/时,您了解到需要在HTML中嵌入内联样式,以便在任何邮件客户端中读取您的电子邮件.

您是否知道任何工具或脚本可以自动将声明的HTML文件转换为仅包含内联CCS样式属性的HTML文件？

编辑:任何Javascript解决方案(即:http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/)？用jQuery？

Answer 1

检查premailer.dialect.ca在线转换器或此Python脚本来执行此操作.

Answer 2

这是一个基于Web的即用型内联工具列表,之前已经提到了一对.如果有任何我错过了,请随时编辑并添加它们.我不能保证每个作品都是广告,所以放弃评论,但不要拍摄信使......

• Campaign Monitor
• Mailchimp
• Premailer
• 内联样式
• Emogrifier
• MailerMailer
• Tikku
• 马利

这是一个反向工作(取消内联你的CSS)

• CSS Out

Answer 3

如果您想要PHP解决方案,可以尝试CssToInlineStyles.

Answer 4

两个C#变种:

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

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

尚未测试过,但如果/当我做的时候会回复.

Answer 5

我写了一个名为Styliner的Node.js库,它在服务器端Javascript中内联CSS.

它也支持LESS样式表(并支持其他格式的插件)

Answer 6

您可能想看一下PostageApp.

其强大的功能之一是它具有非常强大的模板系统,可以自动内联HTML和CSS而不会出现任何问题.

(完全披露:我是PostageApp的产品经理.)

Answer 7

这可能有点太晚了,但是如果你想让你的HTML成为电子邮件营销的最佳选择(通过内联你的CSS,并使用一堆其他很酷的工具),请使用Premailer.它是免费的,当然也是与CampaignMonitor本身合作完成的.

希望能帮助到你.

Answer 8

仅仅内联CSS是不够的.关于如何在任何使用的电子邮件客户端中显示HTML电子邮件,没有观察到的标准.他们都采用不同的方式,你设计的电子邮件越多,它就越有可能在更多的客户端中断.这个领域的许多专业人士只使用图像和表格,也许还有一些背景颜色,但没有别的.始终包含指向具有电子邮件工作副本的网站的链接,并始终提供纯文本变体.

Answer 9

tikku的javascript解决方案:https://tikku.com/open-source/utilities/css-inline-transformer/

Answer 10

我玩游戏有点晚了，但希望这会对某人有所帮助。

我发现了这个可以嵌入页面的不错的jQuery / javascript小方法-http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery /

我已经对其进行了一些编辑，以支持IE，并且还支持以正确的顺序应用样式的附加了多个CSS文件的页面。

$(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();
        });

然后可以将该页面复制/粘贴到电子邮件正文中。