1

I read this link where Cristoph make a function to add a style sheet. I think it's a brilliant idea but doesn't work properly. Example:

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
        function createStyleSheet(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }

            document.getElementsByTagName('head')[0].appendChild(element);
            var sheet = document.styleSheets[document.styleSheets.length - 1];

            if(typeof sheet.addRule === 'undefined')
                sheet.addRule = addRule;

            if(typeof sheet.removeRule === 'undefined')
                sheet.removeRule = sheet.deleteRule;

            return sheet;
        }

        function addRule(selectorText, cssText, index) {
            if(typeof index === 'undefined')
                index = this.cssRules.length;

            this.insertRule(selectorText + ' {' + cssText + '}', index);
        }

        return createStyleSheet;
    })();
}

document.createStyleSheet( 'css/test.css' );
var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
console.log( sheet );

When I add external file and, then, add style sheet without name, the function doesn't work properly at least in chrome. In sheet variable is stored a default style sheet of chrome:

CSSStyleSheet {rules: CSSRuleList, cssRules: CSSRuleList, ownerRule: null, media: MediaList, title: null…}
cssRules: CSSRuleList
0: CSSStyleRule
1: CSSStyleRule
2: CSSStyleRule
3: CSSStyleRule
...
627: CSSStyleRule
628: CSSStyleRule
length: 629
__proto__: CSSRuleList
disabled: false
href: null
media: MediaList
ownerNode: style
ownerRule: null
parentStyleSheet: null
rules: CSSRuleList
title: null
type: "text/css"
__proto__: CSSStyleSheet

I don't know why this problem occurs. Does anyone know it?

Edit.: to clarify a concept of source code.

Thanks!

Community
  • 1
  • 1
xgbuils
  • 115
  • 1
  • 9
  • Are you calling createStyleSheet with or without an argument? Can you put up a fiddle? – janfoeh Dec 11 '13 at 14:13
  • 2
    This is probably not a good idea, as the style sheet will be embedded in the HTML sent to the browser and therefore unlikely to leverage caching, compression, questionable re-usability and making it a maintenance nightmare Sorry for not answering your question. – Kane Dec 11 '13 at 14:13
  • @janfoeh: I calling createStyleSheet with **and** without argument. Only calling with or only calling without, createStyleSheet works. – xgbuils Dec 11 '13 at 14:26
  • 1
    @Kane this could be quite a performance win. If you have to restyle large amounts of DOM nodes at once dynamically (ie., in a way that cannot be done by attaching a predefined class to a parent), setting one style rule should be far quicker than manually traversing and manipulating them individually. – janfoeh Dec 11 '13 at 14:30

0 Answers0