This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
The insertRule() method of the CSSGroupingRule interface adds a new CSS rule to a list of CSS rules.
insertRule(rule) insertRule(rule, index)
ruleA string
index OptionalAn optional index at which to insert the rule; defaults to 0.
The index of the new rule.
IndexSizeError DOMException
Thrown if index is greater than the number of child CSS rules.
HierarchyRequestError DOMException
Thrown if rule cannot be inserted at the specified index due to some CSS constraint.
HierarchyRequestError DOMException
Thrown if the rule is a valid statement but not a nested statement.
let myRules = document.styleSheets[0].cssRules;
myRules[0].insertRule(
"html {background-color: blue;}",
0,
); /* inserts a rule for the HTML element at position 0 */
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
insertRule |
45 | 12 | 20 | 32 | 3 | 45 | 20 | 32 | 2 | 5.0 | 45 | 2 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSGroupingRule/insertRule