Why Chrome cannot access to external stylesheet using insertRule with Javascript?

Question

I have a HTML file, and linked in the head, an external stylesheet, and both of them are in the same folder. There are only one stylesheet. In the bottom of the body, i have a script:

document.styleSheets[0].insertRule(".example{position: relative}", 0);

But i get this error message (suprisingly only on Chrome 64, on FireFox, Safari mobile and Chrome mobile works well):

Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

Why?

Answer 1

Change the index for your insert. In CSS files all @ Rules must be at the top of the file. So, if you have 4 @ rules at the top of the CSS file, change the index to 4 thus:

document.styleSheets[0].insertRule(".example{position: relative}", 4);

That should work.

Here is the spec reference (see the note):

https://drafts.csswg.org/cssom/#insert-a-css-rule