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

1. はじめに

この文書はCSSオブジェクトモデル（CSSOM）のコア機能を正式に規定します。他のCSSOM関連仕様や、CSS関連仕様では、これらのコア機能への拡張が定義されています。

CSSOMのコア機能は、スタイル関連の状態情報や処理へのアクセス・操作を、著者定義のスクリプトに提供する基本的な能力を中心に設計されています。

下記で定義される機能は、主にW3C DOMワーキンググループの従来の仕様、特に[DOM]に基づいています。本書は(1)テスト容易性や相互運用性向上のため、より技術的な明確さを提供し、(2)この文脈で必須と見なされなくなった、あまり広く実装されていない機能を非推奨または削除し、(3)広く実装されている、または今後広く実装が見込まれるいくつかの拡張を新たに規定することを目的としています。

2. 用語

この仕様では、DOM、HTML、CSS Syntax、Encoding、URL、Fetch、Associating Style Sheets with XML documents、XMLからの用語を使用します。[DOM] [HTML] [CSS3SYN] [ENCODING] [URL] [FETCH] [XML-STYLESHEET] [XML]

この仕様でオブジェクトAについて述べる場合、Aがインターフェイスであれば、一般的にそのインターフェイスを実装するオブジェクトを指します。

用語setとunsetは、2値フラグや変数の真偽値を指します。また、これらの用語は動詞としても使われ、それぞれ値を真または偽に変更する操作を指します。

用語対応スタイリング言語はCSSを指します。

注: 他のスタイリング言語がユーザーエージェントで対応された場合には、この仕様も必要に応じて更新される予定です。

用語対応CSSプロパティは、ユーザーエージェントが実装するCSSプロパティ（ベンダープレフィックス付きプロパティも含む。ただしカスタムプロパティは除く）を指します。対応CSSプロパティは、この仕様での比較のために小文字の形でなければなりません。

この仕様では、::beforeおよび::after疑似要素は、たとえボックスが生成されなくても、すべての要素で存在するものとみなします。

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

特に記載がない限り、文字列比較は大文字小文字区別で行います。

2.1. 一般的な直列化イディオム

文字をエスケープするとは、「\」（U+005C）に続けてその文字を並べた文字列を生成することを意味します。

文字をコードポイントとしてエスケープするとは、「\」（U+005C）に続き、そのUnicodeコードポイントを表す最小限の16進数（U+0030～U+0039、U+0061～U+0066）で表現し、最後にスペース（U+0020）を加えた文字列を生成することを意味します。

識別子を直列化するとは、識別子の各文字ごとに以下の規則を適用して連結した文字列を生成することを意味します：

• 文字がNULL（U+0000）の場合は、置換文字（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）の場合は、置換文字（U+FFFD）。
• 文字が[\1-\1f]（U+0001～U+001F）またはU+007Fの場合は、コードポイントとしてエスケープしたもの。
• 文字が'"'（U+0022）または「\」（U+005C）の場合は、エスケープしたもの。
• それ以外は文字そのもの。

注: 「'」（U+0027）はエスケープされません。なぜなら文字列は必ず'"'（U+0022）で直列化されるためです。

URLを直列化するとは、「url(」に続き、URLを文字列として直列化し、最後に「)」を付けた文字列を生成することを意味します。

LOCALを直列化するとは、「local(」に続き、LOCALを文字列として直列化し、最後に「)」を付けた文字列を生成することを意味します。

カンマ区切りリストを直列化するとは、リスト内のすべての項目を順に「, 」（COMMA（U+002C）＋スペース（U+0020））で区切って連結することを意味します。

空白区切りリストを直列化するとは、リスト内のすべての項目を順に「 」（スペース（U+0020））で区切って連結することを意味します。

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

3. CSSOMString

CSSOMインターフェイスの多くの文字列は、CSSOMString型を使用します。 各実装は、これをUSVStringまたはDOMStringのいずれかとして定義できます:

typedef USVString CSSOMString;

または、次のようにもできます:

typedef DOMString CSSOMString;

4. メディアクエリ

メディアクエリは[MEDIAQUERIES]で定義されています。このセクションでは、メディアクエリのAPIや直列化形式など、さまざまな概念を定義します。

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

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

注: 「無視」されたメディアクエリは「not all」に変換されます。

与えられた文字列sをメディアクエリとして構文解析するには、メディアクエリリストの構文解析手順に従い、複数のメディアクエリが得られた場合はnullを返し、ひとつだけの場合はそのメディアクエリを返します。

注: こちらも「無視」されたメディアクエリは「not all」になります。

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

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

1. メディアクエリリストが空の場合、空文字列を返す。
2. リスト内の各メディアクエリを、直列化し、カンマ区切りリストとして直列化する。

メディアクエリを直列化するには、空文字列sを用意し、以下の手順を実行します：

1. メディアクエリが否定されている場合は、"not"に続けてスペース（U+0020）をsに追加。
2. 識別子として直列化したメディアタイプ（ASCII小文字化）をtypeとする。
3. メディアクエリがメディア特性を含まない場合は、typeをsに追加し、sを返す。
4. typeが「all」でない場合、またはメディアクエリが否定されている場合は、type、スペース（U+0020）、"and"、スペース（U+0020）をsに追加。
5. 次に、各メディア特性について：
   1. 「(」（U+0028）に続け、メディア特性名（ASCII小文字化）をsに追加。
   2. 値が指定されている場合は、「:」（U+003A）、スペース（U+0020）、直列化されたメディア特性値をsに追加。
   3. 「)」(U+0029)をsに追加。
   4. 最後でない場合は、スペース（U+0020）、"and"、スペース（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列から探し、第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);
};

オブジェクトの対応プロパティインデックスは、メディアクエリの集合内のメディアクエリ数から1を引いた範囲の数字です。メディアクエリがなければ、対応プロパティインデックスもありません。

MediaListオブジェクトを生成するには、文字列textで以下の手順を行います：

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

mediaText属性は、取得時はメディアクエリの集合の直列化を返します。 設定時は次の手順を行います：

1. メディアクエリの集合を空にする。
2. 指定された値が空文字列なら終了。
3. 指定値を構文解析し、得られたすべてのメディアクエリをメディアクエリの集合に追加する。

item(index)メソッドは、メディアクエリの集合から指定されたindexのメディアクエリを直列化して返します。indexが集合内のメディアクエリ数以上ならnullを返します。

length属性は、メディアクエリの集合内のメディアクエリ数を返します。

appendMedium(medium)メソッドは、以下の手順を実行します：

1. 指定値を構文解析し、結果をmとする。
2. mがnullなら終了。
3. 比較して、mがMediaListの集合内の任意のメディアクエリと一致すれば終了。
4. mをメディアクエリの集合に追加する。

deleteMedium(medium)メソッドは、以下の手順を実行します：

1. 指定値を構文解析し、結果をmとする。
2. mがnullなら終了。
3. 比較して、mと一致するメディアクエリをメディアクエリの集合からすべて削除する。何も削除されなかった場合は、throwでNotFoundError例外を投げる。

5. セレクター

セレクターはSelectors仕様で定義されます。このセクションでは主に直列化方法を定義します。

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

セレクター群を構文解析するには、Selectors仕様で定義されたselectors_group生成規則を使って値を解析し、失敗しなければセレクター群を返し、失敗した場合はnullを返します。

5.2. セレクターの直列化

セレクター群を直列化するには、セレクター群の各セレクターを直列化し、それらの直列化結果をカンマ区切りリストとして直列化します。

セレクターを直列化するには、空文字列sを用意し、セレクターのチェーンの各部分ごとに次の手順を行い、最後にsを返します：

1. チェーン内の複合セレクターにある単純セレクターが1つで、それが全称セレクターなら、その直列化結果をsに追加。
2. それ以外の場合、複合セレクター内で全称セレクターでない単純セレクターかつ名前空間プレフィックスがデフォルト名前空間でないものについて、その直列化結果をsに追加。
3. これがセレクターのチェーンの最後でなければ、スペース（U+0020）、それぞれに応じて ">", "+", "~", ">>", "||" のいずれかのコンビネーター、コンビネーターが空白でなければさらにスペース（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+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を作成する手順を実行し、その結果を返します。

構築済みCSSStyleSheetを作成する CSSStyleSheetInit optionsを受け取り、以下の手順を実行します:

1. 新しいCSSStyleSheet オブジェクトsheetを作成する。
2. sheetのlocationを、ベースURL（関連付けられたDocumentの現在のグローバルオブジェクトの）に設定する。
3. sheetのstylesheet base URLを、optionsのbaseURL 属性値に設定する。
4. sheetの親CSSスタイルシートをnullに設定する。
5. sheetのオーナーノードをnullに設定する。
6. sheetのオーナーCSSルールをnullに設定する。
7. sheetのtitleを空文字列に設定する。
8. sheetのalternate flagを解除する。
9. sheetのorigin-clean flagを設定する。
10. sheetのconstructed flagを設定する。
11. sheetのConstructor documentを関連付けられたDocument（現在のグローバルオブジェクトの）に設定する。
12. media 属性が文字列の場合、その文字列からMediaListオブジェクトを作成し、sheetのmediaに設定する。 そうでない場合は、属性からメディアクエリリストを直列化し、その文字列でMediaListオブジェクトを作成しsheetのmediaに設定する。
13. disabled 属性がtrueの場合、 sheetのdisabled flagを設定する。
14. sheetを返す。

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

type

リテラル文字列 "text/css"。

location

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

親CSSスタイルシート

作成時に指定。親となるCSSスタイルシート、なければnull。

オーナーノード

作成時に指定。関連付けられたDOMノード、なければnull。

オーナーCSSルール

作成時に指定。親CSSスタイルシート内でこのスタイルシートを含む原因となったCSSルール、なければnull。

media

作成時に指定。関連付けられたMediaListオブジェクト。

このプロパティが文字列で指定された場合、mediaはその文字列を使ってMediaListオブジェクトを作成した結果に設定されます。

このプロパティがオーナーノードの属性で指定された場合、mediaはその属性値を使ってMediaListオブジェクトを作成した結果に設定されます。属性が設定・変更・削除されるたびに、mediaのmediaText 属性も新しい値（属性がなければnull）に設定されます。

注: mediaのmediaText 属性の変更は、オーナーノードの対応する属性値は変更しません。

注: CSSスタイルシートのオーナーノード（nullでなければ）は、その関連付けられたCSSスタイルシートがまさにこのCSSスタイルシートであるノードであり、CSSスタイルシートが追加された際のものです。

title

作成時に指定。CSSスタイルシートのタイトル（空文字列も可）。

以下の例では、最初のスタイルシートのtitleは非空、2つ目と3つ目は空です。

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

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

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

このプロパティがオーナーノードの属性で指定された場合、titleはその属性値に設定され、属性が設定・変更・削除されるたびに、titleは新しい値（または属性がなければ空文字列）に設定されます。

注: HTMLは、ノードが文書ツリー内にある場合のみ、titleをオーナーノードの属性として規定しています。

alternate flag

作成時に指定。セットまたは解除。デフォルトは解除。

以下のCSSスタイルシートはalternate flagがセットされています:

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

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

disabled flag

セットまたは解除。デフォルトは解除。

注: 解除されていてもCSSスタイルシートが実際にレンダリングに使用されるとは限りません。

CSSルール

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

origin-clean flag

作成時に指定。セットまたは解除。セットされていれば、APIでCSSルールの読み書きが可能。

constructed flag

作成時に指定。セットまたは解除。デフォルトは解除。IDLコンストラクターで作成されたスタイルシートかどうかを示す。

disallow modification flag

セットまたは解除。デフォルトは解除。セットされている場合、スタイルシートのルールの変更は許可されません。

constructor document

作成時に指定。構築済みスタイルシートが関連付けられているDocument。デフォルトはnull。constructed flagがセットされている場合のみ非null。

stylesheet base URL

スタイルシート内の相対URL解決時に使うベースURL。デフォルトはnull。constructed flagがセットされている場合のみ非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属性はtypeを返します。

href属性はlocationを返します。

ownerNode属性はオーナーノードを返します。

parentStyleSheet属性は親CSSスタイルシートを返します。

title属性はtitle（空文字列ならnull）を返します。

media属性はmediaを返します。

disabled属性の取得時は、disabled flagがセットされていればtrue、そうでなければfalseを返します。設定時は、新しい値がtrueならdisabled 属性をセットし、そうでなければ解除します。

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属性はowner CSS ruleを返さなければなりません。 null以外の値が一度でも返された場合は、その値が取得時に常に返されなければなりません。

cssRules属性は以下の手順に従います：

1. origin-clean flagが解除されている場合、throwで SecurityError 例外を投げます。
2. CSSルールを表す読み取り専用・ライブなCSSRuleList オブジェクトを返します。

   注: 返されるCSSRuleList オブジェクトは（スクリプトからは）読み取り専用ですが、ライブであるため内容が変化する場合があります。例えば、insertRule() やdeleteRule() を呼ぶことで、返されたオブジェクトが変化します。

insertRule(rule, index)メソッドは以下の手順を実行します：

1. origin-clean flagが解除されている場合、throwで SecurityError 例外を投げます。
2. disallow modification flagがセットされている場合は、 NotAllowedError DOMExceptionをthrowします。
3. parsed ruleをruleでルールを構文解析することで得ます。
4. parsed ruleが構文エラーの場合はparsed ruleを返します。
5. parsed ruleが@importルールで、かつconstructed flagがセットされている場合は、 SyntaxError DOMExceptionをthrowします。
6. ruleをinsert a CSS ruleとしてCSSルールのindex位置に挿入し、その結果を返します。

deleteRule(index)メソッドは以下の手順を実行します：

1. origin-clean flagが解除されている場合、throwで SecurityError 例外を投げます。
2. disallow modification flagがセットされている場合は、 NotAllowedError DOMExceptionをthrowします。
3. CSSルールを削除する手順で、CSSルールのindex位置から削除します。

replace(text) メソッドは以下の手順を実行します：

1. promiseというプロミスを用意します。
2. constructed flagがセットされていない、またはdisallow modification flagがセットされている場合、 promiseをNotAllowedError DOMExceptionでrejectし、promiseを返します。
3. disallow modification flagをセットします。
4. 並行して以下の手順を行います：
   1. rulesをtextからルール一覧を構文解析することで得ます。rulesがルール一覧でなければ（解析時にエラーがあれば）空リストにします。
   2. rulesが1つ以上の@importルールを含む場合、それらのルールを削除します。
   3. sheetのCSSルールをrulesに設定します。
   4. sheetのdisallow modification flagを解除します。
   5. promiseをsheetでresolveします。
5. promiseを返します。

replaceSync(text) メソッドは、 CSSStyleSheet上で、textを使いCSSStyleSheetのルールを同期的に置き換える手順を実行します。

CSSStyleSheetのルールを同期的に置き換えるには、sheetとtextで以下の手順を実行します：

1. constructed flagがセットされていない、またはdisallow modification flagがセットされている場合、 NotAllowedError DOMExceptionをthrowします。
2. rulesをtextからルール一覧を構文解析することで得ます。rulesがルール一覧でなければ（解析時にエラーがあれば）空リストにします。
3. rulesが1つ以上の@importルールを含む場合、それらのルールを削除します。
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. insertRule()をruleとindexを引数に呼び出します。
8. -1を返します。

著者はこれらのメンバーの使用を避け、標準的なCSSStyleSheet インターフェイスを使用・推奨すべきです。 これはCSSGroupingRuleとも一貫性があります。

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

以下は各DocumentOrShadowRoot オブジェクトに関連付けられる新たな概念です。

各DocumentOrShadowRoot は、0個以上のCSSスタイルシートのリストを持ち、これをdocument or shadow root CSS style sheetsと呼びます。これは順序付きリストで、以下を含みます：

1. HTTP Linkヘッダーから作成されたCSSスタイルシート（ヘッダー順）
2. DocumentOrShadowRootに関連付けられたCSSスタイルシート（ツリー順）

各DocumentOrShadowRoot は、0個以上のCSSスタイルシートのリストを持ち、これをfinal CSS style sheetsと呼びます。これは順序付きリストで、以下を含みます：

1. document or shadow root CSS style sheets
2. DocumentOrShadowRootの adoptedStyleSheetsの backing list（配列順）

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

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

   origin-clean flagが解除されている場合、ユーザーのイントラネット情報が漏れる可能性があります。

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

1. CSSスタイルシートを、適切な位置でdocument or shadow root CSS style sheetsリストに追加します。以降の手順はdisabled flagに関する処理です。
2. disabled flagがセットされていれば終了します。
3. titleが空文字列でなく、alternate flag解除、かつpreferred CSS style sheet set nameが空文字列なら、preferred CSS style sheet set nameを変更し、titleにします。
4. 以下のいずれかの場合は、disabled flagを解除し、終了します：
   • titleが空文字列
   • last CSS style sheet set nameがnull、かつtitleが大文字小文字区別でpreferred CSS style sheet set nameと一致
   • titleが大文字小文字区別でlast CSS style sheet set nameと一致
5. disabled flagをセットします。

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

1. CSSスタイルシートをdocument or shadow root CSS style sheetsリストから削除します。
2. CSSスタイルシートの親CSSスタイルシート、owner node、owner CSS ruleをnullに設定します。

persistent CSSスタイルシートは、document or shadow root CSS style sheetsのCSSスタイルシートのうち、 titleが空文字列であり、alternate flagが解除されているものです。

CSSスタイルシートセットは、 document or shadow root CSS style sheetsから、 titleが空文字列でない複数のCSSスタイルシートを同じタイトルごとに並べた順序付きコレクションです。

CSSスタイルシートセット名は、 CSSスタイルシートセットが共有するtitleです。

enabled CSSスタイルシートセットは、 CSSスタイルシートセット内の各CSSスタイルシートが disabled flagを解除されているものです。

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

1. nameが空文字列なら、CSSスタイルシートセット内の各CSSスタイルシートに対し disabled flagをセットし、終了します。
2. CSSスタイルシートセット内で、 CSSスタイルシートセット名が nameと大文字小文字区別で一致するCSSスタイルシートすべての disabled flagを解除し、それ以外のCSSスタイルシートにはセットします。

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

1. CSSスタイルシートセットを有効化する手順をnameで実行します。
2. last CSS style sheet set nameをnameに設定します。

last CSSスタイルシートセット名は、 直近でCSSスタイルシートセットが選択された際の名前を判定する概念です。初期値はnullです。

preferred CSSスタイルシートセット名は、 どのCSSスタイルシートのdisabled flagを解除すべきかを判定する概念です。初期値は空文字列です。

preferred CSSスタイルシートセット名を変更するには、名前nameで以下の手順を実行します：

1. currentをpreferred CSS style sheet set nameとします。
2. preferred CSS style sheet set nameをnameに設定します。
3. nameがcurrentと大文字小文字区別で一致しない、かつlast CSS style sheet set nameがnullなら、CSSスタイルシートセットを有効化する手順をnameで実行します。

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スタイルシート数から1引いた範囲の数字です。CSSスタイルシートがなければ、対応プロパティインデックスもありません。

item(index)メソッドは、コレクション内のindex番目のCSSスタイルシートを返します。コレクションに該当オブジェクトがなければnullを返します。

length属性は、コレクションが表すCSSスタイルシート数を返します。

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

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

styleSheets属性は、StyleSheetList コレクションを返し、document or shadow root CSS style sheetsを表します。

インデックス値の設定アルゴリズムは、adoptedStyleSheets属性に対して、valueとindexで次を行います:

1. valueのconstructed flagがセットされていない、またはそのconstructor documentがこのDocumentOrShadowRootのnode documentと一致しなければ、"NotAllowedError"DOMExceptionをthrowします。

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

このセクションでは、CSSスタイルシートのオーナーノードが実装すべきインターフェイスと、リンク関係タイプが"stylesheet"とASCII大文字小文字区別なしで一致する場合のxml-stylesheet処理命令やHTTP Linkヘッダーの要件を定義します。

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

CSSスタイルシートを取得するには、解析済みURLparsed URL、リファラーreferrer、文書document、（オプションで）パラメータ集合parameters（リクエスト生成時に使用）をもとに以下の手順を実行します:

1. originをdocumentのオリジンとする。
2. requestを新しいリクエストとして、urlにparsed URL、originにorigin、referrerにreferrer、指定されていればパラメータ集合parametersを設定する。
3. response を request をフェッチした結果とする。
4. responseが利用可能になるまで待つ。
5. responseがネットワークエラーなら、エラーを返す。
6. documentがquirksモードであり、responseがCORS-same-origin、さらにresponseのContent-Typeメタデータが対応スタイリング言語でない場合、Content-Typeメタデータをresponseのtext/cssに変更する。
7. responseが対応スタイリング言語でなければ、エラーを返す。
8. responseを返す。

6.3.2. LinkStyle インターフェイス

ノードの関連付けCSSスタイルシートは、document or shadow root CSS style sheetsリスト内で、そのオーナーノードが当該ノードであるCSSスタイルシートです。 このノードはLinkStyle インターフェイスも実装しなければなりません。

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

sheet属性は、ノードの関連付けCSSスタイルシートを返し、なければnullを返します。 関連付け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;

prolog（プロローグ）は、documentの子であり、かつ、Elementの子（もしあれば）に対してfollowingでないnodesを指します。

ProcessingInstructionのnodenodeがprologの一部になる、prologから外れる、またはdataが変更された場合は、次の手順を実行しなければなりません：

1. このアルゴリズムのインスタンスがnodeについて現在実行中なら、そのインスタンスを中止し、該当する場合は関連するfetchingも停止する。
2. nodeに関連付けCSSスタイルシートがある場合は、削除する。
3. nodeがxml-stylesheet処理命令でない場合は終了。
4. nodeにhref 疑似属性がなければ終了。
5. titleをtitle 疑似属性の値、なければ空文字列とする。
6. alternate 疑似属性が"yes"（大文字小文字区別）に一致し、かつtitleが空文字列なら終了。
7. type 疑似属性の値が対応スタイリング言語でない場合、ユーザーエージェントは返してもよい。
8. input URLをhref 疑似属性の値とする。
9. documentをnodeのnode documentとする。
10. base URLをdocumentのdocument base URLとする。
11. referrerをdocumentのaddressとする。
12. parsed URLを、文字列input URLとbase URLbase URLを使ってURL parserを呼び出した結果とする。
13. parsed URLが失敗なら終了。
14. responseをCSSスタイルシートを取得する手順で、parsed URLparsed URL、referrerreferrer、documentdocumentを使用して得る。
15. responseがエラーなら終了。
16. 以下のプロパティでCSSスタイルシートを作成する：

    location

    parsed URLをURL serializerした結果。

    親CSSスタイルシート

    null。

    オーナーノード

    node。

    owner CSS rule

    null。

    media

    media 疑似属性があればその値、なければ空文字列。

    title

    title。

    alternate flag

    alternate 疑似属性値が"yes"（大文字小文字区別）に一致すればセットし、それ以外は解除。

    origin-clean flag

    responseがCORS-same-originならセット、それ以外は解除。

    CSS 環境エンコーディングは以下の手順で決定：

    1. 要素にcharset 疑似属性があれば、その値を使いエンコーディング取得を行い、成功すればそのエンコーディングを返して手順終了。
    2. それ以外は文書の文字エンコーディングを返す。[DOM]

xml-stylesheet処理命令で参照されるスタイルシートは、このセクションの規則を用いて、XMLパーサーのDocumentの文脈で、ProcessingInstruction ノードがそのパーサーによって作成され、スタイルシートがパーサーによってノード生成時に有効化されていた場合、イベントループがステップ1に到達した直前にノードがそのDocument内にあり、ユーザーエージェントがそのスタイルシートの読み込みを諦めていなければ、そのスタイルシートは「スクリプトをブロックするスタイルシート」とみなされます。ユーザーエージェントはいつでもそのスタイルシートの読み込みを諦めることができます。

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

HTTP Linkヘッダーのうち、リンク関係タイプのいずれかが"stylesheet"とASCII大文字小文字区別なしで一致する場合は、以下の手順を実行する必要があります：

1. titleを、最初のtitleパラメータの値に設定する。そのようなパラメータがなければ空文字列とする。
2. （他の）リンク関係タイプのうち、"alternate"とASCII大文字小文字区別なしで一致するものがあり、かつtitleが空文字列なら終了。
3. input URLを指定された値に設定する。

   より具体的に記述する必要あり

4. base URLを文書のdocument base URLに設定する。

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

5. referrerを文書のaddressに設定する。
6. originを文書のoriginに設定する。
7. parsed URLを、文字列input URLとbase URLbase URLでURL parserを呼び出した結果に設定する。
8. parsed URLが失敗なら終了。
9. responseを、parsed URLparsed URL、referrerreferrer、文書（document being the document）でCSSスタイルシートを取得する手順で得る。

   HTMLパーサーがquirks/non-quirksモードを決定していない場合は？

10. 以下のプロパティでCSSスタイルシートを作成する：

    location

    parsed URLをURL serializerした結果。

    owner node

    null。

    親CSSスタイルシート

    null。

    owner CSS rule

    null。

    media

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

    title

    title。

    alternate flag

    このHTTP Linkヘッダーの指定されたリンク関係タイプのいずれかが"alternate"とASCII大文字小文字区別なしで一致すればセット、そうでなければ解除。

    origin-clean flag

    responseがCORS-same-originならセット、それ以外は解除。

このセクションの規則でHTTP Linkヘッダーから参照されるスタイルシートは、作成時に有効化されていて、ユーザーエージェントがそのスタイルシートの読み込みを諦めていなければ「スクリプトをブロックするスタイルシート」とみなされます。ユーザーエージェントはいつでもそのスタイルシートの読み込みを諦めることができます。

6.4. CSSルール

CSSルールは、CSS仕様で定義されるルールを示す抽象的な概念です。CSSルールは、CSSRuleインターフェイスのサブクラスを実装するオブジェクトとして表現され、以下の関連状態項目を持ちます：

type

ルールの種類に対応する非負整数。この項目はルール作成時に初期化され、変更できません。

text

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

親CSSルール

囲み元のCSSルールへの参照、またはnull。 ルール作成時に囲み元があればその参照、なければnullとして初期化されます。nullに変更可能です。

親CSSスタイルシート

親CSSスタイルシートへの参照、またはnull。 ルール作成時に関連付けスタイルシートへの参照として初期化されます。nullに変更可能です。

子CSSルール

子CSSルールのリスト。このリストは変更可能です。

上記以外にも、各CSSルールはtypeに応じて他の状態を持つ場合があります。

文字列stringからCSSルールを構文解析するには、以下の手順を実行します：

1. ruleをstringでparse a ruleを呼び出した結果とする。
2. ruleが構文エラーならruleを返す。
3. parsed ruleを、適切なCSS仕様に従ってruleを解析し、「無視」とされる部分は除外する。スタイルルール全体が除外された場合は構文エラーを返す。
4. parsed ruleを返す。

CSSルールのtypeに応じ、以下いずれかの方法でCSSルールを直列化する：

CSSStyleRule

以下の手順の結果を返す：

1. sを、ルールのセレクター群に対してserialize a group of selectorsを実行した結果に" {"（スペース＋左波括弧）を続けたものとして初期化する。
2. declsを、ルールの宣言群に対してserialize a CSS declaration blockを実行した結果（宣言がなければnull）とする。
3. rulesを、ルールのcssRules リスト内の各ルールに対してserialize a CSS ruleを実行した結果（なければnull）とする。
4. declsとrulesが両方nullなら、sに" }"（スペース＋右波括弧）を追加してsを返す。
5. rulesがnullの場合：
   1. sにスペースを追加する。
   2. declsをsに追加する。
   3. sに" }"（スペース＋右波括弧）を追加する。
   4. sを返す。
6. それ以外の場合：
   1. declsがnullでなければrulesの先頭に追加する。
   2. 各ruleについて：
      1. sに改行＋半角スペース2つを追加。
      2. ruleをsに追加。
   3. sに改行＋右波括弧を追加する。
   4. sを返す。

CSSImportRule

以下を連結した結果：

1. "@import"＋スペース
2. ルールのlocationに対してserialize a URLを実行した結果
3. ルールのmediaリストが空でなければ、スペース＋mediaリストに対するserialize a media query listの結果
4. ";"（セミコロン）

@import url("import.css");

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

CSSMediaRule

以下を連結した結果：

1. "@media"＋スペース
2. ルールのmedia queryリストに対してserialize a media query listを実行した結果
3. スペース＋"{"＋改行
4. ルールのcssRulesリスト内の各ルールにserialize a CSS ruleを実行し、改行＋半角スペース2つで区切って連結
5. 改行＋"}"

CSSFontFaceRule

以下を連結した結果：

1. "@font-face {"＋スペース
2. "font-family:"＋スペース
3. ルールのフォントファミリー名に対してserialize a stringを実行した結果
4. ";"（セミコロン）
5. ソースリストが空でなければ：
   1. スペース＋"src:"＋スペース
   2. 各ソースにserialize a URLまたはserialize a LOCALを実行しカンマ区切りリストとして直列化した結果
   3. ";"（セミコロン）
6. ルールのunicode-range記述子があれば、スペース＋"unicode-range:"＋スペース＋serialize a <'unicode-range'>＋";"
7. font-variant記述子があれば、スペース＋"font-variant:"＋スペース＋serialize a <'font-variant'>＋";"
8. font-feature-settings記述子があれば、スペース＋"font-feature-settings:"＋スペース＋serialize a <'font-feature-settings'>＋";"
9. font-stretch記述子があれば、スペース＋"font-stretch:"＋スペース＋serialize a <'font-stretch'>＋";"
10. font-weight記述子があれば、スペース＋"font-weight:"＋スペース＋serialize a <'font-weight'>＋";"
11. font-style記述子があれば、スペース＋"font-style:"＋スペース＋serialize a <'font-style'>＋";"
12. スペース＋"}"（右波括弧）

CSSFontFaceRuleの記述子値の直列化方法の定義が必要

CSSPageRule

CSSPageRuleの直列化方法の定義が必要

CSSNamespaceRule

"@namespace"＋スペース＋prefix属性（あれば）の識別子として直列化＋prefixがあればスペース＋namespaceURI属性のURLとして直列化＋";"

CSSKeyframesRule

以下を連結した結果：

1. "@keyframes"＋スペース
2. name属性の識別子として直列化
3. ルールのcssRulesリスト内の各ルールにserialize a CSS ruleを実行し、改行＋半角スペース2つで区切って連結
4. 改行＋"}"

CSSKeyframeRule

以下を連結した結果：

1. keyText
2. " { "（スペース＋左波括弧）
3. ルールの宣言群に対してserialize a CSS declaration blockを実行した結果
4. 宣言が1つ以上あれば" "（スペース）
5. "}"（右波括弧）

「2スペースインデント」はブラウザー実装に合わせているが、改善が必要（#5494参照）

CSSルールリストlistのindexindexにCSSルールを挿入するには、以下の手順を実行します：

1. lengthをlist内の要素数に設定する。
2. indexがlengthより大きければ、throwでIndexSizeError例外を投げる。
3. new ruleを、引数ruleでCSSルールを構文解析する手順で得る。
4. new ruleが構文エラーなら、throwでSyntaxError例外を投げる。
5. new ruleがCSSの制約によりlistのindex位置に挿入できない場合、throwでHierarchyRequestError例外を投げる。[CSS21]

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

6. new ruleが@namespace at-ruleで、listが@importや@namespace以外を含む場合、throwでInvalidStateError例外を投げる。
7. new ruleをlistのindex位置に挿入する。
8. indexを返す。

CSSルールリストlistのindexindexからCSSルールを削除するには、以下の手順を実行します：

1. lengthをlist内の要素数に設定する。
2. indexがlength以上なら、throwでIndexSizeError例外を投げる。
3. old ruleをlistのindex番目の要素に設定する。
4. old ruleが@namespace at-ruleで、listが@importや@namespace以外を含む場合、throwでInvalidStateError例外を投げる。
5. old ruleをlistの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オブジェクト数から1引いた範囲の数字です。CSSRuleオブジェクトがなければ、対応プロパティインデックスもありません。

item(index)メソッドは、コレクション内のindex番目のCSSRuleオブジェクトを返します。コレクションに該当オブジェクトがなければ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;

  // the following attribute and constants are historical
  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を返す。

注: 整数によるenumと複数定数で型を判別する設計はレガシーな慣習です。型判定には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オブジェクトを返し、次のプロパティを持ちます：

computed flag

解除。

declarations

ルール内の宣言（指定順）。

parent CSS rule

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

owner node

Null。

指定順は、宣言の順番をそのまま維持しつつ、ショートハンドプロパティを正規順のロングハンドプロパティに展開したものです。同じプロパティが複数回指定された場合（ショートハンド展開後）、カスケード順が最も高いものだけを、その指定された相対位置で表す必要があります。[CSS3CASCADE]

6.4.4. CSSImportRule インターフェイス

CSSImportRuleインターフェイスは@import at-ruleを表します。

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

href属性は@import at-ruleで指定されたURLを返します。

注: 解決済みURLは、関連するCSSスタイルシートのhref属性を使って取得できます。

media属性は、関連するCSSスタイルシートのmedia属性の値を返します。

styleSheet属性は関連するCSSスタイルシートを返します。

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

6.4.5. CSSGroupingRule インターフェイス

CSSGroupingRuleインターフェイスは@ルールのうち自身の中に他のルールを入れ子で持つものを表します。

[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)メソッドは、ruleを子CSSルールのindex位置にCSSルールを挿入する手順を呼び出し、その結果を返さなければなりません。

deleteRule(index)メソッドは、index位置の子CSSルールからCSSルールを削除する手順を実行しなければなりません。

6.4.6. CSSMediaRule インターフェイス

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

6.4.7. CSSPageRule インターフェイス

CSSPageRuleインターフェイスは@page at-ruleを表します。

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-ruleのCSSStyleDeclarationオブジェクトを返し、以下のプロパティを持ちます：

computed flag

解除。

declarations

ルールに指定された宣言（指定順）。

parent CSS rule

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

owner node

Null。

6.4.8. CSSMarginRule インターフェイス

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

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

name属性は、マージンat-ruleの名前を返します。名前には@文字は含みません。[CSS3SYN]

style属性は、マージンat-ruleのCSSStyleDeclarationオブジェクトを返し、以下のプロパティを持ちます：

computed flag

解除。

declarations

ルールに指定された宣言（指定順）。

parent CSS rule

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

owner node

Null。

6.4.9. CSSNamespaceRule インターフェイス

CSSNamespaceRuleインターフェイスは@namespace at-ruleを表します。

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

namespaceURI属性は@namespace at-ruleの名前空間を返します。

prefix属性は@namespace at-ruleのprefix（存在しなければ空文字列）を返します。

6.5. CSS宣言

CSS宣言はDOM上でオブジェクトとして公開されない抽象的な概念です。CSS宣言は次の関連プロパティを持ちます：

プロパティ名

宣言のプロパティ名。

値

宣言の値（コンポーネント値のリストとして表現）。

importantフラグ

セットまたは解除。変更可能。

case-sensitiveフラグ

プロパティ名が仕様で大文字小文字区別と定義されていればセット、そうでなければ解除。

6.6. CSS宣言ブロック

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

computedフラグ

このオブジェクトが指定スタイルではなく計算済みスタイル宣言である場合セットされます。特に記載がない限り解除されています。

宣言一覧

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

親CSSルール

CSSルールで、CSS宣言ブロックに関連付けられている場合はその値、なければnull。

所有ノード

Elementで、CSS宣言ブロックに関連付けられている場合はその値、なければnull。

updatingフラグ

デフォルト解除。CSS宣言ブロックが所有ノードのstyle属性を更新中の場合セット。

文字列stringからCSS宣言ブロックを構文解析するには、以下の手順を実行します:

1. declarationsをstringで宣言リストを構文解析する手順により取得する。
2. parsed declarationsを空リストで初期化。
3. declarations内の各declarationについて以下を実行:
   1. 適切な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をそれらショートハンドプロパティの配列（preferred orderで）とする。
   4. ショートハンドループ: shorthands内の各shorthandについて以下を実行:
      1. longhandsを、declaration blockの宣言一覧のうちalready serializedに含まれず、 プロパティ名がshorthandsのいずれかにマップされるものの配列とする。
      2. マップされるプロパティすべてがlonghandsに存在しなければショートハンドループに進む。
      3. current longhandsを空配列で初期化。
      4. longhands内でshorthandにマップされるCSS宣言をcurrent longhandsに追加。
      5. current longhands内にimportantフラグがセットされた宣言と解除された宣言の両方があればショートハンドループに進む。
      6. 最初と最後のlonghandの間に、同じ論理プロパティグループに属するが、いずれかのlonghandと異なるmapping logicを持つ宣言があり、current longhandsに含まれていなければショートハンドループに進む。
      7. valueをcurrent longhandsでCSS値を直列化する結果とする。
      8. valueが空文字列ならショートハンドループに進む。
      9. serialized declarationをshorthand・value・重要フラグ（current longhands内のCSS宣言のimportantフラグがセットされていればセット）でCSS宣言を直列化する結果とする。
      10. serialized declarationをlistに追加。
      11. current longhands全てのプロパティ名をalready serializedに追加。
      12. 宣言ループに進む。
   5. valueをdeclarationでCSS値を直列化する結果とする。
   6. serialized declarationをproperty・value・重要フラグ（declarationのimportantフラグがセットされていればセット）でCSS宣言を直列化する結果とする。
   7. serialized declarationをlistに追加。
   8. propertyをalready serializedに追加。
4. listを" "（U+0020）で結合して返す。

注: 空のCSS宣言ブロックの直列化は空文字列です。

注: 非空CSS宣言ブロックの直列化には周囲の空白は含まれません。つまり、最初のプロパティ名の前にも、最後の値の後ろにも空白はありません。

CSS宣言ブロックは、属性変更手順をlocalName、value、namespace付きで所有ノードに対して持ちます:

1. computedフラグがセットされていれば終了。
2. updatingフラグがセットされていれば終了。
3. localNameが"style"でなく、またはnamespaceがnullでなければ終了。
4. valueがnullなら宣言一覧を空にする。
5. それ以外の場合は、valueからCSS宣言ブロックを構文解析する結果を宣言一覧に設定する。

CSS宣言ブロックオブジェクトが生成された時は、以下を実行します:

1. owner nodeを所有ノードとする。
2. owner nodeがnull、またはcomputedフラグがセットされていれば終了。
3. valueをnull・"style"・owner nodeで属性を取得する結果とする。
4. valueがnullでなければ、valueからCSS宣言ブロックを構文解析する結果を宣言一覧に設定する。

declaration blockに対してstyle属性を更新するには、以下の手順を実行します:

1. Assert: declaration blockのcomputedフラグは解除されている。
2. owner nodeをdeclaration blockの所有ノードとする。
3. owner nodeがnullなら終了。
4. declaration blockのupdatingフラグをセットする。
5. owner nodeに"style"属性値としてCSS宣言ブロックを直列化する結果を設定する。
6. declaration blockのupdatingフラグを解除する。

shorthands（ショートハンドプロパティのリスト）のpreferred orderは以下の通りです:

1. shorthandsを辞書順に並べる。
2. "-"（U+002D）で始まる項目をすべてリストの後ろに並べ、その中での順序は保持する。
3. "-webkit-"で始まらない"-"で始まる項目をさらに後ろに並べ、その中での順序は保持する。
4. マップされるロングハンドプロパティ数が多いものを先に並べる。

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宣言数から1引いた範囲の数字です。CSS宣言がなければ、対応プロパティインデックスもありません。

cssText属性の取得時は以下の手順を実行します:

1. computedフラグがセットされている場合は空文字列を返す。

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

cssText 属性の設定時は以下の手順を実行します:

1. computed flagがセットされている場合、 throwでNoModificationAllowedError例外を投げること。
2. declarationsを空にする。
3. 与えられた値を構文解析し、返り値が空リストでない場合は、そのリスト内の項目を declarationsに指定順で挿入する。
4. style属性を更新する（CSS宣言ブロックに対して）。

length属性は、宣言一覧内のCSS宣言数を返す。

item(index)メソッドは、index番目のCSS宣言のプロパティ名を返す。

getPropertyValue(property) メソッドは以下の手順を実行します:

1. propertyがカスタムプロパティでない場合、以下を実行：
   1. propertyをASCII小文字に変換する。
   2. propertyがショートハンドプロパティの場合、以下を実行：
      1. listを空配列で初期化。
      2. propertyがマップする各ロングハンドプロパティlonghandに対し、正規順で以下を実行：
         1. longhandが、case-sensitiveでプロパティ名に一致するCSS宣言が宣言一覧内にあれば、declarationとし、なければnull。
         2. declarationがnullなら空文字列を返す。
         3. declarationをlistに追加。
      3. list内のすべての宣言のimportantフラグが同じであれば、listを直列化して返す。
      4. 空文字列を返す。
2. propertyがcase-sensitiveでプロパティ名に一致するCSS宣言が宣言一覧内にあれば、その宣言を直列化して返す。
3. 空文字列を返す。

getPropertyPriority(property) メソッドは以下の手順を実行します:

1. propertyがカスタムプロパティでない場合、以下を実行：
   1. propertyをASCII小文字に変換する。
   2. propertyがショートハンドプロパティの場合、以下を実行：
      1. listを新しい配列で初期化。
      2. propertyがマップする各ロングハンドプロパティlonghandに対し、getPropertyPriority() をlonghandで呼び出した結果をlistに追加。
      3. list内のすべての項目が"important"なら、文字列"important"を返す。
2. propertyがcase-sensitiveでプロパティ名に一致するCSS宣言が宣言一覧内に存在し、そのimportantフラグがセットされていれば、"important"を返す。
3. 空文字列を返す。

setProperty(property, value, priority) メソッドは以下の手順を実行します:

1. computedフラグがセットされていれば、 throwでNoModificationAllowedError例外を投げる。
2. propertyがカスタムプロパティでない場合、以下を実行：
   1. propertyをASCII小文字に変換する。
   2. propertyがcase-sensitiveで対応CSSプロパティに一致しなければ終了。
3. valueが空文字列なら、removeProperty() をpropertyで呼び出し、終了する。
4. priorityが空文字列でなく、かつ"important"（ASCII大文字小文字区別なし）に一致しなければ終了。
5. component value listをvalueをproperty用に構文解析した結果とする。

   注: valueには"!important"は含められません。

6. component value listがnullなら終了。
7. updatedをfalseで初期化。
8. propertyがショートハンドプロパティの場合、propertyがマップする各ロングハンドプロパティlonghandに対し、正規順で以下を実行：
   1. longhand resultをCSS宣言をセットする手順で、longhandとcomponent value list（重要フラグはpriorityが空文字列でなければセット）と宣言リスト（宣言一覧）を渡して呼び出した結果とする。
   2. longhand resultがtrueならupdatedをtrueとする。
9. それ以外の場合は、updatedをCSS宣言をセットする手順で、property・component value list・重要フラグ（priorityが空文字列でなければセット）・宣言リスト（宣言一覧）を渡して呼び出した結果とする。
10. updatedがtrueなら、style属性を更新する手順をCSS宣言ブロックに対して実行する。

CSS宣言をセットする手順は、propertyに値component value listとオプションで重要フラグを指定し、宣言リストdeclarations内で以下の制約が満たされる必要があります:

• declarations内にpropertyとcase-sensitiveで一致するプロパティ名を持つCSS宣言がちょうど1つ存在し、これをtarget declarationとする。
• target declarationの値はcomponent value listとなり、importantフラグは重要フラグがセットされていればセット、そうでなければ解除される。
• target declaration以外のCSS宣言は変更・挿入・削除してはならない。
• propertyと同じ論理プロパティグループだが異なるmapping logicを持つプロパティ名を持つCSS宣言がdeclarations内に存在する場合、target declarationはそれら宣言の後のインデックスに配置する。
• 手順の結果としてdeclarationsの直列化が変更された場合はtrueを返し、それ以外はfalseを返してもよい。

"Any observable side effect must not be made outside declarations"のような制約を追加するべきか？現状の制約は未定義動作の穴になる可能性がある。

注: CSS宣言をセットする手順はこのCSSOMレベルでは定義されません。ユーザーエージェントは上記制約を守れば異なるアルゴリズムを使っても構いません。

removeProperty(property)メソッドは以下の手順を実行します:

1. computedフラグがセットされていれば、 throwでNoModificationAllowedError 例外を投げる。
2. propertyがカスタムプロパティでなければ、 propertyをASCII小文字に変換。
3. getPropertyValue() をpropertyで呼び出した結果をvalueとする。
4. removedをfalseで初期化。
5. propertyがショートハンドプロパティの場合、マップされる各ロングハンドプロパティlonghandで以下を実行:
   1. longhandがプロパティ名としてCSS宣言が宣言一覧に存在しなければcontinue。
   2. そのCSS宣言を削除し、removedをtrueに。
6. それ以外の場合、propertyがcase-sensitiveでプロパティ名に一致するCSS宣言が宣言一覧に存在すれば、そのCSS宣言を削除しremovedをtrueに。
7. removedがtrueなら、style属性を更新する手順をCSS宣言ブロックに対して実行する。
8. valueを返す。

parentRule属性は親CSSルールを返さなければなりません。

cssFloat属性の取得時は、getPropertyValue() を引数floatで呼び出した結果を返します。設定時は、setProperty() を第1引数float、第2引数に指定値、第3引数なしで呼び出し、発生した例外は再スローします。

各CSSプロパティpropertyが対応CSSプロパティである場合、 以下のpartial interfaceが適用され、camel-cased attributeは propertyでCSSプロパティ→IDL属性アルゴリズムを実行して得られたものです。

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

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

camel-cased attribute属性の設定時は、 setProperty() を第1引数にIDL属性→CSSプロパティアルゴリズムでcamel-cased attributeを変換した結果、 第2引数に指定値、第3引数なしで呼び出し、発生した例外は再スローします。

各CSSプロパティpropertyが対応CSSプロパティであり、かつ-webkit-で始まる場合、 以下のpartial interfaceが適用され、webkit-cased attributeは propertyでCSSプロパティ→IDL属性アルゴリズム（lowercase firstフラグセット）で得られます。

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

webkit-cased attribute属性の取得時は、 getPropertyValue() を引数としてIDL属性→CSSプロパティアルゴリズム（dash prefixフラグセット）でwebkit-cased attributeを変換した結果で呼び出した結果を返さなければなりません。

webkit-cased attribute属性の設定時は、 setProperty() を第1引数にIDL属性→CSSプロパティアルゴリズム（dash prefixフラグセット）でwebkit-cased attributeを変換した結果、 第2引数に指定値、第3引数なしで呼び出し、発生した例外は再スローします。

各CSSプロパティpropertyが対応CSSプロパティであり、かつプロパティ名に"-"（U+002D）が含まれる場合、 以下のpartial interfaceが適用され、dashed attributeはpropertyそのものです。

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

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

dashed attribute属性の設定時は、 setProperty() を第1引数にdashed attribute、第2引数に指定値、第3引数なしで呼び出し、発生した例外は再スローします。

element.style['font-size'];

CSSプロパティ→IDL属性アルゴリズムは、property（オプションでlowercase firstフラグセット）について以下の通りです:

1. outputを空文字列で初期化。
2. uppercase nextを解除。
3. lowercase firstフラグがセットされていれば、propertyの先頭文字を削除。
4. propertyの各文字cについて:
   1. cが"-"（U+002D）なら、uppercase nextをセット。
   2. それ以外でuppercase nextがセットされていれば、解除し、cをASCII大文字に変換してoutputに追加。
   3. それ以外の場合はcをoutputに追加。
5. outputを返す。

IDL属性→CSSプロパティアルゴリズムは、attribute（オプションでdash prefixフラグセット）について以下の通りです:

1. outputを空文字列で初期化。
2. dash prefixフラグがセットされていれば、outputに"-"（U+002D）を追加。
3. attributeの各文字cについて:
   1. cがU+0041〜U+005A（ASCII大文字）なら、"-"（U+002D）＋cをASCII小文字に変換して追加。
   2. それ以外はcをoutputに追加。
4. outputを返す。

6.7. CSS値

6.7.1. CSS値の構文解析

CSS値を構文解析するとは、propertyに対してvalueを次の手順で処理することを意味します:

1. listをvalueからコンポーネント値リストを構文解析するを呼び出して得る。
2. listをCSS仕様のpropertyの文法でマッチさせる。
3. 上記手順で失敗した場合、nullを返す。
4. listを返す。

注: "!important"宣言はプロパティ値空間の一部ではなく、CSS値を構文解析する手順はnullを返します。

6.7.2. CSS値の直列化

CSS値を直列化するとは、CSS宣言declarationまたはロングハンドCSS宣言リストlistに対して、以下の規則に従うことを意味します:

1. このアルゴリズムがlist（リスト）で呼ばれた場合:

   1. list内のロングハンドプロパティすべてに正確にマップされる、preferred orderで最初のショートハンドプロパティshorthandを取得。

   2. 該当するショートハンドがない場合、またはshorthandがlist内の全プロパティ値を正確に表現できない場合は、空文字列を返す。

   3. それ以外の場合は、shorthandプロパティの仮想宣言の値としてlistの値を組み合わせてCSS値を直列化する。

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

   • 一部のコンポーネント値が任意の順序で現れても意味が変わらない場合（値構文でダブルバー||で表現されるパターン）、 プロパティ定義表で指定された正規順にコンポーネント値を並べ替える。

   • 一部のコンポーネント値が省略またはより短い表現に置き換えても意味が変わらない場合、省略や置換を行う。

   • 上記の構文変換が後方互換性を損なう場合は行わない。

   注: ここで述べられているのは直列化の一般原則です。レガシー上、プロパティによっては異なる直列化をするものもあり、この仕様レベルでは定義しません。詳細は各自リバースエンジニアしてください。

3. componentsから<whitespace-token>をすべて取り除く。

4. components内の各コンポーネント値をCSSコンポーネント値を直列化する結果で置き換える。

5. componentsの各項目を、隣り合う項目間に" "（U+0020 SPACE）を挿入し1つの文字列に結合する。ただし2番目の項目が","（U+002C COMMA）の場合は空白を挿入しない。結果を返す。

CSSコンポーネント値を直列化するは、コンポーネントの種類ごとに以下の通り:

keyword

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

<angle>

<number>成分をその仕様で定義された正規形で直列化し、単位を続けて返す。

指定値と計算値／解決値の区別を明確化すべき。

<color>

<color>が解決値の一部なら、CSS Color 4 § 4.6 Resolving <color> Valuesを参照。

<color>が計算値の一部なら、CSS Color 4 § 4.7 Serializing <color> Valuesを参照。

<color>が指定値の一部なら、色を次のように返す:

1. 著者によって明示的に指定された色であれば、元の著者指定の色値を返す。
2. それ以外は、計算値の一部とみなした場合の値を返す。

著者指定値は計算値同様に小文字化すべきか？それとも元の大文字小文字を保持すべきか？

<alphavalue>

値が0〜255の整数（8ビット符号なし整数）として内部表現されている場合は次を実行:

1. alphaを与えられた整数とする。
2. 0〜100の整数で、2.55倍して四捨五入（同じ距離なら切り上げ）するとalphaになるものが存在すれば、その値を100で割ったものをroundedとする。
3. それ以外なら、alphaを0.255で割って四捨五入（同じ距離なら切り上げ）し、1000で割ったものをroundedとする。
4. roundedを<number>として直列化した結果を返す。

それ以外の場合は与えられた値を<number>として直列化した結果を返す。

<counter>

次のアルゴリズムの返値:

1. sを空文字列で初期化。
2. <counter>がCSSコンポーネント値を3つ持つならsに"counters("を追加。
3. 2つ持つなら"counter("を追加。
4. <counter>のCSSコンポーネント値リストlistを作成（末尾が"decimal"なら省略）。
5. listの各項目をCSSコンポーネント値を直列化するで処理。
6. listをカンマ区切りリストとして直列化し、sに追加。
7. sに")"（U+0029）を追加。
8. sを返す。

<frequency>

<number>成分をその仕様で定義された正規形で直列化し、単位を続けて返す。

指定値と計算値／解決値の区別を明確化すべき。

<identifier>

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

<integer>

10進整数（0-9の数字）を最短形式で表現し、負なら"-"（U+002D）を前置。

<length>

<number>成分をその仕様で定義された正規形で直列化し、単位を続けて返す。

指定値と計算値／解決値の区別を明確化すべき。

<number>

10進数（0-9の数字）を最短形式で表現し、少数点は"."で区切る（あれば）。小数は最大6桁まで丸める。負なら"-"（U+002D）を前置。

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

<percentage>

<number>成分を直列化し、文字列"%"（U+0025）を続ける。

<resolution>

CSSピクセルあたりの解像度を<number>で直列化し、文字列"dppx"を続ける。

<ratio>

分子を<number>で直列化し、文字列" / "を続け、分母を<number>で直列化したものを続ける。

<shape>

次のアルゴリズムの返値:

1. sを"rect("で初期化。
2. <shape>に属するCSSコンポーネント値のリストlistを作成。
3. listの各項目をCSSコンポーネント値を直列化するで処理。
4. listをカンマ区切りリストとして直列化し、sに追加。
5. sに")"（U+0029）を追加。
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>は、この仕様ではマクロとみなします。これらはすべて上記で説明したコンポーネントのインスタンスを表します。

このセクションはCSS3/CSS4のどこかで、上記定義を各CSSコンポーネントを定義するドラフトに移すことで削除できるかもしれません。

6.7.2.1. 例

以下は指定値に対する変換前と変換後の例です。 「Before」列は著者がスタイルシートに記述した内容、「After」列はDOMで取得した場合の返り値の例を示します。

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

7.1. ElementCSSInlineStyle ミックスイン

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

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

style属性は、CSS宣言ブロックオブジェクトを返さなければならず、そのcomputedフラグは解除、親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()疑似要素であれば、throwでTypeError 例外を投げる。
   3. それ以外はobjにeltの指定された疑似要素を設定する。

   注: CSS2擬似要素は二重コロンと単一コロン両方で一致します。つまり:beforeも::beforeも一致します。

4. declsを空のCSS宣言リストとして初期化。
5. eltがconnectedかつflat treeの一部であり、 そのshadow-including rootがブラウジングコンテキストを持ち、 かつそのブラウジングコンテキストコンテナがない、または ブラウジングコンテキストコンテナがbeing rendered状態であれば、 declsに全ての対応CSSプロパティのロングハンドプロパティを辞書順で追加し、 その値はdocに紐づくスタイルルールでobjに対して算出した解決値とする。さらに、 declsにobjで保証された無効値にならないカスタムプロパティのcomputed valueも追加する。

   UAによってはショートハンドも扱い、overflowのように元ロングハンドだったものも全UAがショートハンドで扱う。#2529参照。

   カスタムプロパティの順序は未定義。#4947参照。

6. 以下のプロパティでライブなCSS宣言ブロックを返す：

   computedフラグ

   セット。

   宣言一覧

   decls。

   親CSSルール

   null。

   所有ノード

   obj。

getComputedStyle() メソッドはorigin-clean flagが解除された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. 解決値（Resolved Values）

getComputedStyle() は歴史的に、要素や疑似要素の「計算値（computed value）」を返すものとして定義されていました。しかし、「計算値」の概念はCSSの改訂によって変化し、getComputedStyle() の実装は既存スクリプトとの互換性のため同じままである必要がありました。この問題に対処するため、本仕様は解決値（resolved value）という概念を導入します。

あるロングハンドプロパティの解決値は以下のように判定されます：

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など解決値特例プロパティ

解決値は使用値（used value）。

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など解決値特例プロパティ

プロパティがpositioned要素に適用され、displayプロパティの解決値がnoneやcontentsでなく、プロパティが過剰制約されていなければ、解決値は使用値。それ以外は解決値は計算値。

他仕様にて定義される解決値特例プロパティ

該当仕様で定義されたとおり。

その他のプロパティ

解決値は計算値。

10. IANA考慮事項

10.1. Default-Style

このセクションは、Permanent Message Header Field Registryへの登録用ヘッダーフィールドについて説明します。

ヘッダーフィールド名

Default-Style

適用プロトコル

http

ステータス

standard

著者・変更管理者

W3C

仕様文書

本書が該当仕様です。

関連情報

なし

11. 変更履歴

このセクションでは本仕様の版間の主な変更点を記載します（網羅的ではありません）。バグ修正や編集上の変更は基本的に記載されません。

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

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

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

• 論理プロパティの解決値を追加。

• displayプロパティのgetComputedStyle：contentsの扱いが変更されました。

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

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

• 他仕様からも解決値を定義可能になりました。

• insertRuleのindex引数がオプションになりました。

• StylesheetとCSSImportRuleのhref属性がUSVString型になりました。

• CSSOMString型が導入されました。

• CSSMediaRuleとCSSFontFaceRuleの直列化方法が追加されました。

• updatingフラグがCSS宣言ブロックに追加され、style属性のserialize-and-reparseを回避します。

• 宣言値の直列化方法が正しく定義されました。

• getComputedStyleはノードのdocumentのスタイルルールを返すようになりました。

• TypeError は、未知の疑似要素や::slotted()をgetComputedStyleに渡した場合に投げられます。

• CSS はインターフェイスから名前空間に変更されました。

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

• styleSheets IDL属性はDocument からDocumentOrShadowRootへ移動しました。

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

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

• CSSRule.type属性は非推奨となりました。

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

• CSSStyleDeclaration.cssTextは計算スタイルの場合は空文字列を返すようになりました。

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

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

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

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

• ショートハンドの間に他のプロパティグループ・マッピングロジックのロングハンドが挟まれている場合は、ショートハンドは直列化されません。

• CSSStyleRule の直列化は入れ子された構造にも対応しました。

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

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

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

• pseudo()メソッド（Element 上）およびPseudoElementインターフェイスが削除されました。

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

• cssText のIDL属性setter（CSSRule上）は何もしないよう変更されました。

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

• CSSNamespaceRule がreadonlyに戻されました。

• @charsetのinsertRule()での扱いが削除されました。

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

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

• セレクターの直列化は ">>" や "||" のコンビネーター、属性セレクターの "i" フラグに対応しました。

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

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

• setProperty() （CSSStyleDeclaration上）の挙動が変更されました。

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

• クロスオリジンのスタイルシートは読み取りや変更ができなくなりました。
• CSSCharsetRuleが再導入されました。
• CSSGroupingRuleとCSSMarginRuleが新設されました。
• CSSNamespaceRuleが変更可能になりました。
• CSS宣言ブロックの構文解析・直列化が定義されました。
• ショートハンドがsetProperty()、 getPropertyValue()などでサポートされました。
• setPropertyValueとsetPropertyPriorityがCSSStyleDeclarationに追加されました。
• 各種インターフェイスのstyleおよびmedia属性に[PutForwards]拡張属性が付与されました。
• pseudo()メソッドがElementに追加されました。
• PseudoElementインターフェイスが導入されました。
• cascadedStyle、rawComputedStyle、usedStyle属性がElementおよびPseudoElementに追加されました。
• 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 に本仕様への貢献を感謝します。

また、Ian Hickson氏には 代替スタイルシートAPIとCSS値の正規化（現直列化）規則の初期バージョン執筆に感謝します。