CSSStyleSheet
=============

**`CSSStyleSheet`** インターフェイスは、1 枚の CSS スタイルシートを表し、そのスタイルシートに含まれるルールのリストを調べたり変更したりすることができます。これは、その親の `StyleSheet` からプロパティとメソッドを継承しています。

StyleSheet

CSSStyleSheet
スタイルシートは、そのスタイルシート内のそれぞれのルールを表す一連の `CSSRule` オブジェクトの集合から成ります。それらのルールには `CSSRuleList` があり、これはそのスタイルシートの `cssRules` プロパティから取得することができます。

例えば、1 つの `CSSStyleRule` オブジェクトが保持するスタイルは次のようなものです。


```css
h1,
h2 {
  font-size: 16pt;
}
```


他にもアットルール、例えば `@import` や `@media` になることもあります。

スタイルシートの取得の節で `CSSStyleSheet` オブジェクトを取得するための様々な方法について説明しています。`CSSStyleSheet` オブジェクトは直接構築することもできます。コンストラクターと `CSSStyleSheet.replace()`, `CSSStyleSheet.replaceSync()` メソッドは新しい追加仕様で、スタイルシートの構築を行うことができます。

コンストラクター
--------

`CSSStyleSheet()`

新しい `CSSStyleSheet` オブジェクトを生成します。

インスタンスプロパティ
-----------

*親である `StyleSheet` からプロパティを継承しています。*

* `CSSStyleSheet.cssRules` 読取専用 
    + : 生きた `CSSRuleList` を返します。これは、スタイルシートを構成する `CSSRule` オブジェクトの最新リストを維持します。
**メモ:** 一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれた場合、`cssRules` にアクセスすると `SecurityError` が発生します。
* `CSSStyleSheet.ownerRule` 読取専用 
    + : これが `@import` ルールを使用して文書にインポートされたスタイルシートである場合、`ownerRule` は、その `CSSImportRule` を返します。そうでない場合、`null` を返します。
インスタンスメソッド
----------

*親である `Stylesheet` からメソッドを継承しています。*

`CSSStyleSheet.deleteRule()`

スタイルシートから、指定した位置のルールを削除します。

`CSSStyleSheet.insertRule()`

スタイルシート内の指定した位置に、テキスト表現で与えられた新しいルールを挿入します。

`CSSStyleSheet.replace()`

非同期にスタイルシートの内容を置き換え、更新された `CSSStyleSheet` で解決する `Promise` を返します。

`CSSStyleSheet.replaceSync()`

同期的にスタイルシートのコンテンツを置き換えます。

古いプロパティ
-------

*これらのプロパティは、Microsoft が導入した古いプロパティで、既存のサイトとの互換性を保つために維持されています。*

`rules` 読取専用  
非推奨

`rules` プロパティは機能的に標準の `cssRules` プロパティと同等です。生きた `CSSRuleList` を返します。これは、スタイルシートを構成するすべてのルールの最新リストを維持します。

古いメソッド
------

*これらのメソッドは、Microsoft が導入した古いメソッドであり、既存のサイトとの互換性を保つために維持されています。*

`addRule()` 
非推奨

スタイルシートに、スタイルが適用されるセレクターと、一致する要素に適用するスタイルブロックを指定して、新しいルールを追加します。

これは、単一の文字列としてルール全体のテキスト表現を取る `insertRule()` とは異なります。

`removeRule()` 
非推奨

機能的には `deleteRule()` と等しく、このスタイルシートのルールリストから指定された位置のルールを削除します。

スタイルシートの取得
----------

スタイルシートは、多くても 1 つの `Document` と関連付けられ、これに適用されます（disabled でない限り）。指定された文書の `CSSStyleSheet` オブジェクトのリストは、`Document.styleSheets` プロパティを使用して取得できます。それぞれのスタイルシートは、もしあれば、そのオーナーオブジェクト（`Node` または `CSSImportRule`）からもアクセスできます。

`CSSStyleSheet` オブジェクトは、文書でスタイルシートが読み込まれた時に、ブラウザーによって自動的に作成され、その文書の `Document.styleSheets` リストに挿入されます。

スタイルシートを文書と関連付ける方法のリスト（おそらく不完全）は次のとおりです。

| スタイルシートが文書と関連付けられる理由 | `document.styleSheets` リストに出現 | 指定されたスタイルシートオブジェクトのオーナー要素/ルールの取得 | オーナーオブジェクトのインターフェイス | オーナーからの CSSStyleSheet オブジェクトの取得 |
| --- | --- | --- | --- | --- |
| 文書内の `<style>` および `<link>` 要素 | はい | `.ownerNode` | `HTMLLinkElement`、`HTMLStyleElement`、`SVGStyleElement` (en-US) の何れか | `HTMLLinkElement.sheet`、`HTMLStyleElement.sheet`、`SVGStyleElement.sheet` (en-US) の何れか |
| 
 文書に適用された他のスタイルシート内の CSS `@import` ルール
 the document
  | はい | `.ownerRule` | `CSSImportRule` | `.styleSheet` |
| （HTML でない）文書の `<?xml-stylesheet ?>` 処理命令 | はい | `.ownerNode` | `ProcessingInstruction` | `.sheet` |
| HTTP の Link ヘッダー | はい | *なし* | なし | なし |
| （既定の）ユーザーエージェントスタイルシート | いいえ | なし | なし | なし |

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssstylesheet-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS オブジェクトモデル
* 動的なスタイル情報の利用