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

问题

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.

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 ?

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

回答1:

Check the premailer.dialect.ca online converter or this Python script to do it.

回答2:

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...

Campaign Monitor
Mailchimp
Premailer
Inline Styler
Emogrifier
MailerMailer
Tikku
Mally

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

CSS Out

回答3:

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

回答4:

Two C# variants:

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

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

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

回答5:

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

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

回答6:

You might want to take a look at 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.

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

回答7:

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.

Hope it helps.

回答8:

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.

回答9:

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/

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.

$(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.