CODEWITHSUNDEEP
jquerycss
MrVimes
MrVimes

Reputation: 3312

Copying CSS to inline using jquery (or retaining formatting when copying stuff from a web page)

I could probably muddle through the code for this, but before I do I thought I'd ask if there's a quick and/or built-in way or plugin for this...

Given a table with a css class applied to it, the class definition being in an external style sheet (with styles applied to th, tr, and td) I want to move OR copy that css to the style attribute of the tags themselves. In other words I want to make the CSS inline.

Reason: People who use these pages sometimes copy and paste the tables into emails. If they do this on a table with externally-sourced CSS the pasted table has lost all formatting. If the css is inline the formatting is retained.

I have already done this in a rough-and-ready way by simply applying duplicated css to the table using $().css(); function, but this is not ideal. If I ever changed the css in the style sheet I'd also have to change the CSS in this part on every single page that has this style of table

Something like $('.mytable').makeCSSInline(); would be an ideal function - if it existed :)

edit: Just for clarification: I don't think the copy/paste will retain the css if it's in an internal style sheet (copied using the .load function).. It has to be fully inline (in the style attribute of each tag that has a style associated with it).

Also, I'm copying from firefox to outlook (so from non-microsoft to microsoft)

Upvotes: 19

Views: 10627

Answers (6)

Arsen K.
Arsen K.

Reputation: 5660

All solutions, that I've found, was not good enough for me. Here's my own one. When using this, please keep in mind the following:

  1. this presumes, that we have all our css styles in an external file, that has an id "#main-css-file".
  2. declaration !important has no effect: such rules are processed in the same way with ordinary ones.
  3. the algorithm is the following: a) save existing inline styles, if they exist; b) apply external css rules; c) restore saved inline styles.

Here we go:

var content = $('#selector');

// preserve existing inline styles
content.find('[style]').each( function() {
    var that = $(this);
    that.attr( 'data-inline-css', that.attr('style') );
});

// get external css rules and iterate over all of them
var extCssFile  = $('#main-css-file')[0].sheet,
    extCssRules = extCssFile.cssRules;
for ( var i = 0; i < extCssRules.length; i++ ) {
    var extCssRule     = extCssRules[i].cssText,
        extCssSelector = $.trim( extCssRule.substring( 0, extCssRule.indexOf('{') ) ),
        extCssProps    = $.trim( extCssRule.substring( extCssRule.indexOf('{') + 1, extCssRule.indexOf('}') ) );

    // we omit all rules, containing useless/unsupported pseudo classes
    // and also make sure,that we have at least 1 element, matching current selector
    if ( extCssSelector.indexOf(':after') == -1 &&
        extCssSelector.indexOf(':before') == -1 &&
        content.find( extCssSelector ).length
    ) {

        // create array of css properties
        extCssProps = extCssProps.split(';');
        // remove the last array item, if it's empty
        if ( $.trim( extCssProps[ extCssProps.length - 1 ] ) == '' ) {
            extCssProps.pop();
        }

        // iterate over each tag withing content
        content.find( extCssSelector ).each( function() {
            var that = $(this);
            // add css from file
            for ( var a = 0; a < extCssProps.length; a++ ) {
                // split rule on ":", but not on "://", that is a part of url protocol
                var style = extCssProps[a].split(/:(?!\/\/)/),
                    prop  = $.trim( style[0] ),
                    val   = $.trim( style[1] );
                // jQuery doesn't understand css "!important" - remove it
                if ( val.indexOf('important') != -1 ) {
                    val = $.trim( val.replace( '!', '' ).replace( 'important', '' ) );
                }
                that.css( prop, val );
            }
        });
    }
}

// restore inline css, that already existed before applying external css
content.find('[data-inline-css]').each( function() {
    var that = $(this),
        inlCssProps = that.attr('data-inline-css').split(';');
    if ( $.trim( inlCssProps[ inlCssProps.length - 1 ] ) == '' ) {
        inlCssProps.pop();
    }
    for ( var i = 0; i < inlCssProps.length; i++ ) {
        var style = inlCssProps[i].split(/:(?!\/\/)/),
            prop  = $.trim( style[0] ),
            val   = $.trim( style[1] );
        that.css( prop, val );
    }
    that.removeAttr('data-inline-css');
});

Upvotes: 0

Romain
Romain

Reputation: 51

I had the same problem, I wanted to get all css inline for email compatibility, I found a great jQuery plugin

https://github.com/Karl33to/jquery.inlineStyler

I know it's a bit late for this question, but it's a very easy solution.

$('.mytable').inlineStyler();

Hope it might help

Upvotes: 4

fearis
fearis

Reputation: 499

Use plain JavaScript for this :

$('.mytable').style.cssText;

Your welcome ;]

ps. same for adding inline css:

$('.mytable').style.cssText = "border:1px solid red;";

Upvotes: 0

Felix Eve
Felix Eve

Reputation: 3864

Mailchimp has an online tool for this:

http://templates.mailchimp.com/resources/inline-css/

Just paste in your HTML with CSS in the head and it will spit it out with inline styles.

Upvotes: 5

illvm
illvm

Reputation: 1346

This isn't exactly perfect but I think it's pretty close to what you're looking for.

(function($) {
    $.extend($.fn, {
        makeCssInline: function() {
            this.each(function(idx, el) {
                var style = el.style;
                var properties = [];
                for(var property in style) { 
                    if($(this).css(property)) {
                        properties.push(property + ':' + $(this).css(property));
                    }
                }
                this.style.cssText = properties.join(';');
                $(this).children().makeCssInline();
            });
        }
    });
}(jQuery));

Then you'd just call it with:

$('.selector').makeCssInline();

Upvotes: 18

hunter
hunter

Reputation: 63512

I would do a jquery load() and dump it into a style tag

$("style").load("css/site.css", function() {
    alert('Load was performed.');
});

or if you don't want to have to have an empty style tag to populate you can do this:

$("head").append("<style></style>");
$("head style:last").load("<%=ResolveUrl("~/") %>_res/c/site.css", function() {
   alert('Load was performed.');
});

Upvotes: 3

Related Questions