CSSStyleSheet: CSSStyleSheet() コンストラクター

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

構文

js
new CSSStyleSheet()
new CSSStyleSheet(options)

引数

options 省略可

以下のものを持つオブジェクトです。

baseURL 省略可

スタイルシートの相対 URL の解決に用いる baseURL を格納した文字列。

media 省略可

メディアルールのリストを含む MediaList、または単一のルールを含む文字列。

disabled 省略可

論理値で、スタイルシートが無効かどうかを示します。既定で false になります。

例

次の例では、新しい CSSStyleSheet が "print" というメディアルールで構築されています。 コンソールで StyleSheet.media を表示すると、このプリントルールの単一の項目を持つ MediaList が返されます。

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

スタイルシートのシャドウ DOM との共有

次のコードは、シートを構築し、CSSStyleSheet.replaceSync() を呼び出して、シートにルールを追加する様子を表します。

js
// 空の「構築」スタイルシートを生成
const sheet = new CSSStyleSheet();
// シートにルールを適用
sheet.replaceSync("a { color: red; }");

そして、ShadowRoot を作成し、このシートオブジェクトを配列内の ShadowRoot.adoptedStyleSheets プロパティに渡しています。

js
// 文書内に要素を作成し、シャドウルートを作成する
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });

//シートをシャドウ DOM に導入
shadow.adoptedStyleSheets = [sheet];

配列に追加した後のスタイルシートは変更することができます。 次の例では、CSSStyleSheet.insertRule() を使用して、同じシートに新しいルールを追加しています。

js
sheet.insertRule("* { background-color: blue; }");
// これで、文書の背景が青色になる

同じ文書内の複数のシャドウサブツリーで同じシートを共有することができます。 それ以外の例は、ShadowRoot.adoptedStyleSheets を参照してください。

仕様書

Specification
CSS Object Model (CSSOM)
# dom-cssstylesheet-cssstylesheet

ブラウザーの互換性

BCD tables only load in the browser

関連情報