0

I am attempting to insert a rule into a stylesheet. The rule is valid (I think) and is taken from normalize.css (https://github.com/necolas/normalize.css/blob/master/normalize.css#L206-L212) my code is:

var styleEl = document.createElement('style');
document.head.appendChild(styleEl);
var styleSheet = styleEl.sheet;
styleSheet.insertRule('button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:  none;padding:  0;}');

Chrome (75.0.3770.100) throws the error:

VM381:1 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule 'button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:  none;padding:  0;}'.
    at <anonymous>:1:12

The code above is used to insert other rules and works fine. It's just this rule that fails. Is this a malformed rule in normalize.css?

Chanan Braunstein
  • 406
  • 2
  • 10

1 Answers1

2

Although this may not be what you're looking for, the issue seems to be with Chrome. If you run this in Firefox (which is the browser what the rule is meant for), it works just fine. That being said, I suggest you do a check to make sure the browser is Firefox before adding this rule.

Something like the following could work:

if ('MozBoxSizing' in document.body.style) { // Firefox 3.2+
    styleSheet.insertRule('button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:  none;padding:  0;}');
}

The checks for other browsers can be found here

meyi
  • 7,574
  • 1
  • 15
  • 28