CSS Inliner in Javascript (premailer)

Question

I use CKEDITOR 4 and I want to filter a HTML content to insert the style directly in the HTML Elements like MailChimp with its CSS inliner (http://beaker.mailchimp.com/inline-css). But I have to do in Javascript must, someone an idea?

I can use jQuery and PrototypeJs.

I can't use an external API.

My test jsFiddle with CKEditor (on paste) : http://jsfiddle.net/EpokK/utW8K/7/

In :

<style>
    .test {
       outline: 1px solid red;
    }
</style>
<div class="test">Hello</div>

Out :

<div style="outline: 1px solid red;">Hello</div>

I find this solution : http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js but this trick opens a tab and it is blocked by default in Firefox ...

API solution : http://premailer.dialect.ca/

Erring

jquery css? api.jquery.com/css – Moss

#791570 – Unseal

not @Unseal because there is no solution with Javascript – Erring

Well, you can use the python or php script as a web service and replace your content. – Unseal

I can't use an external API. – Erring

Your styles are all in <style> tag on a page or there are external CSS files? – Steele

All my style is in <style> tag, why ? – Erring

Answer 1

Edit: Cleaning up my GH account from unfinished PoCs I removed the tool mentioned below, so the link leads to a 404. There's someone else's project, though, which may interest you: http://styliner.slaks.net/

---

I created simple CSS styles inliner - styliner.

It works on Firefox and Chrome. May also work on IE9+ and Safari 6, but I haven't tested it yet. This version does not need a new window - it uses iframe (so it may not work on IE - it always needs some tricks to make iframes work :).

It lacks support for CSS specificity, so at least for now, to use it, you would have to sort rules manually. But maybe I'll find some time to add this feature soon.

Homophonic

I need a single container with html and stylesheet because I want use CSS Styliner when pasting in CKEditor. – Erring

BTW. I'm still working on my styliner and in few days I should add CSS selectors specificity support. – Homophonic

Answer 2

I'm not sure if this will help but 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 the styles in the correct order. The if(rules[idx].selectorText.indexOf("hover") == -1) line is necessary because jQuery (as of 1.8) can't use the :hover selector anymore apparently.

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

Kristianson