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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/791070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:39:49  来源:igfitidea点击:

What tools to automatically inline CSS style to create email HTML code?

htmlcssemailinlinehtml-email

提问by Pierre-Jean Coudert

When you take a look at http://www.campaignmonitor.com/css/you learn that you need to embed inline styles in your HTML, in order for your email to be read in any mail client.

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

Do you know any tools or script to automatically convert an HTML file with a declared in to an HTML file with only inline CCS style attributes ?

您知道有什么工具或脚本可以将带有声明的 HTML 文件自动转换为只有内联 CCS 样式属性的 HTML 文件吗?

Edit: Any Javascript solution ( ie: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/) ? With jQuery ?

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

采纳答案by Saleh Al-Zaid

Check the premailer.dialect.caonline converter or this Python scriptto do it.

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

回答by John

Here is a list of web based ready to use inlining tools, a couple have been mentioned previously. If there are any I've missed, feel free to edit and add them. I can't promise each works as advertised, so drop comments, but don't shoot the messenger...

这是一个基于 Web 的即用型内联工具列表,前面已经提到了几个。如果有任何我遗漏的地方,请随时编辑和添加它们。我不能保证每个作品都像广告一样,所以请留下评论,但不要拍摄信使......

And here is one that works in reverse (un-inlining your css)

这是一种反向工作(取消内联您的 css)

回答by chiborg

If you'd like to have a PHP solution, you can try CssToInlineStyles.

如果你想要一个 PHP 解决方案,你可以尝试CssToInlineStyles

回答by GFoley83

Two C# variants:

两个 C# 变体:

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

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

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

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

Haven't tested either as of yet but will post back if/when I do.

到目前为止还没有测试过,但如果/当我测试时会发回。

回答by SLaks

I wrote a Node.js library called Stylinerthat inlines CSS in server-side Javascript.

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

It supports LESS stylesheets as well (and supports plugins for other formats)

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

回答by JonLim

You might want to take a look at PostageApp.

您可能想看看PostageApp

One of its really strong features is that it has a very robust templating system that can automatically inline HTML and CSS without any issues.

它真正强大的功能之一是它有一个非常强大的模板系统,可以自动内联 HTML 和 CSS,没有任何问题。

(Full Disclosure:I am the Product Manager for PostageApp.)

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

回答by John C

I'm a little late to the game but hopefully this will help someone.

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

I found this nice little jQuery/javascript method that can be embedded into a page - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

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

I've edited it a little to support IE and also to support a page with multiple CSS files attached applying styles in the correct order.

我对它进行了一些编辑以支持 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();
        });

The page can then be copy/pasted into the email body.

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

回答by André Armenni

This may be a little too late, but if you want to make your HTML the best possible for e-mail marketing (by inlining your css, and using a bunch of other cool tools), use the Premailer. Its free, and of course, made in partnership with CampaignMonitor itself.

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

Hope it helps.

希望能帮助到你。

回答by Bjorn

It's not enough to simply inline your CSS. There are no observed standards as to how an HTML email will be shown in whatever email client is used. They all do it differently, and the more you design your email the more likely it is that it will break in a greater amount of clients. Many professionals in this space simply use images and tables and maybe some background colors, but nothing else. Always include a link to a website that has a working copy of the email and always provide a plain text variant.

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

回答by EpokK

A javascript solution by tikku here : https://tikku.com/open-source/utilities/css-inline-transformer/

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