Posts - Stylesheets from the body tag

Stylesheets from the body tag

Unless you are a developer most CMS systems don't give you access to the head of a page. The head is where you place stylesheets to format your page. In this case we usually go with inline styles, for example:

Doing this is usually a bad idea but we can live with it. The problem is when you can't manipulate the elements either. Not to mention that your code would be bloated with inline styles and will be hard to maintain (you should be writing Unobstrusive javascript).

This plugin helps you in this -very specific- scenario. It will parse the contents of the element selected and load it as a css style. Very simple and tiny. I tested it with IE 8, Firefox 3.5 and Chrome. If you can create a .css file you are better off going that way.

The plugin is used by selecting one or more elements and calling xsolonInlineCSS.
We are assuming that the contents of the elements (val or text) will have css styles.

The implmentation is fairly simple. We get the contents of the element and attempt to parse the rules. Notice that the plugin will create a new stylesheet and then add each rule individually. We could have use cssText to load the entire css blob but it only seems to work in IE.

How to use it

<script type="text/javascript">
    $(document).ready(function() {
        $("#MyStyle").xsolonInlineCSS();
    });
</script>

<div id='MyStyle' style="display:none">
#newStyle { height: 268px; width: 279px; } 
.tryme1 { background-color:Red; color:White;
    } 
.tryme2 { background-color:Black; color:White; }
</div>

Try editing the styles!

Try editing my styles

Make me pretty too!

Plugin Code

(function($) {
$.fn.xsolonInlineCSS = function(settings) {

    return this.each(function() {

        //TODO: provide settings to set media, id etc...
        $('head').append("");

        var newStyleSheet = document.styleSheets[document.styleSheets.length - 1];

        //Raw css from the element
        var oo = $(this);            
        var text = oo.val().replace(/^\s+|\s+$/g, ""); //Trim
        if (text == '')
            text=oo.text();
        //remove line breaks
        text = text.replace(new RegExp("\\n", "g"), "");

        var pos = text.indexOf("}");

        // add one rule at a time
        while (pos > 0) {
            var rule = text.substring(0, pos + 1);
            text = text.substring(pos + 1);

            if (newStyleSheet.cssRules != null) //Firefox
                newStyleSheet.insertRule(rule, newStyleSheet.cssRules.length);
            else if (newStyleSheet.rules != null) { //IE
                var selector = rule.substring(0, rule.indexOf('{'));
                var innerStyle = rule.substring(rule.indexOf('{') + 1, rule.indexOf('}'));
                newStyleSheet.addRule(selector, innerStyle);
            }

            pos = text.indexOf("}");
        }
        //newStyleSheet.cssText = text; //Only works in IE, but cssText is still available in Firefox 
        //-> Can't use probe                                    
    }); //end main each
}; // end plugin
})($);

Published on 10/14/2009 by xsolon
Comments | Trackback Url | 0 Links to this post | Bookmark this post with: