CSS オブジェクトモデル (CSSOM)

1. はじめに

この文書は、CSS オブジェクトモデル (CSSOM) の中核機能を正式に規定します。 CSSOM 仕様群の他の文書 およびその他の CSS 関連仕様は、これらの中核機能の拡張を定義します。

CSSOM の中核機能は、作者が定義したスクリプトに基本的な機能を提供し、 スタイルに関連する状態情報およびプロセスへのアクセス と操作を可能にすることを目的としています。

以下で定義する機能は、主として W3C DOM 作業グループの以前の仕様、 特に [DOM] に基づいています。この文書の目的は、 (1) より技術的に明確にすることによって以前の成果を改善し （テスト可能性および相互運用性を向上させるため）、(2) 実装が比較的普及しておらず、 この文脈ではもはや不可欠とはみなされない 特定の機能を非推奨または削除し、(3) 広く実装されている か、広く実装されることが 予想される特定の拡張を新たに規定することです。

2. 用語

この仕様では、次の文書に由来する特定の用語を使用します: DOM、 HTML、CSS 構文、エンコーディング、URL、Fetch、 スタイルシートと XML 文書の関連付けおよびXML。 [DOM] [HTML] [CSS3SYN] [ENCODING] [URL] [FETCH] [XML-STYLESHEET] [XML]

この仕様で、A が実際にはインターフェイスである場合にオブジェクト A について 言及するとき、通常はインターフェイス A を実装するオブジェクトを意味します。

設定済みおよび未設定という用語は、バイナリフラグまたは変数の true および false の値をそれぞれ指します。これらの用語は動詞としても使用され、その場合は、 ある値を それぞれ true または false に変更することを指します。

サポートされる スタイル言語という用語は、CSS を指します。

注: ユーザーエージェントで別のスタイル言語がサポートされるようになった場合、 必要に応じてこの仕様が更新されることが想定されています。

サポートされる CSS プロパティという用語は、ベンダー接頭辞付きプロパティを含み、カスタム プロパティを除く、ユーザーエージェントが実装する CSS プロパティを指します。この仕様で 比較するために、サポートされる CSS プロパティは小文字形式で なければなりません。

この仕様では、::before および ::after 擬似要素は、 ボックスが生成されない場合でも、すべての要素に存在するとみなされます。

あるメソッドまたは属性が別のメソッドまたは属性を呼び出すとされている場合、ユーザーエージェントは、 作者が ECMAScript のカスタムプロパティまたは関数で属性やメソッドを上書きして 動作を変更できないように、その属性またはメソッドの内部 API を呼び出さなければなりません。

特に明記されていない限り、文字列の比較は大文字小文字を区別する方法で行われます。

2.1. 一般的な直列化の慣用表現

文字をエスケープするとは、 「\」(U+005C) の後にその文字を続けた 文字列を作成することです。

文字をコードポイントとしてエスケープするとは、 「\」(U+005C) の後に、そのコードポイントを 16 進数で表すために必要な最小桁数の 0-9 a-f の範囲の 16 進数字 (U+0030 から U+0039 および U+0061 から U+0066) で Unicode コードポイントを続け、 さらに単一の SPACE (U+0020) を続けた文字列を作成することです。

識別子を 直列化するとは、識別子の各文字について次の結果を 連結して表される文字列を作成することです:

• 文字が NULL (U+0000) の場合、REPLACEMENT CHARACTER (U+FFFD)。
• 文字が [\1-\1f] (U+0001 から U+001F) の範囲にあるか U+007F の場合、その文字をコードポイントとしてエスケープしたもの。
• 文字が先頭文字であり、[0-9] (U+0030 から U+0039) の範囲にある場合、その文字をコードポイントとしてエスケープしたもの。
• 文字が2番目の文字であり、[0-9] (U+0030 から U+0039) の範囲にあり、先頭文字が「-」 (U+002D) である場合、その文字をコードポイントとしてエスケープしたもの。
• 文字が先頭文字であり、「-」(U+002D) で、 2番目の文字が存在しない場合、 その文字をエスケープしたもの。
• 上記のいずれの規則でも処理されず、 U+0080 以上であるか、「-」(U+002D) または 「_」(U+005F) であるか、[0-9] (U+0030 から U+0039)、[A-Z] (U+0041 から U+005A)、または \[a-z] (U+0061 から U+007A) のいずれかの範囲にある場合、その文字 そのもの。
• それ以外の場合、その文字をエスケープしたもの。

文字列を直列化するとは、 '"' (U+0022) の後に、指定された文字列の各文字へ 以下の規則を適用した結果を続け、さらに '"' (U+0022) を続けて表される文字列を作成することです:

• 文字が NULL (U+0000) の場合、REPLACEMENT CHARACTER (U+FFFD)。
• 文字が [\1-\1f] (U+0001 から U+001F) の範囲にあるか U+007F の場合、その文字をコードポイントとしてエスケープしたもの。
• 文字が '"' (U+0022) または「\」 (U+005C) の場合、その文字をエスケープしたもの。
• それ以外の場合、その文字そのもの。

注: 文字列は常に '"' (U+0022) を使用して直列化されるため、 「'」(U+0027) はエスケープされません。

URL を直列化するとは、 「url(」の後に、URL を文字列として 直列化したものを続け、 さらに「)」を続けて表される文字列を作成することです。

LOCAL を直列化するとは、 「local(」の後に、LOCAL を文字列として 直列化したものを続け、 さらに「)」を続けて表される文字列を作成することです。

コンマ区切り リストを直列化するには、リスト内のすべての項目を リスト順に「, 」、すなわち COMMA (U+002C) とそれに続く単一の SPACE (U+0020) で区切りながら連結します。

空白区切り リストを直列化するには、 リスト内のすべての 項目をリスト順に「 」、すなわち 単一の SPACE (U+0020) で区切りながら連結します。

注: 上記の規則に従ってリストを直列化する場合、 最初の項目の前または最後の項目の後に余分な空白は 挿入されません。特に指定されていない限り、空のリストは 空文字列として直列化されます。

3. CSSOMString

CSSOM インターフェイス内のほとんどの文字列は、CSSOMString 型を使用します。 各実装は、これを USVString または DOMString のいずれとして定義するかを選択します:

typedef USVString CSSOMString;

または、代わりに:

typedef DOMString CSSOMString;

4. メディアクエリ

メディアクエリは、[MEDIAQUERIES] で定義されています。この 節では、API および直列化形式を含む、メディアクエリに関するさまざまな概念を定義します。

4.1. メディアクエリの構文解析

指定された文字列 s をメディアクエリ リストへ構文解析する方法は、 メディアクエリ仕様で定義されています。そこで定義されたアルゴリズムが生成する メディアクエリのリストを 返します。

注: 最終的に「無視される」メディアクエリは、 「not all」になります。

指定された文字列 s をメディア クエリとして構文解析するとは、メディアクエリリストを構文解析する 手順に従い、複数のメディアクエリが 返された場合は null を返し、単一の メディアクエリが返された場合はそのメディアクエリを返すことです。

注: 繰り返しますが、最終的に「無視される」メディアクエリは、 「not all」になります。

4.2. メディアクエリの直列化

メディアクエリ リストを直列化するには、次の手順を実行します:

1. メディアクエリリストが空の場合、空文字列を返します。
2. メディアクエリリスト内に現れる順序と同じ順序で、メディアクエリのリスト内の各メディアクエリを直列化し、 その後、メディア クエリリストを直列化します。

メディア クエリを直列化するには、s を空文字列とし、次の手順を実行します:

1. メディアクエリが否定されている場合、「not」と、それに続く 単一の SPACE (U+0020) を s に追加します。
2. type を、メディアクエリのメディアタイプを 識別子として 直列化し、ASCII 小文字に変換したものとします。
3. メディアクエリにメディア 特性が含まれていない場合、type を s に追加し、 s を返します。
4. type が「all」ではない場合、または メディアクエリが否定されている場合、type、単一の SPACE (U+0020)、「and」、単一の SPACE (U+0020) の順で s に追加します。
5. 次に、各メディア特性について:
   1. 「(」(U+0028)、メディア 特性名をASCII 小文字に変換したものの順で、 s に追加します。
   2. 値が指定されている場合、「:」(U+003A)、単一の SPACE (U+0020)、直列化されたメディア特性値の順で、 s に追加します。
   3. 「)」(U+0029) を s に追加します。
   4. これが最後のメディア 特性でない場合、単一の SPACE (U+0020)、 「and」、単一の SPACE (U+0020) の順で s に追加します。
6. s を返します。

not screen and (min-WIDTH:5px) AND (max-width:40px)

not screen and (min-width: 5px) and (max-width: 40px)

all and (color) and (color)

(color) and (color)

4.2.1. メディア特性値の直列化

結局のところメディア特性は CSS 値によって定義されるため、これはおそらく CSS 値の直列化へのマッピングという形で 行うべきです。

v という名前のメディア 特性値を直列化するには、下の表の第1列で v を見つけ、 第2列に記載された 直列化形式を使用します:

他の仕様はこの表を拡張でき、ベンダー接頭辞付きメディア 特性も独自の直列化形式を持つことができます。

4.3. メディアクエリの比較

m1 と m2 のメディア クエリを比較するとは、両方を直列化し、 大文字小文字を区別する一致であれば true を返し、そうでなければ false を 返すことです。

4.4. MediaList インターフェイス

MediaList インターフェイスを実装するオブジェクトには、関連付けられたメディアクエリのコレクションがあります。

[Exposed=Window]
interface MediaList {
  stringifier attribute [LegacyNullToEmptyString] CSSOMString mediaText;
  readonly attribute unsigned long length;
  getter CSSOMString? item(unsigned long index);
  undefined appendMedium(CSSOMString medium);
  undefined deleteMedium(CSSOMString medium);
};

このオブジェクトのサポートされるプロパティインデックスは、 コレクションによって表されるメディアクエリのコレクション内のメディアクエリ数について、 0 からその数より1小さい値までの範囲の数値です。そのようなメディアクエリがない場合、サポートされるプロパティインデックスはありません。

文字列 text を使用して MediaList オブジェクトを作成するには、次の手順を実行します:

1. 新しい MediaList オブジェクトを作成します。
2. その mediaText 属性を text に設定します。
3. 新しく作成した MediaList オブジェクトを返します。

mediaText 属性は、取得時にメディアクエリのコレクションを直列化したものを返さなければなりません。 mediaText 属性を設定する際は、次の手順を実行しなければなりません:

1. メディアクエリのコレクションを空にします。
2. 指定された値が空文字列の場合、返ります。
3. 指定された値を構文解析した結果として得られるすべてのメディアクエリを、 メディアクエリのコレクションに追加します。

item(index) メソッドは、メディアクエリのコレクション内で index によって指定されるメディアクエリを直列化したものを返さなければなりません。ただし、index が メディアクエリのコレクション内のメディアクエリ数以上の場合は null を返します。

length 属性は、メディアクエリの コレクション内のメディアクエリ数を返さなければなりません。

appendMedium(medium) メソッドは、次の 手順を実行しなければなりません:

1. m を、指定された値を構文解析した結果とします。
2. m が null の場合、返ります。
3. m とメディアクエリのコレクション内のいずれかのメディアクエリを 比較して true が返された場合、 返ります。
4. m をメディアクエリのコレクションに追加します。

deleteMedium(medium) メソッドは、次の 手順を実行しなければなりません:

1. m を、指定された値を構文解析した結果とします。
2. m が null の場合、返ります。
3. メディアクエリのコレクションから、 そのメディアクエリと m を比較すると true が返されるすべてのメディアクエリを削除します。 何も削除されなかった場合、NotFoundError 例外をスローします。

5. セレクター

セレクターは Selectors 仕様で定義されています。この節では主に、 セレクターを直列化する方法を定義します。

5.1. セレクターの構文解析

セレクターのグループを 構文解析するとは、Selectors 仕様で定義された selectors_group 生成規則を使用して値を構文解析し、 構文解析が失敗しなかった場合はセレクターのグループを、 失敗した場合は null を 返すことです。

5.2. セレクターの直列化

セレクターの グループを直列化するには、セレクターのグループ内の各セレクターを直列化し、 その後、それらの直列化結果の コンマ区切りリストを直列化します。

セレクターを 直列化するには、s を空文字列とし、セレクターの連鎖の各部分について次の手順を実行して、 最後に s を返します:

1. 複合セレクター内に 単純セレクターが1つしかなく、それが全称セレクターである場合、その全称セレクターを直列化した結果を s に追加します。
2. それ以外の場合、デフォルト名前空間ではない名前空間にマッピングされる名前空間接頭辞を持つ全称セレクターではない、 複合セレクター内の各単純セレクターについて、その 単純セレクターを直列化し、 その結果を s に追加します。
3. これがセレクターの連鎖の最後の部分でない場合、単一の SPACE (U+0020) と、それに続く適切な結合子 「>」、 「+」、 「~」、 「>>」、 「||」、 さらに結合子が空白でなかった場合は別の単一の SPACE (U+0020) を s に追加します。
4. これがセレクターの連鎖の最後の部分であり、 擬似要素がある場合、「::」と、それに続く 擬似要素の名前を s に追加します。

単純 セレクターを直列化するには、s を空文字列とし、次の手順を実行して、 最後に s を返します:

型セレクター

全称セレクター

1. 名前空間接頭辞が、 デフォルト名前空間ではなく、 null 名前空間（名前空間に属さない）でもない名前空間にマッピングされる場合、名前空間接頭辞を識別子として直列化したものと、 それに続く「|」(U+007C) を s に追加します。
2. 名前空間接頭辞が、 null 名前空間（名前空間に属さない）にマッピングされる場合、 「|」(U+007C) を s に追加します。
3. これが型セレクターの場合、要素名を識別子として直列化したものを s に追加します。
4. これが全称セレクターの場合、「*」(U+002A) を s に追加します。

属性セレクター

1. 「[」(U+005B) を s に追加します。
2. 名前空間接頭辞が、 null 名前空間（名前空間に属さない）ではない名前空間にマッピングされる場合、名前空間接頭辞を識別子として直列化したものと、 それに続く「|」(U+007C) を s に追加します。
3. 属性名を識別子として直列化したものを s に追加します。
4. 属性値が指定されている場合、 「=」、 「~=」、 「|=」、 「^=」、 「$=」、または 「*=」 のうち適切なもの（属性セレクターの種類に応じたもの）と、それに続く 属性値を文字列として直列化したものを s に追加します。
5. 属性セレクターに大文字小文字区別フラグが存在する場合、 「 i」(U+0020 U+0069) を s に追加します。
6. 「]」(U+005D) を s に追加します。

クラスセレクター

「.」(U+002E) と、それに続くクラス 名を識別子として直列化したものを s に追加します。

ID セレクター

「#」(U+0023) と、それに続く ID を識別子として直列化したものを s に追加します。

擬似クラス

擬似クラスが引数を受け取らない場合、 「:」(U+003A) と、それに続く擬似クラス名を s に追加します。

それ以外の場合、「:」(U+003A)、擬似クラス名、 「(」(U+0028)、以下に従って決定された 擬似クラス引数の値、 「)」(U+0029) の順で s に追加します。

:lang()

相対的な順序を維持した、各引数を文字列として直列化したものの コンマ区切りリストの 直列化。

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

<an+b> 値を直列化する規則を使用して値を直列化した結果。

:not()

セレクターのグループを直列化する規則を使用して値を直列化した結果。

6. CSS

6.1. CSS スタイルシート

CSS スタイルシートは、 CSS 仕様で定義されるスタイルシートを表す 抽象概念です。CSSOM では、CSS スタイルシートは CSSStyleSheet オブジェクトとして表されます。

CSSStyleSheet(options)

呼び出されたとき、options を指定して構築済み CSSStyleSheet を作成する手順を実行し、 その結果を返します。

CSSStyleSheetInit options を指定して、構築済み CSSStyleSheet を作成するには、 次の手順を実行します:

1. 新しい CSSStyleSheet オブジェクト sheet を構築します。
2. sheet の場所を、現在のグローバルオブジェクトの関連付けられた Documentの基底 URLに設定します。
3. sheet のスタイルシート基底 URLを、 options の baseURL 属性値に設定します。
4. sheet の親 CSS スタイルシートを null に設定します。
5. sheet の所有者ノードを null に設定します。
6. sheet の所有者 CSS 規則を null に設定します。
7. sheet のタイトルを空文字列に設定します。
8. sheet の代替フラグを未設定にします。
9. sheet のオリジンクリーンフラグを設定します。
10. sheet の構築済みフラグを設定します。
11. sheet のコンストラクター文書を、現在のグローバルオブジェクトの関連付けられた Documentに設定します。
12. options の media 属性が文字列の場合、その文字列からMediaList オブジェクトを作成し、 sheet のメディアとして割り当てます。 それ以外の場合、その属性からメディアクエリリストを直列化し、 その結果の文字列からMediaList オブジェクトを作成して、sheet のメディアとして設定します。
13. options の disabled 属性が true の場合、 sheet の無効化フラグを設定します。
14. sheet を返します。

CSS スタイルシートには、 関連付けられた複数の状態項目があります:

型

リテラル文字列「text/css」。

場所

作成時に指定されます。CSS スタイルシートの最初のリクエストの絶対 URL 文字列、またはCSS スタイルシートが埋め込まれていた場合は null です。CSS スタイル シートの存続期間中は変更されません。

親 CSS スタイルシート

作成時に指定されます。CSS スタイルシートの親であるCSS スタイルシート、または関連付けられた親がない場合は null です。

所有者ノード

作成時に指定されます。CSS スタイルシートに関連付けられた DOM ノード、または 関連付けられた DOM ノードがない場合は null です。

所有者 CSS 規則

CSS スタイルシートを取り込ませた親 CSS スタイルシート内のCSS 規則、または 関連付けられた規則がない場合は null です。

メディア

作成時に指定されます。CSS スタイルシートに関連付けられた MediaList オブジェクトです。

このプロパティが文字列として指定された場合、メディアは、 その文字列についてMediaList オブジェクトを作成する手順を呼び出した 戻り値に設定されなければなりません。

このプロパティが所有者ノードの属性として指定された場合、メディアは、 その属性値についてMediaList オブジェクトを作成する手順を 呼び出した戻り値に設定されなければなりません。その属性が設定、変更、または削除されるたびに、メディアの mediaText 属性をその属性の新しい値に設定しなければならず、その属性が存在しない場合は null に設定しなければなりません。

注: メディアの mediaText 属性を変更しても、 所有者ノードの対応する属性は変更されません。

注: CSS スタイルシートの所有者ノードが null でない場合、それは、 問題のCSS スタイルシートが追加されたときに、 関連付けられた CSS スタイルシートがそのCSS スタイルシートであるノードです。

タイトル

作成時に指定されます。CSS スタイルシートのタイトルであり、空文字列にすることもできます。

以下では、最初のスタイルシートのタイトルは 空ではありませんが、 2番目と3番目のスタイルシートでは空です。

<style title="papaya whip">
  body { background: #ffefd5; }
</style>

<style title="">
  body { background: orange; }
</style>

<style>
  body { background: brown; }
</style>

このプロパティが所有者ノードの属性として指定された場合、タイトルは、 その属性の値に設定されなければなりません。その属性が設定、変更、または削除されるたびに、タイトルをその属性の新しい値に設定しなければならず、 その属性が存在しない場合は空文字列に設定しなければなりません。

注: HTML が、ノードが文書ツリー内にある場合にのみ、規定しているのは、 タイトルが所有者ノードの属性であることです。

代替フラグ

作成時に指定されます。設定済みまたは未設定のいずれかです。デフォルトでは未設定です。

次のCSS スタイルシートでは、 代替フラグが設定されています:

<?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?>

<link rel="alternate stylesheet" title="x" href="data:text/css,…">

無効化フラグ

設定済みまたは未設定のいずれかです。デフォルトでは未設定です。

注: 未設定であっても、必ずしもCSS スタイルシートが 実際にレンダリングに使用されることを意味するわけではありません。

CSS 規則

CSS スタイルシートに関連付けられた CSS 規則です。

オリジンクリーンフラグ

作成時に指定されます。設定済みまたは未設定のいずれかです。設定されている場合、API は CSS 規則の読み取りと変更を許可します。

構築済みフラグ

作成時に指定されます。設定済みまたは未設定のいずれかです。デフォルトでは未設定です。 このスタイルシートが IDL で定義されたコンストラクターを呼び出して作成されたかどうかを示します。

変更禁止フラグ

設定済みまたは未設定のいずれかです。デフォルトでは未設定です。設定されている場合、スタイルシートの規則を変更できません。

コンストラクター文書

作成時に指定されます。構築済みスタイルシートが関連付けられている Document です。デフォルトでは null です。 構築済みフラグが設定されたスタイルシートの場合にのみ null 以外になります。

スタイルシート基底 URL

スタイルシート内の相対 URL を解決するときに使用する基底 URL です。デフォルトでは null です。 構築済みフラグが設定されたスタイルシートの場合にのみ null 以外になります。

6.1.1. StyleSheet インターフェイス

StyleSheet インターフェイスは、抽象的な基底スタイルシートを表します。

[Exposed=Window]
interface StyleSheet {
  readonly attribute CSSOMString type;
  readonly attribute USVString? href;
  readonly attribute (Element or ProcessingInstruction)? ownerNode;
  readonly attribute CSSStyleSheet? parentStyleSheet;
  readonly attribute DOMString? title;
  [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
  attribute boolean disabled;
};

type 属性は、型を返さなければなりません。

href 属性は、場所を返さなければなりません。

ownerNode 属性は、所有者ノードを返さなければなりません。

parentStyleSheet 属性は、親 CSS スタイルシートを返さなければなりません。

title 属性は、タイトルを返さなければなりません。ただし、 タイトルが空文字列の場合は null を返します。

media 属性は、メディアを返さなければなりません。

disabled 属性は、取得時に 無効化フラグが設定されている場合は true を返し、それ以外の場合は false を返さなければなりません。 設定時、disabled 属性は、新しい値が true の場合は無効化フラグを設定し、 それ以外の場合は無効化 フラグを未設定にしなければなりません。

6.1.2. CSSStyleSheet インターフェイス

CSSStyleSheet インターフェイスは、CSS スタイルシートを表します。

[Exposed=Window]
interface CSSStyleSheet : StyleSheet {
  constructor(optional CSSStyleSheetInit options = {});

  readonly attribute CSSRule? ownerRule;
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  undefined deleteRule(unsigned long index);

  Promise<CSSStyleSheet> replace(USVString text);
  undefined replaceSync(USVString text);
};

dictionary CSSStyleSheetInit {
  DOMString baseURL = null;
  (MediaList or DOMString) media = "";
  boolean disabled = false;
};

ownerRule 属性は、所有者 CSS 規則を返さなければなりません。 null 以外の値が一度でも返された場合、その後の各取得アクセスでも常に同じ値を返さなければなりません。

cssRules 属性は、次の手順に従わなければなりません:

1. オリジンクリーンフラグが未設定の場合、SecurityError 例外をスローします。
2. CSS 規則を表す読み取り専用かつライブな CSSRuleList オブジェクトを返します。

   注: 返される CSSRuleList オブジェクトは（クライアント作者のスクリプトから見て） 読み取り専用ですが、ライブであるため、時間の経過とともに変化する可能性があります。たとえば、 insertRule() または deleteRule() メソッドを呼び出すと、 返されたオブジェクトに反映される変更が生じる可能性があります。

insertRule(rule, index) メソッドは、次の手順を実行しなければなりません:

1. オリジンクリーンフラグが未設定の場合、SecurityError 例外をスローします。
2. 変更禁止フラグが 設定されている場合、NotAllowedError DOMException をスローします。
3. parsed rule を、rule を指定して規則を構文解析する処理を呼び出した 戻り値とします。
4. parsed rule が構文エラーの場合、parsed rule を返します。
5. parsed rule が @import 規則であり、構築済みフラグが設定されている場合、 SyntaxError DOMException をスローします。
6. CSS 規則の index の位置に rule をCSS 規則として挿入する処理を呼び出した結果を返します。

deleteRule(index) メソッドは、 次の手順を実行しなければなりません:

1. オリジンクリーンフラグが未設定の場合、SecurityError 例外をスローします。
2. 変更禁止フラグが 設定されている場合、NotAllowedError DOMException をスローします。
3. CSS 規則の index の位置にある CSS 規則を削除します。

replace(text) メソッドは、次の手順を実行しなければなりません:

1. promise を promise とします。
2. 構築済みフラグが設定されていないか、変更禁止フラグが 設定されている場合、promise を NotAllowedError DOMException で拒否し、promise を返します。
3. 変更禁止フラグを設定します。
4. 並列に、次の手順を実行します:
   1. rules を、text から規則のリストを構文解析する処理を実行した結果とします。rules が 規則のリストでない場合（すなわち、構文解析中にエラーが発生した場合）、rules を空の リストに設定します。
   2. rules に1つ以上の @import 規則が含まれる場合、それらの規則を rules から削除します。
   3. sheet のCSS 規則を rules に設定します。
   4. sheet の変更禁止 フラグを未設定にします。
   5. promise を sheet で解決します。
5. promise を返します。

replaceSync(text) メソッドは、text を指定して、この CSSStyleSheet に対し、CSSStyleSheet の規則を同期的に 置換する手順を 実行しなければなりません。

sheet 上で text を指定して、CSSStyleSheet の規則を同期的に 置換するには、次の手順を実行します:

1. 構築済みフラグが設定されていないか、変更禁止フラグが 設定されている場合、NotAllowedError DOMException をスローします。
2. rules を、text から規則のリストを構文解析する処理を実行した結果とします。rules が 規則のリストでない場合（すなわち、構文解析中にエラーが発生した場合）、rules を空のリストに設定します。
3. rules に1つ以上の @import 規則が含まれる場合、それらの規則を rules から削除します。
4. sheet のCSS 規則を rules に設定します。

6.1.2.1. 非推奨の CSSStyleSheet メンバー

注: これらのメンバーは、既存サイトとの互換性のために必要です。

partial interface CSSStyleSheet {
  [SameObject] readonly attribute CSSRuleList rules;
  long addRule(optional DOMString selector = "undefined", optional DOMString style = "undefined", optional unsigned long index);
  undefined removeRule(optional unsigned long index = 0);
};

rules 属性は、cssRules と同じ手順に従い、cssRules が返すものと同じオブジェクトを返さなければなりません。

removeRule(index) メソッドは、 deleteRule()と同じ手順を実行しなければなりません。

addRule(selector, block, optionalIndex) メソッドは、次の手順を実行しなければなりません:

1. rule を空文字列とします。
2. selector を rule に追加します。
3. " { " を rule に追加します。
4. block が空でない場合、block と、それに続く空白を rule に追加します。
5. "}" を rule に追加します
6. index を、optionalIndex が指定されている場合はその値とし、それ以外の場合はスタイルシート内のCSS 規則の数とします。
7. rule と index を引数として、insertRule() を呼び出します。
8. -1 を返します。

作者はこれらのメンバーを使用せず、 代わりに、前に定義された標準の CSSStyleSheet インターフェイスを使用し、教えるべきです。 このインターフェイスは CSSGroupingRule と整合しています。

6.2. CSS スタイルシートコレクション

以下では、各 DocumentOrShadowRoot オブジェクトに関連付けられるさまざまな新しい概念を定義します。

各 DocumentOrShadowRoot には、0個以上のCSS スタイルシートからなる関連付けられたリストがあり、文書またはシャドウルートの CSS スタイル シートと呼ばれます。これは、 次を含む順序付きリストです:

1. HTTP Link ヘッダーから作成されたすべてのCSS スタイルシートを、 ヘッダー順に並べたもの
2. DocumentOrShadowRootに 関連付けられたすべてのCSS スタイルシートを、 ツリー順に並べたもの

各 DocumentOrShadowRoot には、0個以上のCSS スタイルシートからなる関連付けられたリストがあり、最終 CSS スタイル シートと呼ばれます。これは、 次を含む順序付きリストです:

1. 文書またはシャドウルートの CSS スタイルシート。
2. DocumentOrShadowRoot の adoptedStyleSheets の バッキングリストの内容を配列順に並べたもの。

CSS スタイル シートを作成するには、次の手順を実行します:

1. 新しいCSS スタイル シートオブジェクトを作成し、その プロパティを指定どおりに設定します。
2. 次に、新しく作成したCSS スタイルシートについて、 CSS スタイルシートを追加する手順を実行します。

   オリジンクリーンフラグが未設定の場合、これにより ユーザーのイントラネットから情報が 公開される可能性があります。

CSS スタイル シートを追加するには、次の 手順を実行します:

1. CSS スタイル シートを、文書またはシャドウルートの CSS スタイルシートのリスト内の適切な位置に追加します。残りの 手順では、無効化フラグを扱います。
2. 無効化フラグが設定されている場合、返ります。
3. タイトルが空文字列ではなく、代替フラグが未設定で、優先 CSS スタイルシートセット名が空文字列の場合、 優先 CSS スタイルシートセット 名を変更してタイトルにします。
4. 次のいずれかが true の場合、無効化フラグを未設定にして返ります:
   • タイトルが空文字列である。
   • 最後の CSS スタイルシートセット名が null であり、 タイトルが 優先 CSS スタイルシートセット名と大文字小文字を区別して一致する。
   • タイトルが、最後の CSS スタイルシートセット名と大文字小文字を区別して一致する。
5. 無効化フラグを設定します。

CSS スタイル シートを削除するには、次の手順を実行します:

1. CSS スタイル シートを、文書またはシャドウルートの CSS スタイルシートのリストから削除します。
2. CSS スタイル シートの親 CSS スタイルシート、所有者ノード、および所有者 CSS 規則を null に設定します。

永続 CSS スタイルシートとは、文書またはシャドウルートの CSS スタイルシートに含まれるCSS スタイルシートのうち、タイトルが空文字列であり、代替フラグが未設定のものです。

CSS スタイルシートセット とは、文書またはシャドウルートの CSS スタイルシートに含まれる1つ以上のCSS スタイルシートのうち、空文字列ではない同一のタイトルを持つものからなる順序付き コレクションです。

CSS スタイルシートセット 名とは、CSS スタイルシートセットに共通するタイトルです。

有効な CSS スタイルシートセットとは、含まれる各CSS スタイルシートの 無効化フラグが未設定であるCSS スタイルシートセットです。

名前 name のCSS スタイルシートセットを有効にするには、次の手順を実行します:

1. name が空文字列の場合、CSS スタイルシートのうち、 CSS スタイル シートセットに含まれる各ものの無効化フラグを設定して返ります。
2. CSS スタイルシート セットのうち、そのCSS スタイルシートセット名が name と大文字小文字を区別して一致するものに含まれる各CSS スタイルシートの 無効化フラグを未設定にし、他のすべてのCSS スタイルシートセット内のCSS スタイルシートでは設定します。

名前 name のCSS スタイルシートセットを選択するには、次の手順を実行します:

1. 名前 name のCSS スタイルシートセットを有効にします。
2. 最後の CSS スタイルシートセット名を name に設定します。

最後の CSS スタイル シートセット名とは、最後に選択された CSS スタイルシートセットを判断するための概念です。初期状態では、 その 値は null です。

優先 CSS スタイルシートセット名とは、どのCSS スタイルシートで無効化フラグを未設定にする必要があるかを判断する概念です。初期値 は空文字列です。

名前 name を使用して、優先 CSS スタイルシートセット名を変更するには、 次の手順を実行します:

1. current を、優先 CSS スタイルシートセット名とします。
2. 優先 CSS スタイルシートセット名を name に設定します。
3. name が current と大文字小文字を区別して一致せず、 最後の CSS スタイルシートセット名が null の場合、 名前 name のCSS スタイルシートセットを有効にします。

6.2.1. HTTP Default-Style ヘッダー

HTTP Default-Style ヘッダーを使用すると、 どのCSS スタイルシート セットが（初期状態で）有効な CSS スタイルシートセットになるかに影響する 優先 CSS スタイルシートセット名を設定できます。

各 HTTP Default-Style ヘッダーについて、ヘッダー順に、ユーザーエージェントは そのヘッダーの値を名前として、優先 CSS スタイルシートセット 名を変更しなければなりません。

6.2.2. StyleSheetList インターフェイス

StyleSheetList インターフェイスは、CSS スタイルシートの順序付きコレクションを表します。

[Exposed=Window]
interface StyleSheetList {
  getter CSSStyleSheet? item(unsigned long index);
  readonly attribute unsigned long length;
};

このオブジェクトのサポートされるプロパティインデックスは、 コレクションによって表されるCSS スタイルシートの数について、0 からその数より1小さい値までの範囲の数値です。そのような CSS スタイルシートがない場合、 サポートされるプロパティインデックスはありません。

item(index) メソッドは、コレクション内の index 番目のCSS スタイル シートを返さなければなりません。コレクション内に index 番目のオブジェクトがない場合、このメソッドは null を返さなければなりません。

length 属性は、コレクションによって表されるCSS スタイルシートの数を 返さなければなりません。

6.2.3. DocumentOrShadowRoot インターフェイスミックスインの拡張

partial interface mixin DocumentOrShadowRoot {
  [SameObject] readonly attribute StyleSheetList styleSheets;
  attribute ObservableArray<CSSStyleSheet> adoptedStyleSheets;
};

styleSheets 属性は、 文書またはシャドウルートの CSS スタイルシートを表す StyleSheetList コレクションを返さなければなりません。

value および index が指定された、adoptedStyleSheets のインデックス付き値を設定するアルゴリズムは、 次のとおりです:

1. value の構築済みフラグが設定されていない場合、またはそのコンストラクター文書が、この DocumentOrShadowRoot の ノード文書と等しくない場合、「NotAllowedError」 DOMException をスローします。

6.3. スタイルシートの関連付け

この節では、CSS スタイルシートの所有者ノードが実装しなければならないインターフェイスを定義し、 リンク関係タイプが「stylesheet」とASCII 大文字小文字を区別せず一致する場合の、 xml-stylesheet 処理命令および HTTP Link ヘッダーに対する要件を定義します。

6.3.1. CSS スタイルシートの取得

構文解析済み URL parsed URL、リファラー referrer、文書 document、および任意でパラメーターの集合 parameters（リクエストを作成する際の入力として使用される）を指定して、CSS スタイル シートを取得するには、次の手順に従います:

1. origin を document のオリジンとします。
2. request を新しいリクエストとし、 そのurlを parsed URL、オリジンを origin、リファラーを referrer とし、指定されている場合は パラメーターの集合 parameters も設定します。
3. response を、request を取得した 結果とします。
4. response が利用可能になるまで待ちます。
5. response がネットワークエラーの場合、エラーを返します。
6. document がquirks モードであり、response がCORS 同一オリジンで、response のContent-Type メタデータがサポートされるスタイル言語でない場合、response のContent-Type メタデータを text/css に変更します。
7. response がサポートされるスタイル言語でない場合、エラーを返します。
8. response を返します。

6.3.2. LinkStyle インターフェイス

あるノードの関連付けられた CSS スタイルシートとは、そのノードが所有者ノードである、文書またはシャドウルートの CSS スタイルシートのリスト内のCSS スタイルシートです。 このノードは、LinkStyle インターフェイスも実装しなければなりません。

interface mixin LinkStyle {
  readonly attribute CSSStyleSheet? sheet;
};

sheet 属性は、そのノードの関連付けられた CSS スタイル シートを返さなければならず、 関連付けられた CSS スタイルシートがない場合は null を返さなければなりません。

<style type="text/css">
  body { background:lime }
</style>

<style type="text/example-sheets">
  $(body).background := lime
</style>

注: ノードがスタイルシートを参照するかどうかは、 そのノードの意味論を定義する仕様によって定義されます。

6.3.3. 仕様に対する要件

DOM を介してスタイルシートを関連付ける新しい方法を導入する仕様は、 どのノードが LinkStyle インターフェイスを実装するかを定義するべきです。その際、 CSS スタイルシートがいつ作成されるかも定義しなければなりません。

6.3.4. xml-stylesheet 処理命令を実装する ユーザーエージェントに対する要件

ProcessingInstruction includes LinkStyle;

プロローグとは、 文書の子であるノードのうち、存在する場合にはその文書の Element 子に後続しないものを指します。

ProcessingInstruction ノード node がプロローグの一部になった場合、 プロローグの一部でなくなった場合、またはそのデータが変更された場合、次の 手順を 実行しなければなりません:

1. このアルゴリズムのインスタンスが現在 node に対して実行中の場合、そのインスタンスを中止し、 該当する場合は関連付けられた取得を停止します。
2. node に関連付けられた CSS スタイルシートがある場合、それを削除します。
3. node がxml-stylesheet 処理命令でない場合、返ります。
4. node に href 擬似属性がない場合、返ります。
5. title を title 擬似属性の値とし、title 擬似属性が指定されていない場合は空文字列とします。
6. 値が「yes」と大文字小文字を区別して一致する alternate 擬似属性があり、title が 空文字列の場合、返ります。
7. 値がユーザーエージェントのサポートされるスタイル言語ではない type 擬似属性がある場合、 返ってもかまいません。
8. input URL を、href 擬似属性によって指定された値とします。
9. document を node のノード 文書とします
10. base URL を document の文書基底 URLとします。
11. referrer を document のアドレスとします。
12. parsed URL を、文字列 input URL および基底 URL base URL を指定して URL パーサーを呼び出した戻り値とします。
13. parsed URL が failure の場合、返ります。
14. response を、構文解析済み URL parsed URL、 リファラー referrer、文書 document を指定してCSS スタイルシートを取得した結果とします。
15. response がエラーの場合、返ります。
16. 次のプロパティを使用してCSS スタイルシートを作成します:

    場所

    parsed URL を指定してURL シリアライザーを呼び出した結果。

    親 CSS スタイルシート

    null。

    所有者ノード

    node。

    所有者 CSS 規則

    null。

    メディア

    media 擬似属性がある場合はその値、それ以外の場合は 空文字列。

    タイトル

    title。

    代替フラグ

    alternate 擬似属性の値が 「yes」と大文字小文字を区別して一致する場合は設定済み、それ以外の場合は未設定。

    オリジンクリーンフラグ

    response がCORS 同一オリジンの場合は設定済み、それ以外の場合は未設定。

    CSS の環境エンコーディングは、次の 手順を実行した結果です:

    1. 要素に charset 擬似属性がある場合、その擬似属性の値からエンコーディングを取得します。 成功した場合、結果のエンコーディングを返し、これらの手順を中止します。
    2. それ以外の場合、文書の文字エンコーディングを返します。 [DOM]

この節の規則を使用してxml-stylesheet 処理命令によって参照されるスタイルシートは、 XML パーサーの Document の文脈で、ProcessingInstruction ノードが その Document の パーサーによって作成され、そのノードがパーサーによって作成されたときにスタイルシートが 有効であり、最後にイベント ループが手順1に到達したときにそのノードが当該 Document 内にあり、 ユーザーエージェントがその特定のスタイルシートの読み込みを まだ断念していない場合、スクリプトをブロックする スタイルシートと呼ばれます。ユーザーエージェントは、そのようなスタイルシートをいつでも断念できます。

6.3.5. HTTP Link ヘッダーを実装するユーザーエージェントに対する要件

リンク関係タイプの1つが「stylesheet」と ASCII 大文字小文字を区別せず一致する各 HTTP Link ヘッダーについて、次の手順を 実行しなければなりません:

1. title を、すべての title パラメーターのうち最初のものの値とします。 そのようなパラメーターがない場合は空文字列とします。
2. （他の）リンク関係タイプの1つが「alternate」とASCII 大文字小文字を区別せず一致し、 title が空文字列の場合、返ります。
3. input URL を指定された値とします。

   より具体的にする

4. base URL を文書の文書基底 URLとします。

   この時点で 文書は存在するのか?

5. referrer を文書のアドレスとします。
6. origin を文書のオリジンとします。
7. parsed URL を、文字列 input URL および基底 URL base URL を指定して URL パーサーを呼び出した戻り値とします。
8. parsed URL が failure の場合、返ります。
9. response を、構文解析済み URL parsed URL、 リファラー referrer、文書として当該文書を指定してCSS スタイルシートを取得した結果とします。

   HTML パーサーが quirks/non-quirks をまだ決定していない場合はどうなるのか?

10. 次のプロパティを使用してCSS スタイルシートを作成します:

    場所

    parsed URL を指定してURL シリアライザーを呼び出した結果。

    所有者ノード

    null。

    親 CSS スタイルシート

    null。

    所有者 CSS 規則

    null。

    メディア

    最初の media パラメーターの値。

    タイトル

    title。

    代替フラグ

    この HTTP Link ヘッダーに指定されたリンク関係タイプの1つが 「alternate」とASCII 大文字小文字を区別せず一致する場合は 設定済み、それ以外の場合は false。

    オリジンクリーンフラグ

    response がCORS 同一オリジンの場合は設定済み、それ以外の場合は未設定。

この節の規則を使用して HTTP Link ヘッダーによって参照されるスタイルシートは、 作成時にスタイルシートが有効であり、 ユーザーエージェントがその特定のスタイルシートをまだ断念していない場合、スクリプトを ブロックするスタイルシートと呼ばれます。ユーザーエージェントは、そのような スタイルシートをいつでも断念できます。

6.4. CSS 規則

CSS 規則は、 CSS 仕様で定義される規則を表す 抽象概念です。CSS 規則は、CSSRule インターフェイスのサブクラスを実装するオブジェクトとして表され、 次の状態項目が関連付けられています:

型

特定の種類の規則に関連付けられた非負の整数です。 この項目は規則の作成時に初期化され、変更できません。

テキスト

スタイルシート内で直接使用するのに適した、規則のテキスト表現です。 この項目は規則の作成時に初期化され、変更できます。

親 CSS 規則

外側のCSS 規則への参照、 または null です。 規則の作成時に外側の規則がある場合、この項目はその外側の 規則に初期化されます。それ以外の場合は null です。null に 変更できます。

親 CSS スタイルシート

親のCSS スタイルシートへの参照、または null です。 この項目は規則の作成時に、関連付けられたスタイルシートを参照するよう初期化されます。 null に変更できます。

子 CSS 規則

子CSS 規則のリストです。このリストは 変更できます。

上記の状態に加えて、各CSS 規則には、その型に従って 他の状態が関連付けられる場合があります。

文字列 string からCSS 規則を構文解析するには、 次の手順を実行します:

1. rule を、string を指定して規則を構文解析する処理を呼び出した 戻り値とします。
2. rule が構文エラーの場合、rule を返します。
3. parsed rule を、適切な CSS 仕様に従って rule を構文解析し、 無視されるとされている部分を破棄した結果とします。スタイル規則全体が破棄された場合、構文エラーを返します。
4. parsed rule を返します。

CSS 規則を直列化するには、CSS 規則の型に従って、次のいずれかを実行します:

CSSStyleRule

次の手順の結果を返します:

1. s の初期値を、 規則に関連付けられたセレクターに対してセレクターのグループを直列化する処理を実行した結果に、 文字列「 {」、すなわち単一の SPACE (U+0020) とそれに続く LEFT CURLY BRACKET (U+007B) を続けたものとします。
2. decls を、規則に関連付けられた宣言に対してCSS 宣言ブロックを直列化する処理を実行した結果とし、 そのような宣言がない場合は null とします。
3. rules を、規則の cssRules リスト内の各規則に対してCSS 規則を直列化する処理を実行した結果とし、 そのような規則がない場合は null とします。
4. decls と rules の両方が null の場合、「 }」を s に追加し（すなわち、 単一の SPACE (U+0020) とそれに続く RIGHT CURLY BRACKET (U+007D)）、s を返します。
5. rules が null の場合:
   1. 単一の SPACE (U+0020) を s に追加します
   2. decls を s に追加します
   3. 「 }」を s に追加します（すなわち、単一の SPACE (U+0020) とそれに続く RIGHT CURLY BRACKET (U+007D)）。
   4. s を返します。
6. それ以外の場合:
   1. decls が null でない場合、それを rules の先頭に追加します。
   2. rules 内の各 rule について:
      1. 改行と、それに続く2個の空白を s に追加します。
      2. rule を s に追加します。
   3. 改行と、それに続く RIGHT CURLY BRACKET (U+007D) を s に追加します。
   4. s を返します。

CSSImportRule

次を連結した結果:

1. 文字列「@import」と、それに続く単一の SPACE (U+0020)。
2. 規則の場所に対してURL を直列化する処理を実行した結果。
3. 規則に関連付けられたメディアリストが空でない場合、単一の SPACE (U+0020) と、 そのメディアリストに対してメディアクエリリストを直列化する処理を実行した 結果。
4. 文字列「;」、すなわち SEMICOLON (U+003B)。

@import url("import.css");

@import url("print.css") print;

CSSMediaRule

次を連結した結果:

1. 文字列「@media」と、それに続く単一の SPACE (U+0020)。
2. 規則のメディアクエリリストに対してメディアクエリリストを直列化する処理を実行した 結果。
3. 単一の SPACE (U+0020)、文字列「{」、すなわち LEFT CURLY BRACKET (U+007B)、およびそれに続く 改行。
4. 規則の cssRules リスト内の各規則に対してCSS 規則を直列化する処理を実行した結果を、 改行で区切り、2個の空白でインデントしたもの。
5. 改行と、それに続く文字列「}」、すなわち RIGHT CURLY BRACKET (U+007D)

CSSFontFaceRule

次を連結した結果:

1. 文字列「@font-face {」と、それに続く単一の SPACE (U+0020)。
2. 文字列「font-family:」と、それに続く単一の SPACE (U+0020)。
3. 規則のフォントファミリー名に対して文字列を直列化する処理を実行した結果。
4. 文字列「;」、すなわち SEMICOLON (U+003B)。
5. 規則に関連付けられたソースリストが空でない場合、次の下位手順に従います:
   1. 単一の SPACE (U+0020)、文字列「src:」、それに続く 単一の SPACE (U+0020)。
   2. ソースリスト内の各ソースについてURL を 直列化するか、LOCAL を直列化する処理を実行した結果に対して、コンマ区切りリストを直列化する処理を呼び出した結果。
   3. 文字列「;」、すなわち SEMICOLON (U+003B)。
6. 規則に関連付けられた unicode-range 記述子が存在する場合、 単一の SPACE (U+0020)、文字列「unicode-range:」、単一の SPACE (U+0020)、<'unicode-range'> を直列化する処理を実行した結果、 文字列「;」、すなわち SEMICOLON (U+003B)。
7. 規則に関連付けられた font-variant 記述子が 存在する場合、単一の SPACE (U+0020)、文字列「font-variant:」、単一の SPACE (U+0020)、<'font-variant'> を直列化する処理を実行した結果、 文字列「;」、すなわち SEMICOLON (U+003B)。
8. 規則に関連付けられた font-feature-settings 記述子が 存在する場合、 単一の SPACE (U+0020)、文字列「font-feature-settings:」、 単一の SPACE (U+0020)、<'font-feature-settings'> を直列化する処理を実行した結果、 文字列「;」、すなわち SEMICOLON (U+003B)。
9. 規則に関連付けられた font-stretch 記述子が存在する場合、単一の SPACE (U+0020)、文字列「font-stretch:」、単一の SPACE (U+0020)、<'font-stretch'> を直列化する処理を実行した結果、 文字列「;」、すなわち SEMICOLON (U+003B)。
10. 規則に関連付けられた font-weight 記述子が存在する場合、単一の SPACE (U+0020)、文字列「font-weight:」、単一の SPACE (U+0020)、<'font-weight'> を直列化する処理を実行した結果、 文字列「;」、すなわち SEMICOLON (U+003B)。
11. 規則に関連付けられた font-style 記述子が存在する場合、単一の SPACE (U+0020)、文字列「font-style:」、単一の SPACE (U+0020)、 <'font-style'> を直列化する処理を実行した結果、文字列 「;」、すなわち SEMICOLON (U+003B)。
12. 単一の SPACE (U+0020) と、それに続く文字列「}」、すなわち RIGHT CURLY BRACKET (U+007D)。

CSSFontFaceRule 記述子の値をどのように直列化するかを定義する必要があります。

CSSPageRule

CSSPageRule をどのように直列化するかを定義する必要があります。

CSSNamespaceRule

リテラル文字列「@namespace」、単一の SPACE (U+0020)、prefix 属性を識別子として直列化したもの（存在する場合）、 接頭辞がある場合は単一の SPACE (U+0020)、namespaceURI 属性をURL として直列化したもの、文字「;」(U+003B) の順で続けたもの。

CSSKeyframesRule

次を連結した結果:

1. リテラル文字列「@keyframes」と、それに続く単一の SPACE (U+0020)。
2. name 属性を識別子として直列化したもの。
3. 規則の cssRules リスト内の各規則に対してCSS 規則を直列化する処理を実行した結果を、 改行で区切り、2個の空白でインデントしたもの。
4. 改行と、それに続く文字列「}」、すなわち RIGHT CURLY BRACKET (U+007D)

CSSKeyframeRule

次を連結した結果:

1. keyText。
2. 文字列「 { 」、すなわち単一の SPACE (U+0020) と、それに続く LEFT CURLY BRACKET (U+007B)、
3. 規則に関連付けられた宣言に対してCSS 宣言ブロックを直列化する処理を実行した結果。
4. 規則に1つ以上の宣言が関連付けられている場合、文字列「 」、すなわち 単一の SPACE (U+0020)。
5. 文字列「}」、RIGHT CURLY BRACKET (U+007D)。

「2個の 空白でインデント」の部分はブラウザーと一致しますが、修正が必要です。#5494 を参照してください

CSS 規則リスト list のインデックス index に rule をCSS 規則として挿入するには、 次の手順に従います:

1. length を list 内の項目数に設定します。
2. index が length より大きい場合、IndexSizeError 例外をスローします。
3. new rule を、引数 rule に対してCSS 規則を構文解析する処理を実行した結果に設定します。
4. new rule が構文エラーの場合、SyntaxError 例外をスローします。
5. CSS によって規定された制約のため、new rule を list の 0 始まりの位置 index に挿入できない場合、HierarchyRequestError 例外をスローします。 [CSS21]

   注: たとえば、CSS スタイルシートでは、 スタイル規則の後に @import at 規則を含めることはできません。

6. new rule が @namespace at 規則であり、list に @import at 規則および @namespace at 規則以外のものが含まれる場合、 InvalidStateError 例外をスローします。
7. new rule を list の0始まりの位置 index に挿入します。
8. index を返します。

CSS 規則リスト list のインデックス index からCSS 規則を削除するには、 次の手順に従います:

1. length を list 内の項目数に設定します。
2. index が length 以上の場合、IndexSizeError 例外をスローします。
3. old rule を list 内の index 番目の項目に設定します。
4. old rule が @namespace at 規則であり、list に @import at 規則および @namespace at 規則以外のものが含まれる場合、 InvalidStateError 例外をスローします。
5. 規則 old rule を list の0始まりの位置 index から削除します。
6. old rule の親 CSS 規則および親 CSS スタイルシートを null に設定します。

6.4.1. CSSRuleList インターフェイス

CSSRuleList インターフェイスは、CSS スタイル規則の順序付きコレクションを表します。

[Exposed=Window]
interface CSSRuleList {
  getter CSSRule? item(unsigned long index);
  readonly attribute unsigned long length;
};

このオブジェクトのサポートされるプロパティインデックスは、 コレクションによって表される CSSRule オブジェクトの数について、 0 からその数より1小さい値までの範囲の数値です。そのような CSSRule オブジェクトがない場合、 サポートされるプロパティインデックスはありません。

item(index) メソッドは、コレクション内の index 番目の CSSRule オブジェクトを 返さなければなりません。コレクション内に index 番目のオブジェクトがない場合、このメソッドは null を返さなければなりません。

length 属性は、コレクションによって 表される CSSRule オブジェクトの数を 返さなければなりません。

6.4.2. CSSRule インターフェイス

CSSRule インターフェイスは、抽象的な基底 CSS スタイル規則を表します。それぞれ異なる CSS スタイル規則の型は、このインターフェイスを 継承する個別のインターフェイスによって表されます。

[Exposed=Window]
interface CSSRule {
  attribute CSSOMString cssText;
  readonly attribute CSSRule? parentRule;
  readonly attribute CSSStyleSheet? parentStyleSheet;

  // 以下の属性および定数は歴史的なものです
  readonly attribute unsigned short type;
  const unsigned short STYLE_RULE = 1;
  const unsigned short CHARSET_RULE = 2;
  const unsigned short IMPORT_RULE = 3;
  const unsigned short MEDIA_RULE = 4;
  const unsigned short FONT_FACE_RULE = 5;
  const unsigned short PAGE_RULE = 6;
  const unsigned short MARGIN_RULE = 9;
  const unsigned short NAMESPACE_RULE = 10;
};

cssText 属性は、CSS 規則を直列化したものを返さなければなりません。 cssText 属性の設定時には、何も行わなければなりません。

parentRule 属性は、親 CSS 規則を返さなければなりません。

注: たとえば、@media は規則を内包できます。この 場合、parentRule は null 以外になります。内包する規則がない場合、parentRule は null になります。

parentStyleSheet 属性は、親 CSS スタイルシートを返さなければなりません。

注: null が返される唯一の状況は、規則が 削除された場合です。

注: LinkStyle インターフェイスを実装する Node を Document インスタンスから削除しても、それ自体では、CSSRule が参照する CSSStyleSheet が 到達不能になることは ありません。

type 属性は非推奨です。 次のように整数を返さなければなりません:

オブジェクトが CSSStyleRule の場合

1 を返します。

オブジェクトが CSSImportRule の場合

3 を返します。

オブジェクトが CSSMediaRule の場合

4 を返します。

オブジェクトが CSSFontFaceRule の場合

5 を返します。

オブジェクトが CSSPageRule の場合

6 を返します。

オブジェクトが CSSKeyframesRule の場合

7 を返します。

オブジェクトが CSSKeyframeRule の場合

8 を返します。

オブジェクトが CSSMarginRule の場合

9 を返します。

オブジェクトが CSSNamespaceRule の場合

10 を返します。

オブジェクトが CSSCounterStyleRule の場合

11 を返します。

オブジェクトが CSSSupportsRule の場合

12 を返します。

オブジェクトが CSSFontFeatureValuesRule の場合

14 を返します。

オブジェクトが CSSViewportRule の場合

15 を返します。

それ以外の場合

0 を返します。

注: 整数列挙と、その整数を識別するための 複数の定数を使用する慣行は、 Web API ではもはや使用されていない旧来の設計慣行です。 代わりに、指定されたオブジェクトがどの種類の規則であるかを判別するには、 rule.constructor.name を確認することが推奨されます。 これは "CSSStyleRule" のような文字列を返します。

6.4.3. CSSStyleRule インターフェイス

CSSStyleRule インターフェイスは、スタイル規則を表します。

[Exposed=Window]
interface CSSStyleRule : CSSRule {
  attribute CSSOMString selectorText;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

selectorText 属性は、取得時に、関連付けられたセレクターのグループを直列化した結果を返さなければなりません。 selectorText 属性の設定時には、次の手順を実行しなければなりません:

1. 指定された値に対してセレクターのグループを構文解析するアルゴリズムを実行します。
2. アルゴリズムが null 以外の値を返した場合、関連付けられたセレクターの グループを返された値で置き換えます。
3. それ以外の場合、アルゴリズムが null 値を返した場合は何も行いません。

style 属性は、次のプロパティを持つ、 スタイル規則の CSSStyleDeclaration オブジェクトを返さなければなりません:

算出済みフラグ

未設定。

宣言

規則内で宣言された宣言を、指定順に並べたもの。

親 CSS 規則

コンテキストオブジェクト。

所有者ノード

Null。

宣言の指定順は、指定された順序と同じですが、 一括指定プロパティをその個別指定プロパティへ正準順で 展開したものです。プロパティが（一括指定の展開後に）複数回指定されている場合、 カスケード順が最も高いものだけを、指定されたときと同じ相対位置で表さなければなりません。 [CSS3CASCADE]

6.4.4. CSSImportRule インターフェイス

CSSImportRule インターフェイスは、@import at 規則を表します。

[Exposed=Window]
interface CSSImportRule : CSSRule {
  readonly attribute USVString href;
  [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
  [SameObject] readonly attribute CSSStyleSheet styleSheet;
};

href 属性は、 @import at 規則によって指定されたURLを返さなければなりません。

注: 解決済みのURLを取得するには、 関連付けられたCSS スタイルシートの href 属性を使用します。

media 属性は、関連付けられたCSS スタイルシートの media 属性の値を返さなければなりません。

styleSheet 属性は、関連付けられたCSS スタイルシートを返さなければなりません。

注: @import at 規則には、常に関連付けられたCSS スタイルシートがあります。

6.4.5. CSSGroupingRule インターフェイス

CSSGroupingRule インターフェイスは、内部にネストされた他の規則を含む at 規則を表します。

[Exposed=Window]
interface CSSGroupingRule : CSSRule {
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  undefined deleteRule(unsigned long index);
};

cssRules 属性は、子 CSS 規則の CSSRuleList オブジェクトを返さなければなりません。

insertRule(rule, index) メソッドは、子 CSS 規則の index の位置に rule をCSS 規則として挿入する処理を呼び出した結果を返さなければなりません。

deleteRule(index) メソッドは、 子 CSS 規則の index の位置から CSS 規則を削除しなければなりません。

6.4.6. CSSMediaRule インターフェイス

CSSMediaRule インターフェイスは、CSS 条件付き規則で定義されています。 [CSS3-CONDITIONAL]

6.4.7. CSSPageRule インターフェイス

CSSPageRule インターフェイスは、@page at 規則を表します。

CSS ページセレクターの リストを構文解析する規則、およびCSS ページセレクターのリストを直列化する規則を定義する必要があります。

[Exposed=Window]
interface CSSPageRule : CSSGroupingRule {
           attribute CSSOMString selectorText;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

selectorText 属性は、取得時に、関連付けられたCSS ページセレクターのリストを直列化した結果を返さなければなりません。 selectorText 属性の設定時には、次の手順を実行しなければなりません:

1. 指定された値に対してCSS ページセレクターのリストを構文解析するアルゴリズムを 実行します。
2. アルゴリズムが null 以外の値を返した場合、関連付けられたCSS ページセレクターのリストを返された値で置き換えます。
3. それ以外の場合、アルゴリズムが null 値を返した場合は何も行いません。

style 属性は、次のプロパティを持つ、 @page at 規則の CSSStyleDeclaration オブジェクトを返さなければなりません:

算出済みフラグ

未設定。

宣言

規則内で宣言された宣言を、指定順に並べたもの。

親 CSS 規則

コンテキストオブジェクト。

所有者ノード

Null。

6.4.8. CSSMarginRule インターフェイス

CSSMarginRule インターフェイスは、@page at 規則内の マージン at 規則（例: @top-left）を表します。 [CSS3PAGE]

[Exposed=Window]
interface CSSMarginRule : CSSRule {
  readonly attribute CSSOMString name;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

name 属性は、マージン at 規則の名前を返さなければなりません。名前には @ 文字は 含まれません。 [CSS3SYN]

style 属性は、次のプロパティを持つ、 マージン at 規則の CSSStyleDeclaration オブジェクトを返さなければなりません:

算出済みフラグ

未設定。

宣言

規則内で宣言された宣言を、指定順に並べたもの。

親 CSS 規則

コンテキストオブジェクト。

所有者ノード

Null。

6.4.9. CSSNamespaceRule インターフェイス

CSSNamespaceRule インターフェイスは、@namespace at 規則を表します。

[Exposed=Window]
interface CSSNamespaceRule : CSSRule {
  readonly attribute CSSOMString namespaceURI;
  readonly attribute CSSOMString prefix;
};

namespaceURI 属性は、 @namespace at 規則の名前空間を返さなければなりません。

prefix 属性は、 @namespace at 規則の接頭辞を返さなければならず、 接頭辞がない場合は空文字列を返さなければなりません。

6.5. CSS 宣言

CSS 宣言は、 DOM 内でオブジェクトとして公開されない抽象概念です。CSS 宣言には、次のプロパティが 関連付けられています:

プロパティ名

宣言のプロパティ名。

値

コンポーネント値のリストとして表される宣言の値。

important フラグ

設定済みまたは未設定のいずれかです。変更できます。

大文字小文字区別フラグ

プロパティ名が、その仕様に従って大文字小文字を区別すると 定義されている場合は設定済み、 それ以外の場合は未設定。

6.6. CSS 宣言ブロック

CSS 宣言 ブロックは、CSS プロパティとそれに関連付けられた値の順序付きコレクションであり、 CSS 宣言とも呼ばれます。DOM では、 CSS 宣言ブロックは CSSStyleDeclaration オブジェクトです。CSS 宣言ブロックには、次のプロパティが 関連付けられています:

算出済みフラグ

オブジェクトが指定スタイルではなく算出スタイル宣言である場合に設定されます。 特に明記されていない限り未設定です。

宣言

オブジェクトに関連付けられたCSS 宣言。

親 CSS 規則

CSS 宣言ブロックが関連付けられているCSS 規則（存在する場合）、 それ以外の場合は null。

所有者ノード

CSS 宣言ブロックが関連付けられている Element （存在する場合）、それ以外の場合は null。

更新中フラグ

デフォルトでは未設定です。CSS 宣言ブロックが 所有者ノードの style 属性を更新しているときに設定されます。

文字列 string からCSS 宣言ブロックを構文解析するには、次の手順に従います:

1. declarations を、string を指定して宣言のリストを構文解析する処理を呼び出した戻り値とします。
2. parsed declarations を新しい空のリストとします。
3. declarations 内の各項目 declaration について、次の下位手順に従います:
   1. parsed declaration を、適切な CSS 仕様に従って declaration を構文解析し、 無視されるとされている部分を 破棄した結果とします。宣言全体が破棄された場合、parsed declaration を null とします。
   2. parsed declaration が null でない場合、それを parsed declarations に追加します。
4. parsed declarations を返します。

プロパティ名 property、値 value、および任意で設定された important フラグを使用してCSS 宣言を直列化するには、 次の手順に従います:

1. s を空文字列とします。
2. property を s に追加します。
3. 「: 」(U+003A U+0020) を s に追加します。
4. value を s に追加します。
5. important フラグが設定されている場合、「 !important」(U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E U+0074) を s に追加します。
6. 「;」(U+003B) を s に追加します。
7. s を返します。

declaration block をCSS 宣言ブロックとして直列化するとは、次の手順を実行することです:

1. list を空の配列とします。
2. already serialized を空の配列とします。
3. 宣言ループ: declaration block の宣言内の各CSS 宣言 declaration について、次の下位手順に従います:
   1. property を declaration のプロパティ 名とします。
   2. property が already serialized に含まれる場合、 宣言ループとラベル付けされた手順を続行します。
   3. property が1つ以上の一括指定プロパティにマッピングされる場合、shorthands を、 それらの一括指定プロパティを優先順に並べた配列とします。
   4. 一括指定ループ: shorthands 内の各 shorthand について、次の 下位手順に従います:
      1. longhands を、declaration block の宣言内のCSS 宣言のうち、 already serialized に含まれず、shorthands 内の 一括指定プロパティのいずれかにマッピングされるプロパティ名を持つものすべてで構成される 配列とします。
      2. shorthand にマッピングされるすべてのプロパティが longhands に存在しない場合、一括指定ループとラベル付けされた手順を続行します。
      3. current longhands を空の配列とします。
      4. longhands 内のCSS 宣言のうち、 shorthand にマッピングされるプロパティ名を持つものをすべて current longhands に追加します。
      5. current longhands 内に、important フラグが設定されたCSS 宣言が1つ以上あり、未設定のものも1つ以上ある場合、 一括指定ループとラベル付けされた手順を 続行します。
      6. declaration block 内で、current longhands の最初の個別指定と 最後の個別指定の間にある宣言のうち、同じ論理プロパティグループに属するものの、 current longhands 内のいずれかの個別指定とは異なるマッピングロジックを持ち、 current longhands に含まれないものがある場合、一括指定 ループとラベル付けされた手順を続行します。
      7. value を、current longhands のCSS 値を直列化する処理を呼び出した結果とします。
      8. value が空文字列の場合、一括指定 ループとラベル付けされた手順を続行します。
      9. serialized declaration を、プロパティ名 shorthand、値 value を使用し、current longhands 内のCSS 宣言でimportant フラグが設定されている場合は important フラグを設定して、CSS 宣言を直列化する処理を呼び出した結果とします。
      10. serialized declaration を list に追加します。
      11. current longhands の全項目のプロパティ名を already serialized に追加します。
      12. 宣言ループとラベル付けされた手順を続行します。
   5. value を、declaration のCSS 値を直列化する処理を 呼び出した結果とします。
   6. serialized declaration を、プロパティ名 property、値 value を使用し、 declaration のimportant フラグが設定されている場合は important フラグを設定して、CSS 宣言を直列化する処理を呼び出した結果とします。
   7. serialized declaration を list に追加します。
   8. property を already serialized に追加します。
4. list を「 」(U+0020) で連結したものを返します。

注: 空の CSS 宣言ブロックを直列化すると、 空文字列になります。

注: 空でない CSS 宣言ブロックの直列化には 前後の空白は含まれません。すなわち、 最初のプロパティ名の前にも、最後のプロパティ値に続く最後のセミコロン区切り文字の後にも空白は現れません。

CSS 宣言 ブロックには、localName、value、 namespace を使用する所有者ノードについて、次の属性変更手順があります:

1. 算出済みフラグが設定されている場合、返ります。
2. 更新中フラグが設定されている場合、返ります。
3. localName が「style」でないか、namespace が null でない場合、返ります。
4. value が null の場合、宣言を空にします。
5. それ以外の場合、宣言を、文字列 value からCSS 宣言ブロックを構文解析する処理の結果とします。

CSS 宣言ブロックオブジェクトが作成されたとき:

1. owner node を所有者ノードとします。
2. owner node が null であるか、算出済み フラグが設定されている場合、返ります。
3. value を、null、「style」、owner node を指定して属性を取得した結果とします。
4. value が null でない場合、宣言を、文字列 value からCSS 宣言ブロックを構文解析する処理の結果とします。

declaration block のstyle 属性を更新するとは、次の手順を実行することです:

1. 表明: declaration block の算出済みフラグは未設定です。
2. owner node を declaration block の所有者ノードとします。
3. owner node が null の場合、返ります。
4. declaration block の更新中フラグを設定します。
5. 「style」および declaration block を直列化した結果を使用して、owner node の属性値を設定します。
6. declaration block の更新中フラグを未設定にします。

一括指定プロパティのリスト shorthands の優先順は、次のとおりです:

1. shorthands を辞書順に並べます。
2. shorthands 内の「-」(U+002D) で始まるすべての項目を、 相対的な順序を維持したままリストの末尾へ移動します。
3. shorthands 内の「-」(U+002D) で始まるものの、 「-webkit-」では始まらないすべての項目を、 相対的な順序を維持したままリストの末尾へ移動します。
4. shorthands を、それぞれにマッピングされる個別指定プロパティの数で、 最大数を先頭にして並べます。

6.6.1. CSSStyleDeclaration インターフェイス

CSSStyleDeclaration インターフェイスは、その基礎となる状態を含むCSS 宣言ブロックを表します。 この基礎となる状態は、CSSStyleDeclaration インスタンスの 出所によって異なります。

[Exposed=Window]
interface CSSStyleDeclaration {
  [CEReactions] attribute CSSOMString cssText;
  readonly attribute unsigned long length;
  getter CSSOMString item(unsigned long index);
  CSSOMString getPropertyValue(CSSOMString property);
  CSSOMString getPropertyPriority(CSSOMString property);
  [CEReactions] undefined setProperty(CSSOMString property, [LegacyNullToEmptyString] CSSOMString value, optional [LegacyNullToEmptyString] CSSOMString priority = "");
  [CEReactions] CSSOMString removeProperty(CSSOMString property);
  readonly attribute CSSRule? parentRule;
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString cssFloat;
};

このオブジェクトのサポートされるプロパティインデックスは、 宣言内のCSS 宣言の数について、0 からその数より1小さい値までの範囲の数値です。そのようなCSS 宣言がない場合、サポートされるプロパティインデックスはありません。

cssText 属性の取得時には、次の 手順を実行しなければなりません:

1. 算出済みフラグが設定されている場合、 空文字列を返します。

2. 宣言を直列化した結果を返します。

cssText 属性の設定時には、次の手順を実行しなければなりません:

1. 算出済みフラグが設定されている場合、 NoModificationAllowedError 例外をスローします。
2. 宣言を空にします。
3. 指定された値を構文解析し、その戻り値が 空のリストでない場合、リスト内の項目を指定順で 宣言に挿入します。
4. CSS 宣言ブロックのstyle 属性を更新します。

length 属性は、 宣言内のCSS 宣言の数を返さなければなりません。

item(index) メソッドは、位置 index にあるCSS 宣言のプロパティ名を返さなければなりません。

getPropertyValue(property) メソッドは、次の手順を実行しなければなりません:

1. property がカスタム プロパティでない場合、次の下位手順に従います:
   1. property を、property をASCII 小文字に変換したものとします。
   2. property が一括指定プロパティの場合、次の下位手順に従います:
      1. list を新しい空の配列とします。
      2. property がマッピングされる各個別指定プロパティ longhand について、 正準順に次の下位手順に従います:
         1. longhand が、宣言内のCSS 宣言のプロパティ 名と大文字小文字を区別して一致する場合、 declaration をそのCSS 宣言とし、それ以外の場合は null とします。
         2. declaration が null の場合、空文字列を返します。
         3. declaration を list に追加します。
      3. list 内のすべての宣言のimportant フラグが同じ場合、 list を直列化したものを返します。
      4. 空文字列を返します。
2. property が、宣言内のCSS 宣言のプロパティ名と大文字小文字を区別して一致する場合、 その宣言のCSS 値を直列化する処理を呼び出した結果を返します。
3. 空文字列を返します。

getPropertyPriority(property) メソッドは、次の手順を実行しなければなりません:

1. property がカスタム プロパティでない場合、次の下位手順に従います:
   1. property を、property をASCII 小文字に変換したものとします。
   2. property が一括指定プロパティの場合、次の下位手順に従います:
      1. list を新しい配列とします。
      2. property がマッピングされる各個別指定プロパティ longhand について、 longhand を引数として getPropertyPriority() を呼び出した結果を list に追加します。
      3. list 内のすべての項目が文字列「important」の場合、 文字列「important」を返します。
2. property が、宣言内にあり、important フラグが設定されたCSS 宣言のプロパティ名と大文字小文字を区別して一致する場合、文字列 「important」を返します。
3. 空文字列を返します。

setProperty(property, value, priority) メソッドは、次の手順を実行しなければなりません:

1. 算出済みフラグが設定されている場合、 NoModificationAllowedError 例外をスローします。
2. property がカスタム プロパティでない場合、次の下位手順に従います:
   1. property を、property をASCII 小文字に変換したものとします。
   2. property がサポートされる CSS プロパティと大文字小文字を区別して一致しない場合、返ります。
3. value が空文字列の場合、property を引数として removeProperty() を呼び出して返ります。
4. priority が空文字列ではなく、文字列 「important」とASCII 大文字小文字を区別せず一致しない場合、返ります。
5. component value list を、プロパティ property について value を構文解析した結果とします。

   注: value に 「!important」を含めることはできません。

6. component value list が null の場合、返ります。
7. updated を false とします。
8. property が一括指定プロパティの場合、property がマッピングされる各個別指定プロパティ longhand について正準 順に次の下位手順に従います:
   1. longhand result を、component value list からの適切な値を使用し、 priority が空文字列でない場合は important フラグを設定し、 それ以外の場合は未設定にし、宣言のリストを宣言として、 longhand のCSS 宣言を設定する処理の結果とします。
   2. longhand result が true の場合、updated を true とします。
9. それ以外の場合、updated を、値 component value list を使用し、 priority が空文字列でない場合は important フラグを設定し、 それ以外の場合は未設定にし、宣言のリストを宣言として、 property のCSS 宣言を設定する処理の結果とします。
10. updated が true の場合、CSS 宣言ブロックのstyle 属性を更新します。

宣言のリスト declarations 内で、値 component value list と、 任意で設定された important フラグを使用して、property のCSS 宣言を設定するには、ユーザーエージェントは、その手順の後に次の制約が満たされることを 保証しなければなりません:

• CSS 宣言のうち、そのプロパティ名が property と大文字小文字を区別して一致するものが、declarations に正確に 1 つ 存在しなければなりません。 以下では、この宣言を対象宣言と呼びます。
• 対象宣言の値は成分値リストでなければならず、 対象宣言のimportant フラグは、important フラグが設定済みの場合は設定済みでなければならず、それ以外の場合は未設定でなければなりません。
• 対象宣言ではないCSS 宣言を 変更したり、declarationsに挿入したり、 declarationsから削除したりしてはなりません。
• declarations内に、propertyと同じ論理プロパティグループに属するCSS 宣言があり、そのプロパティ名が propertyとは異なるマッピングロジックを持つ場合、対象宣言は、 それらすべてのCSS 宣言より後のインデックスに なければなりません。
• この手順の結果として declarations の直列化結果が変更された場合、手順は true を返さなければなりません。 それ以外の場合は false を返してもかまいません。

「観測可能な副作用を declarations の外部で発生させてはならない」のようなものを追加するべきか? 現在の制約には未定義動作を許す穴があるように見えます。

注: CSS 宣言を設定する手順は、 このレベルの CSSOM では定義されていません。ユーザーエージェントは、 上記の制約を満たす限り、異なるアルゴリズムを使用してもかまいません。

removeProperty(property) メソッドは、次の手順を実行しなければなりません:

1. 算出済みフラグが設定されている場合、 NoModificationAllowedError 例外をスローします。
2. property がカスタム プロパティでない場合、 property を、property をASCII 小文字に変換したものとします。
3. value を、property を引数として getPropertyValue() を呼び出した戻り値とします。
4. removed を false とします。
5. property が一括指定プロパティの場合、property がマッピングされる各個別指定プロパティ longhand について:
   1. longhand が、宣言内のCSS 宣言のプロパティ名でない場合、続行します。
   2. そのCSS 宣言を削除し、removed を true とします。
6. それ以外の場合、property が、宣言内のCSS 宣言のプロパティ名と大文字小文字を区別して一致する場合、そのCSS 宣言を削除し、removed を true とします。
7. removed が true の場合、CSS 宣言ブロックのstyle 属性を更新します。
8. value を返します。

parentRule 属性は、 親 CSS 規則を返さなければなりません。

cssFloat 属性は、取得時に、 float を引数として getPropertyValue() を呼び出した結果を返さなければなりません。設定時、この属性は、 float を第1引数、指定された値を第2引数とし、第3引数を指定せずに setProperty() を呼び出さなければなりません。スローされた例外はすべて再スローしなければなりません。

サポートされる CSS プロパティである各 CSS プロパティ property について、次の部分インターフェイスが適用されます。ここで、camel-cased attribute は、 property についてCSS プロパティから IDL 属性への変換アルゴリズムを実行して得られます。

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString _camel_cased_attribute;
};

camel-cased attribute 属性は、取得時に、 camel-cased attribute についてIDL 属性から CSS プロパティへの変換アルゴリズムを実行した結果を 引数として getPropertyValue() を呼び出した 結果を返さなければなりません。

camel-cased attribute 属性の設定時には、camel-cased attribute についてIDL 属性から CSS プロパティへの変換アルゴリズムを実行した結果を 第1引数、指定された値を第2引数とし、第3引数を指定せずに setProperty() を呼び出さなければなりません。スローされた 例外はすべて再スローしなければなりません。

サポートされる CSS プロパティであり、文字列 -webkit- で始まる各 CSS プロパティ property について、 次の部分インターフェイスが適用されます。ここで、webkit-cased attribute は、property についてCSS プロパティから IDL 属性への変換アルゴリズムを、 先頭小文字フラグを設定して実行することによって得られます。

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString _webkit_cased_attribute;
};

webkit-cased attribute 属性は、 取得時に、webkit-cased attribute についてIDL 属性から CSS プロパティへの変換アルゴリズムを ダッシュ接頭辞フラグを設定して実行した結果を引数として、getPropertyValue() を呼び出した結果を返さなければなりません。

webkit-cased attribute 属性の設定時には、webkit-cased attribute についてIDL 属性から CSS プロパティへの変換アルゴリズムを ダッシュ接頭辞フラグを設定して実行した結果を第1引数、指定された値を第2引数とし、第3引数を指定せずに、 setProperty() を呼び出さなければなりません。 スローされた例外はすべて再スローしなければなりません。

サポートされる CSS プロパティである各 CSS プロパティ property について、プロパティ名に「-」(U+002D) を含まないプロパティを 除き、次の部分インターフェイスが適用されます。ここで、dashed attribute は property です。

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString _dashed_attribute;
};

dashed attribute 属性は、取得時に、dashed attribute を引数として getPropertyValue() を呼び出した結果を返さなければなりません。

dashed attribute 属性の設定時には、 dashed attribute を第1引数、指定された値を第2引数とし、第3引数を指定せずに setProperty() を呼び出さなければなりません。スローされた 例外はすべて再スローしなければなりません。

element.style['font-size'];

property について、任意で 先頭小文字フラグを設定したCSS プロパティ から IDL 属性への変換アルゴリズムは、次のとおりです:

1. output を空文字列とします。
2. uppercase next を未設定とします。
3. 先頭小文字フラグが設定されている場合、property から先頭文字を削除します。
4. property 内の各文字 c について:
   1. c が「-」(U+002D) の場合、uppercase next を設定済みとします。
   2. それ以外の場合、uppercase next が設定済みであれば、uppercase next を未設定とし、 c をASCII 大文字に変換して output に追加します。
   3. それ以外の場合、c を output に追加します。
5. output を返します。

attribute について、任意で ダッシュ接頭辞フラグを設定したIDL 属性 から CSS プロパティへの変換アルゴリズムは、次のとおりです:

1. output を空文字列とします。
2. ダッシュ接頭辞フラグが設定されている場合、「-」(U+002D) を output に追加します。
3. attribute 内の各文字 c について:
   1. c が U+0041 から U+005A（ASCII 大文字）の範囲にある場合、「-」 (U+002D) と、それに続く c をASCII 小文字に変換したものを output に追加します。
   2. それ以外の場合、c を output に追加します。
4. output を返します。

6.7. CSS 値

6.7.1. CSS 値の構文解析

指定された property について value をCSS 値として構文解析するとは、 次の手順に従うことです:

1. list を、value からコンポーネント値のリストを構文解析する処理を呼び出して返された値とします。
2. list を、CSS 仕様内のプロパティ property の文法と照合します。
3. 上記の手順が失敗した場合、null を返します。
4. list を返します。

注: 「!important」宣言は プロパティ値空間の一部ではないため、CSS 値を構文解析する処理は null を返します。

6.7.2. CSS 値の直列化

CSS 宣言 declaration、または個別指定CSS 宣言のリスト list のCSS 値を直列化するには、次の規則に従います:

1. このアルゴリズムがリスト list を使用して呼び出された場合:

   1. shorthand を、list 内のすべての個別指定プロパティに 正確にマッピングされる最初の一括指定プロパティを、 優先順で選んだものとします。

   2. そのような一括指定がないか、shorthand が list 内のすべてのプロパティの値を 正確に表現できない場合、 空文字列を返します。

   3. それ以外の場合、プロパティ shorthand の仮想的な宣言について、 その値を list 内の宣言の値を組み合わせたものとしてCSS 値を直列化します。

2. declaration の値を CSS コンポーネント値のリスト components として表します。このリストは、 プロパティの文法に従って構文解析されたとき、 その値を表すものとします。 さらに:

   • 特定のコンポーネント値が、値の意味を変更することなく 任意の順序で現れることができる場合 （通常、値の構文では二重縦線 || で表されるパターン）、 プロパティ定義表に示されたコンポーネント値の正準順を使用するように コンポーネント値を並べ替えます。

   • コンポーネント値を、値の意味を変更することなく省略したり、 より短い表現で置き換えたりできる場合、 それらを省略または置換します。

   • 上記のいずれかの構文変換によって後方互換性が低下する場合、 その変換を実行しません。

   注: ここで説明する規則は、直列化の一般的な 原則を概説するものです。 歴史的な理由により、一部のプロパティは異なる方法で直列化されますが、 リソース不足のため、ここでは意図的に未定義としています。 詳細については、お近くのリバースエンジニアに相談してください。

3. components からすべての<whitespace-token>を削除します。

4. components 内の各コンポーネント値を、CSS コンポーネント値を直列化する処理を呼び出した結果で置き換えます。

5. components の項目を単一の文字列に連結し、 第2項目が「,」(U+002C COMMA) でない限り、項目の各組の間に 「 」(U+0020 SPACE) を挿入します。 その結果を返します。

CSS コンポーネント値を直列化する方法は、次のようにコンポーネントによって異なります:

キーワード

キーワードをASCII 小文字に変換したもの。

<angle>

<number> に従って直列化した <number> コンポーネントに、 それぞれの仕様で定義された正準形式の単位を続けたもの。

指定値と算出値または解決値を区別するべきでしょう。

<color>

<color> が解決値のコンポーネントである場合、CSS Color 4 § 4.6 <color> 値の解決を参照してください。

<color> が算出値のコンポーネントである場合、CSS Color 4 § 4.7 <color> 値の直列化を参照してください。

<color> が指定値のコンポーネントである場合、 次のように色を返します:

1. 色が作者によって明示的に指定された場合、作者が指定した元の 色値を返します。
2. それ以外の場合、色が算出値のコンポーネントであった場合に返される 値を返します。

作者が 指定した値も、算出値と同様に大文字小文字を正規化するべきか? それとも元の大文字小文字を 保持するべきか?

<alphavalue>

値が内部的に0以上255以下の整数（すなわち8ビット符号なし 整数）として表される場合、 次の手順に従います:

1. alpha を指定された整数とします。
2. 0以上100以下の整数のうち、 2.55 を乗算して最も近い整数に丸めたとき（2つの値が 同じ近さの場合は切り上げる）、alpha と等しくなるものが存在する場合、 rounded をその整数を100で除算した値とします。
3. それ以外の場合、rounded を alpha を 0.255 で除算して 最も近い整数に丸め（2つの値が同じ近さの場合は切り上げる）、 さらに1000で除算した値とします。
4. rounded を <number> として直列化した結果を返します。

それ以外の場合、指定された値を <number> として直列化した結果を返します。

<counter>

次のアルゴリズムの戻り値:

1. s を空文字列とします。
2. <counter> に3つの CSS コンポーネント値がある場合、文字列 「counters(」を s に追加します。
3. <counter> に2つの CSS コンポーネント値がある場合、文字列 「counter(」を s に追加します。
4. list を、<counter> に属する CSS コンポーネント値のリストとし、 最後の CSS コンポーネント値が「decimal」の場合はそれを省略します。
5. list 内の各項目を、その項目に対してCSS コンポーネント値を直列化する処理を呼び出した結果とします。
6. list に対してコンマ区切りリストを直列化する処理を呼び出した結果を s に追加します。
7. 「)」(U+0029) を s に追加します。
8. s を返します。

<frequency>

<number> に従って直列化した <number> コンポーネントに、 それぞれの仕様で定義された正準形式の単位を続けたもの。

指定値と算出値または解決値を区別するべきでしょう。

<identifier>

識別子を識別子として直列化したもの。

<integer>

数字 0-9 (U+0030 から U+0039) を使用した、可能な限り 最短形式の10進整数。負の場合は先頭に「-」(U+002D) を 付けます。

<length>

<number> に従って直列化した <number> コンポーネントに、 それぞれの仕様で定義された正準形式の単位を続けたもの。

指定値と算出値または解決値を区別するべきでしょう。

<number>

数字 0-9 (U+0030 から U+0039) を使用した、可能な限り最短形式の10進数。 小数部がある場合は「.」で区切り、 必要に応じて値を丸めて小数点以下6桁を超えないようにし、 負の場合は先頭に「-」(U+002D) を付けます。

注: 科学的記数法は使用しません。

<percentage>

<number> に従って直列化した <number> コンポーネントに、 リテラル文字列「%」(U+0025) を続けたもの。

<resolution>

CSS ピクセルあたりのドット数で表した解像度を <number> に従って直列化し、リテラル文字列「dppx」を続けたもの。

<ratio>

分子を <number> に従って直列化したものに、 リテラル文字列「 / 」、 分母を <number> に従って直列化したものの順で続けたもの。

<shape>

次のアルゴリズムの戻り値:

1. s を文字列「rect(」とします。
2. list を、<shape> に属する CSS コンポーネント値のリストとします。
3. list 内の各項目を、その項目のCSS コンポーネント値を直列化する処理を呼び出した結果とします。
4. list に対してコンマ区切りリストを直列化する処理を呼び出した結果を s に追加します。
5. 「)」(U+0029) を s に追加します。
6. s を返します。

<string>

<family-name>

<specific-voice>

文字列を文字列として直列化したもの。

<time>

秒単位の時間を <number> に従って直列化し、 リテラル文字列「s」を続けたもの。

<url>

絶対 URL 文字列をURL として直列化したもの。

これは 指定された <url> 値と 算出された値を区別するべきです。#3195 を参照してください。

<absolute-size>、 <border-width>、 <border-style>、 <bottom>、 <generic-family>、 <generic-voice>、 <left>、 <margin-width>、 <padding-width>、 <relative-size>、 <right>、および <top> は、この仕様ではマクロとみなされます。これらはすべて、上記で概説した コンポーネントのインスタンスを表します。

1つの案は、 上記の定義を CSS コンポーネントを定義する草案へ移動することにより、 CSS3/CSS4 のタイムラインのどこかでこの節を 削除できるようにすることです。

6.7.2.1. 例

指定値について、変換前と変換後の結果の例をいくつか示します。 変換前の列は作者がスタイルシートに記述した内容であり、 変換後の列は DOM を照会したときに返される内容を示します。

7. CSS 宣言ブロックへの DOM アクセス

7.1. ElementCSSInlineStyle ミックスイン

ElementCSSInlineStyle ミックスインは、要素のインラインスタイルプロパティへのアクセスを提供します。

interface mixin ElementCSSInlineStyle {
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

style 属性は、CSS 宣言 ブロックオブジェクトを返さなければなりません。その算出済みフラグは未設定で、親 CSS 規則は null であり、 所有者ノードは文脈 オブジェクトです。

ユーザーエージェントが HTML をサポートする場合、次の IDL が適用されます: [HTML]

HTMLElement includes ElementCSSInlineStyle;

ユーザーエージェントが SVG をサポートする場合、次の IDL が適用されます: [SVG11]

SVGElement includes ElementCSSInlineStyle;

ユーザーエージェントが MathML をサポートする場合、次の IDL が適用されます: [MathML-Core]

MathMLElement includes ElementCSSInlineStyle;

7.2. Window インターフェイスの拡張

partial interface Window {
  [NewObject] CSSStyleDeclaration getComputedStyle(Element elt, optional CSSOMString? pseudoElt);
};

getComputedStyle(elt, pseudoElt) メソッドは次の 手順を実行しなければなりません:

1. doc を elt のノード 文書とします。
2. obj を elt とします。
3. pseudoElt が指定され、かつ空文字列でない場合:
   1. 構文解析: pseudoElt を <pseudo-element-selector> として構文解析し、結果を type とします。
   2. type が失敗であるか、::slotted() または ::part() 疑似要素である場合、スローするのは TypeError 例外です。
   3. それ以外の場合、obj を指定された elt の疑似要素とします。

   注: CSS2 疑似要素は、二重コロン版と 単一コロン版の両方に 一致するべきです。つまり、:before と ::before は両方とも 上記に一致するべきです。

4. decls をCSS 宣言の空のリストとします。
5. elt が接続済みで、フラットツリーの一部であり、 そのシャドウを含むルートが、閲覧コンテキストを持ち、その閲覧コンテキストに 閲覧コンテキストコンテナーが存在しないか、またはその閲覧コンテキストコンテナーがレンダリング中である場合、 decls を、サポートされる CSS プロパティであるすべてのロングハンドプロパティを 辞書順に並べたリストに設定し、 その値を、doc に関連付けられたスタイル規則を使用して obj に対して算出された解決値とします。さらに、decls に、obj に対するカスタム プロパティのうち、その算出 値が保証された無効値でないものをすべて追加します。

   ショートハンドを 処理する UA があり、すべての UA は overflow のように、以前はロングハンドであったショートハンドを処理します。#2529 を参照してください。

   カスタム プロパティの順序は現在未定義です。#4947 を参照してください。

6. 次のプロパティを持つライブなCSS 宣言ブロックを返します:

   算出済みフラグ

   設定済み。

   宣言

   decls。

   親 CSS 規則

   null。

   所有者ノード

   obj。

getComputedStyle() メソッドは、オリジンクリーンフラグが未設定であるCSS スタイル シートの情報を公開します。

getComputedStyle() は 有用な直列化結果を提供するべきでしょうか？ #1033 を参照してください

8. ユーティリティ API

8.1. CSS.escape() メソッド

CSS 名前空間は、ほかに属さない有用な CSS 関連関数を保持します。

[Exposed=Window]
namespace CSS {
  CSSOMString escape(CSSOMString ident);
};

これは以前、 静的メソッドのみを保持する IDL インターフェイスとして 規定されていました。 IDL 名前空間への切り替えは*ほぼ*同一であるため、 互換性上の懸念は生じないと予想されます。 懸念が見つかった場合は報告してください。 この変更を元に戻すことを検討します。

escape(ident) 操作は、ident の 識別子を直列化する処理を呼び出した結果を返さなければなりません。

var element = document.querySelector('#' + CSS.escape(id) + ' > img');

var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');

CSS 名前空間に対する操作を定義し、 何らかの状態を保存する仕様は、その状態を現在のグローバル オブジェクトの関連付けられた Document に保存するべきです。

9. 解決値

getComputedStyle() は歴史的に、 要素または疑似要素の「算出値」を返すものと 定義されていました。しかし、「算出値」の概念は CSS の 改訂の間に変化した一方で、getComputedStyle() の実装は、配備済みスクリプトとの互換性を保つため 同じままでなければなりませんでした。この問題に対処するため、 この仕様では解決値という概念を導入します。

指定されたロングハンドプロパティの解決値は、 次のように決定できます:

background-color

border-block-end-color

border-block-start-color

border-bottom-color

border-inline-end-color

border-inline-start-color

border-left-color

border-right-color

border-top-color

box-shadow

caret-color

color

outline-color

別の仕様で定義された、color のような解決 値の特例プロパティ

解決値は 使用値です。

line-height

解決値は、算出 値が normal の場合は normal であり、それ以外の場合は使用値です。

block-size

height

inline-size

margin-block-end

margin-block-start

margin-bottom

margin-inline-end

margin-inline-start

margin-left

margin-right

margin-top

padding-block-end

padding-block-start

padding-bottom

padding-inline-end

padding-inline-start

padding-left

padding-right

padding-top

width

別の仕様で定義された、height のような解決 値の特例プロパティ

プロパティが要素または疑似要素に適用され、display プロパティの解決値が none または contents でない場合、解決値は使用値です。 それ以外の場合、解決値は算出 値です。

bottom

left

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

right

top

別の仕様で定義された、top のような解決値の 特例プロパティ

プロパティが位置指定された要素に適用され、display プロパティの解決値が none または contents でなく、かつプロパティが過剰制約されていない場合、 解決値は使用値です。 それ以外の場合、解決値は算出 値です。

別の仕様で定義された解決値の特例 プロパティ

関連する仕様で定義されているとおりです。

その他のプロパティ

解決値は 算出値です。

10. IANA に関する考慮事項

10.1. Default-Style

この節では、恒久メッセージヘッダーフィールドレジストリへの登録対象となる ヘッダーフィールドについて説明します。

ヘッダーフィールド名

Default-Style

適用可能なプロトコル

http

状態

標準

作成者／変更管理者

W3C

仕様文書

この文書が関連する仕様です。

関連情報

なし。

11. 変更履歴

この節では、この仕様の各公開版間の変更の一部を記録します。この節は 網羅的なものではありません。バグ修正と編集上の変更は 通常、記載されません。

11.1. 2016 年 3 月 17 日からの変更

• <resolution> の直列化が変更されました。

• [CEReactions] IDL 拡張属性が追加されました。

• 論理プロパティの解決値が追加されました。

• display: contents に対する getComputedStyle が変更されました。

• MediaList.item は直列化結果を返すようになりました。

• MediaList.item は、重要度が異なる場合にショートハンドを直列化しません。

• ほかの仕様が解決値を規定できるようになりました。

• insertRule の index 引数が省略可能になりました。

• Stylesheet および CSSImportRule の href 属性が USVString を使用するようになりました。

• CSSOMString が導入されました。

• CSSMediaRule および CSSFontFaceRule の直列化が追加されました。

• style 属性での直列化と再構文解析を避けるため、CSS 宣言 ブロックに更新中フラグが追加されました。

• 宣言値の直列化が適切に定義されるようになりました。

• getComputedStyle は、ノードの文書のスタイル規則を返すようになりました。

• getComputedStyle に渡された疑似要素が不明であるか、::slotted() である場合、TypeError がスローされます。

• CSS がインターフェイスから名前空間に切り替えられました。

• 実装からの関心がなかったため、setPropertyValue と setPropertyPriority が CSSStyleDeclaration から削除されました。

• styleSheets IDL 属性が Document から DocumentOrShadowRoot に移動されました。

• LinkStyle.sheet は StyleSheet ではなく CSSStyleSheet を返すようになりました

• 非推奨の CSSStyleSheet メンバーが定義されました。

• CSSRule.type 属性が非推奨になりました。

• <ratio> の直列化が追加されました。

• CSSStyleDeclaration.cssText は、算出スタイルに対して空文字列を返すようになりました。

• カスタムプロパティが getComputedStyle に含まれるようになりました。

• MathML IDL が導入されました。

• CSSKeyframesRule および CSSKeyframeRule の直列化が追加されました。

• メディアクエリの直列化が変更されました。

• ショートハンドのロングハンド間に、異なるプロパティグループ／マッピングロジックを持つロングハンドが 存在する場合、そのショートハンドは直列化されません。

• CSSStyleRule の直列化がネストを認識するようになりました。

• 構築可能なスタイルシートが導入されました。

11.2. 2013 年 12 月 5 日からの変更

• 代替スタイルシート用 API が削除されました: selectedStyleSheetSet、 lastStyleSheetSet、preferredStyleSheetSet、styleSheetSets、 Document の enableStyleSheetsForSet()。

• Element の pseudo() メソッドと PseudoElement インターフェイスが 削除されました。

• Element の cascadedStyle、defaultStyle、rawComputedStyle、 usedStyle IDL 属性が削除されました。

• CSSRule の cssText IDL 属性のセッターが、 何も行わないよう変更されました。

• CSSStyleDeclaration に webkitFoo 形式（小文字の w を使用）の IDL 属性が追加されました。

• CSSNamespaceRule が読み取り専用に戻されました。

• insertRule() における @charset の処理が削除されました。

• CSSCharsetRule が再び削除されました。

• 識別子と文字列の直列化が変更されました。

• セレクターの直列化が、結合子 ">>" と "||"、および属性 セレクターの "i" フラグをサポートするようになりました。

• :lang() の直列化が変更されました。

• <color> および <number> の直列化が変更されました。

• CSSStyleDeclaration の setProperty() が変更されました。

11.3. 2011 年 7 月 12 日から 2013 年 12 月 5 日までの変更

• オリジンをまたぐスタイルシートの読み取りまたは変更が許可されなくなりました。
• CSSCharsetRule が再導入されました。
• CSSGroupingRule と CSSMarginRule が導入されました。
• CSSNamespaceRule が変更可能になりました。
• CSS 宣言ブロックの構文解析と直列化が 定義されるようになりました。
• setProperty()、 getPropertyValue() などで、ショートハンドがサポートされるようになりました。
• setPropertyValue と setPropertyPriority が CSSStyleDeclaration に追加されました。
• 各種インターフェイスの style 属性と media 属性に、 [PutForwards] WebIDL 拡張属性が付与されました。
• Element の pseudo() メソッドが導入されました。
• PseudoElement インターフェイスが導入されました。
• Element および PseudoElement に、 cascadedStyle、rawComputedStyle、usedStyle 属性が導入されました。
• CSS.escape() 静的メソッドが導入されました。

12. セキュリティおよびプライバシーに関する考慮事項

この仕様について、新たなセキュリティまたはプライバシー上の考慮事項は報告されていません。

13. 謝辞

編集者は、この仕様への貢献について Alexey Feldgendler、 Benjamin Poulain、 Björn Höhrmann、 Boris Zbasky、 Brian Kardell、 Chris Dumez、 Christian Krebs、 Daniel Glazman、 David Baron、 Domenic Denicola、 Dominique Hazael-Massieux、fantasai、 Hallvord R. M. Steen、 Ian Hickson、 John Daggett、 Lachlan Hunt、 Mike Sherov、 Myles C. Maxfield、 Morten Stenshorne、 Ms2ger、 Nazım Can Altınova、 Øyvind Stenhaug、 Peter Sloetjes、 Philip Jägenstedt、 Philip Taylor、 Richard Gibson、 Robert O’Callahan、 Simon Sapin、 Sjoerd Visscher、 Sylvain Galineau、 Tarquin Wilton-Jones、 Xidorn Quan、および Zack Weinberg に感謝します。

また、代替スタイルシート API の 初版と、CSS 値の正規化 （現在の直列化）規則を執筆した Ian Hickson にも感謝します。