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

StackOverflow https://stackoverflow.com/questions/791070

Question

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 ?

Was it helpful?

Solution

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

OTHER TIPS

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

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

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

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.

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)

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

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.

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.

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.

Another one from mailchimp - http://beaker.mailchimp.com/inline-css

For PHP programmers: check this online converter or this PHP script to do it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top