Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Constructed stylesheets

CSSStyleSheet() コンストラクターは、新しい CSSStyleSheet オブジェクトを生成します。これは、単一のスタイルシートを表します。

スタイルシートを構築した後は、CSSStyleSheet.replace()、CSSStyleSheet.replaceSync()、CSSStyleSheet.insertRule()、CSSStyleSheet.deleteRule() の各メソッドを使用して、新しいスタイルシートのルールを変更することができます。

このメソッドを使用して生成されたスタイルシートは「構築スタイルシート」(constructed stylesheet) と呼ばれます。 構築スタイルシートは、 ShadowRoot.adoptedStyleSheets および Document.adoptedStyleSheets を使用して文書やそのシャドウ DOM サブツリー間で共有することができます。

Web Components

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CSSStyleSheet
73
79
101
16.4
73
16.4
CSSStyleSheet (options baseURL parameter)

`options.baseURL` パラメータ
101
16.4
16.4
replace

replace() は CSSStyleSheet インターフェイスのメソッドで、スタイルシートの内容を渡された内容で非同期に置き換えます。このメソッドは CSSStyleSheet オブジェクトで解決されるプロミスを返します。
73
79
101
16.4
73
16.4
replaceSync

replaceSync() は CSSStyleSheet インターフェイスのメソッドで、スタイルシートの内容を渡された内容で同期的に置き換えます。
73
79
101
16.4
73
16.4
adoptedStyleSheets

adoptedStyleSheets は Document インターフェイスのプロパティで、この文書で使用する構築されたスタイルシートの配列を設定するために使用します。
73
79
101
16.4
73
16.4
adoptedStyleSheets

adoptedStyleSheets は ShadowRoot インターフェイスのプロパティで、構築されたスタイルシートの配列を設定し、シャドウ DOM サブツリーで使用します。
73
79
101
16.4
73
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 121 以前のバージョンでは、`replace()` を繰り返し呼び出すと、スタイルは適用されるものの、その変更が CSS オブジェクトモデルに反映されませんでした。バグ 1864815 を参照してください。

基本構文

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

実務での使いどころ

  • Constructed stylesheets の活用

    CSSStyleSheet() コンストラクターは、新しい CSSStyleSheet オブジェクトを生成します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク