Widely available Supported across all major browsers. Safe to use in production.

Constructed stylesheets

The CSSStyleSheet() constructor creates a new CSSStyleSheet object which represents a single Stylesheet.

After constructing a stylesheet the CSSStyleSheet.replace(), CSSStyleSheet.replaceSync(), CSSStyleSheet.insertRule(), and CSSStyleSheet.deleteRule() methods can be used to modify the rules of the new stylesheet.

A stylesheet created using this method is referred to as a "constructed stylesheet". A constructed stylesheet can be shared between a document and its shadow DOM subtrees using ShadowRoot.adoptedStyleSheets and Document.adoptedStyleSheets.

Web Components

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CSSStyleSheet
73
79
101
16.4
73
16.4
CSSStyleSheet (options baseURL parameter)

`options.baseURL` parameter
101
16.4
16.4
replace

The replace() method of the CSSStyleSheet interface asynchronously replaces the content of the stylesheet with the content passed into it. The method returns a promise that resolves with the CSSStyleSheet object.
73
79
101
16.4
73
16.4
replaceSync

The replaceSync() method of the CSSStyleSheet interface synchronously replaces the content of the stylesheet with the content passed into it.
73
79
101
16.4
73
16.4
adoptedStyleSheets

The adoptedStyleSheets property of the Document interface is used for setting an array of constructed stylesheets to be used by the document.
73
79
101
16.4
73
16.4
adoptedStyleSheets

The adoptedStyleSheets property of the ShadowRoot interface sets an array of constructed stylesheets to be used by the shadow DOM subtree.
73
79
101
16.4
73
16.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Before Firefox 121, when calling `replace()` repeatedly, the style is applied, but the change is not reflected in the CSS Object Model. See bug 1864815.

Syntax

JAVASCRIPT 
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);

Use cases

  • Using Constructed stylesheets

    The CSSStyleSheet() constructor creates a new CSSStyleSheet object which represents a single Stylesheet.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links