Programatically create new CSS rules in a stylesheet

Question

For creating new CSS rules in a stylesheet, as of now, I only know .insertRule() (excluding the non-standard ways).

Are there any other ways of creating more CSS rules? Something, for example:
Warning: this is not standard, it is just an example to display the intent

var rule = new CSSStyleRule();
rule.selectorText = '.selector';
rule.style.display = 'block';
rule.style.color = 'red';
ruleSet.append(rule);

Anything like or somewhat like the above works as an answer. Instead of new, it may be document.createCssRule() or stylesheet.createCssRule()... I just this it would be useful for a piece of software I'm developing which left me if there's a programatically way of modifying values in such interface where to add new stuff is not restricted to a parsed string.

Do not worry about IE9 and below when answering, please.

Note: (to unclose) This is not about how to find and modify current CSS rules, this is about making new ones without using the text parser which is what .insertRule() is without building a complete CSS string like .insertRule() requires.

The code you posted can work as it is, if you create the associated classes: http://jsfiddle.net/8s6otsc3/ — blex, Jun 29 '15 at 22:26
@xdhmoore the .js less parser is the original. All the others are adaptations to their corresponding programming languages. — brunoais, Jun 30 '15 at 05:34
@blex Although the code is quite nice and it seems to work quite well, actually, it is against the good practices of not overloading browsers' default objects :S. I'd rather not... Regardless of that, the code is interesting. — brunoais, Jun 30 '15 at 05:38
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule Modify example 2 to suit your needs. — Shmiddty, Jul 02 '15 at 15:11
@Shmiddty not really helpful, though. It is still using `insertRule()` or string concatenation... — brunoais, Jul 02 '15 at 18:56

score 3 · Accepted Answer · answered Jun 29 '15 at 22:01

3

You can add an empty rule, get it, and modify it:

function appendRule(sheet) {
  var len = sheet.cssRules.length;
  sheet.insertRule('*{}', len);
  return sheet.cssRules[len];
}
var rule = appendRule(document.styleSheets[0]);
rule.selectorText = '.selector';
rule.style.display = 'block';
rule.style.color = 'red';

<span class="selector">I should become red.</span>
<span>I should be at the next line and not become red.</span>

However, modifying selectorText does not seem to work on Firefox.

answered Jun 29 '15 at 22:01

Oriol

274,082
63
437
513

According to the duplicate question's answer, you should use `var cssRuleCode = document.all ? 'rules' : 'cssRules';` to make it work in Firefox too. – blex Jun 29 '15 at 22:40
1

@blex I think that is for ancient IE. Firefox supports `cssRules`, but the `selectorText` setter does not seem to work. – Oriol Jun 29 '15 at 23:08
This would be the accepted answer if it wasn't for the unimplemented code on firefox's side ... – brunoais Jun 30 '15 at 10:06
Firefox has finally implemented the API – brunoais Jan 14 '19 at 12:41

score 2 · Answer 2 · answered Jun 29 '15 at 21:56

You could append a new style element to your head and just append rules to it:

function addStyle(newRules){
    if(document.getElementById("jsAddedRules")){
        document.getElementById("jsAddedRules").innerHTML+=newRules;
    }else{
        var style=document.createElement("style");
        style.setAttribure("id","jsAddedRules");
        style.innerHTML=newRules;
        document.getElementsByTagName("head")[0].appendChild(style);
    }
}

And then just call your function when you want to add rules:

addStyle(
    ".selector{\
        display:block;\
        color:red;\
    }"
);

Yeah... it works... It is not well maintainable, though. If I want to change anything, it can become a mess because I still need to retain all values used or I need to parse CSS. — brunoais, Jun 30 '15 at 10:08

Programatically create new CSS rules in a stylesheet

2 Answers2

Linked