CSS对象模型 (CSSOM)

1. 介绍

本文档正式规定了CSS对象模型（CSSOM）的核心功能。CSSOM规范系列中的其他文档以及其他CSS相关规范定义了这些核心功能的扩展。

CSSOM的核心功能面向提供基本能力，使作者定义的脚本能够访问和操作与样式相关的状态信息和过程。

下面定义的功能主要基于W3C DOM工作组的先前规范，主要是[DOM]。本文档的目的在于 (1) 通过提供更详细的技术规范来改进先前的工作（以提高可测试性和互操作性），(2) 废弃或移除某些在此上下文中不再被视为必要的较少实现的功能，以及(3) 新指定一些已经或预计广泛实现的扩展。

2. 术语

本规范采用了以下文档中的某些术语：DOM、HTML、CSS语法、编码、URL、提取、 将样式表与XML文档关联和XML。[DOM] [HTML] [CSS3SYN] [ENCODING] [URL] [FETCH] [XML-STYLESHEET] [XML]

当本规范讨论对象A时，如果A实际上是一个接口，通常意味着实现接口A的对象。

术语设置和取消设置分别指二进制标志或变量的真值和假值。这些术语也用作动词，在这种情况下它们分别指将某个值更改为真或假。

术语支持的样式语言指的是CSS。

注意：如果另一个样式语言在用户代理中获得支持，预计本规范将根据需要进行更新。

术语支持的CSS属性指用户代理实现的CSS属性，包括任何供应商前缀的属性，但不包括自定义属性。支持的CSS属性在此规范中的比较目的必须以小写形式出现。

在本规范中，::before和::after伪元素假设存在于所有元素中，即使没有为它们生成任何框。

当一个方法或属性被说成调用另一个方法或属性时，用户代理必须调用其内部API来处理该属性或方法，以便 例如作者无法通过在ECMAScript中使用自定义属性或函数重写属性或方法来更改行为。

除非另有说明，字符串比较是按区分大小写的方式进行的。

2.1. 常见的序列化习语

“转义字符”指创建一个 "\"（U+005C），后跟该字符的字符串。

“将字符转义为代码点”指创建一个"\"（U+005C）字符串，后跟 最小可能数量的十六进制数字，以0-9和a-f（U+0030到U+0039和U+0061到U+0066）表示该代码点的 16进制形式，然后是一个空格（U+0020）。

“序列化标识符”指创建一个字符串，该字符串通过以下规则串联标识符的每个字符表示：

• 如果该字符是NULL（U+0000），则为替换字符（U+FFFD）。
• 如果该字符在[\1-\1f]范围内（U+0001到U+001F）或为U+007F，则为该字符转义为代码点。
• 如果该字符是第一个字符并且在[0-9]（U+0030到U+0039）范围内，则为该字符转义为代码点。
• 如果该字符是第二个字符并且在[0-9]（U+0030到U+0039）范围内并且第一个字符是"-" （U+002D），则为该字符转义为代码点。
• 如果该字符是第一个字符并且是"-"（U+002D）， 并且没有第二个字符， 则为转义字符。
• 如果该字符未由上述规则之一处理，并且大于或等于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("表示的字符串，后跟本地资源的序列化字符串， 后跟")"。

“序列化逗号分隔列表”指按列表顺序串联所有项目，并以", "分隔，即 逗号（U+002C）后跟一个空格（U+0020）。

“序列化空格分隔列表”指按列表顺序串联所有项目，并以" "分隔，即 一个空格（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"，后跟一个空格（U+0020），到s。
2. 让type成为作为标识符的序列化形式的媒体类型的媒体查询，转换为ASCII小写。
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，请在下表的第一列中查找v，并使用第二列中描述的序列化格式：

其他规范可以扩展此表，带有供应商前缀的媒体特性也可以有自定义的序列化格式。

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);
};

对象的支持的属性索引是介于零到媒体查询数量减一之间的数字 在表示的媒体查询集合中。如果没有这样的媒体查询，则没有支持的属性索引。

要创建一个 MediaList对象并使用字符串text，请执行以下步骤：

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. 选择器

选择器在选择器规范中定义。本节主要定义如何序列化它们。

5.1. 解析选择器

将解析一组选择器定义为使用选择器规范中定义的selectors_group生成解析值，并返回选择器组（如果解析未失败），否则返回null。

5.2. 序列化选择器

要序列化选择器组，应序列化选择器组中的每个选择器，然后序列化这些序列化结果组成的逗号分隔列表。

要序列化选择器，令 s 为 空字符串，对选择器链中的每个部分运行以下步骤，最后返回 s：

1. 如果复合选择器 中只有一个简单选择器，且该选择器是通用选择器，则将序列化 通用选择器的结果追加到 s。
2. 否则，对于复合选择器中的每个不是通用选择器的简单选择器，其中该通用选择器的命名空间前缀映射到的命名空间不是默认命名空间，序列化 简单选择器并将结果追加到 s。
3. 如果这不是选择器链的最后一个部分，则将一个 SPACE (U+0020)，随后根据情况添加组合符 ">"、 "+"、 "~"、 ">>"、 "||"， 如果组合符不是空白字符，则再添加一个 SPACE (U+0020)，追加到 s。
4. 如果这是选择器链的最后一个部分，并且存在伪元素，则将 "::" 后跟伪元素名称追加到 s。

要序列化简单选择器，令 s 为 空字符串，运行以下步骤，最后返回 s：

类型选择器

通用选择器

1. 如果命名空间前缀映射到的命名空间不是默认命名空间，且不是空命名空间（不属于任何命名空间），则将序列化 命名空间前缀作为标识符的结果，后跟 "|" (U+007C)，追加到 s。
2. 如果命名空间前缀映射到的命名空间是空命名空间（不属于任何命名空间），则将 "|" (U+007C) 追加到 s。
3. 如果这是类型选择器，则将元素名称作为标识符的序列化结果追加到 s。
4. 如果这是通用选择器，则将 "*" (U+002A) 追加到 s。

属性选择器

1. 将 "[" (U+005B) 追加到 s。
2. 如果命名空间前缀映射到的命名空间不是空命名空间（不属于任何命名空间），则将序列化 命名空间前缀作为标识符的结果，后跟 "|" (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)

调用时，执行创建构造的CSSStyleSheet给定 options并返回结果。

要创建构造的CSSStyleSheet 给定CSSStyleSheetInit options，执行以下步骤：

1. 构造一个新的CSSStyleSheet 对象sheet。
2. 将sheet的位置设置为基本URL，它是相关文档的当前全局对象。
3. 将sheet的样式表基本URL设置为 baseURL 属性值来自options。
4. 将sheet的父CSS样式表设置为 null。
5. 将sheet的所有者节点设置为null。
6. 将sheet的所有者CSS规则设置为null。
7. 将sheet的标题设置为空字符串。
8. 取消设置sheet的备用标志。
9. 设置sheet的源清洁标志。
10. 设置sheet的构造标志。
11. 将sheet的构造文档设置为相关文档，用于当前全局对象。
12. 如果media 属性为字符串，请创建一个MediaList对象 并将其分配为sheet的媒体。 否则，序列化媒体查询列表并从属性中创建一个 MediaList对象，并将其设置为sheet的 媒体。
13. 如果disabled 属性为true， 设置sheet的禁用标志。
14. 返回sheet。

一个CSS样式表有一些关联的状态项：

类型

字面量字符串 "text/css"。

位置

在创建时指定。绝对 URL 字符串，它是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 样式表的标题，可以是空字符串。

在下例中，第一个样式表的标题 非空， 而第二个和第三个样式表的标题为空。

<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. 如果 origin-clean 标志 未设置，抛出 SecurityError 异常。
2. 返回一个只读的、实时的 CSSRuleList 对象，表示 CSS 规则。

   注意：虽然返回的 CSSRuleList 对象是只读的（从客户端脚本的角度来看），由于其实时性状态，它仍然可能会随着时间而改变。例如，调用 insertRule() 或 deleteRule() 方法可能会导致返回对象的变化。

insertRule(rule, index) 方法必须执行以下步骤：

1. 如果 origin-clean 标志 未设置，抛出 SecurityError 异常。
2. 如果 禁止修改标志 被设置，抛出 NotAllowedError DOMException。
3. 令 parsed rule 为调用 解析规则 返回的值，使用 rule。
4. 如果 parsed rule 是语法错误，则返回 parsed rule。
5. 如果 parsed rule 是一个 @import 规则，且 constructed 标志 被设置，抛出 SyntaxError DOMException。
6. 返回执行 插入 CSS 规则 rule 的结果，在 CSS 规则 中的 index。

deleteRule(index) 方法必须执行以下步骤：

1. 如果 origin-clean 标志 未设置，抛出 SecurityError 异常。
2. 如果 禁止修改标志 被设置，抛出 NotAllowedError DOMException。
3. 移除 CSS 规则 在 CSS 规则 中的 index。

replace(text) 方法必须执行以下步骤：

1. 令 promise 为一个 promise。
2. 如果 constructed 标志 未设置，或 禁止修改标志 被设置，使用 NotAllowedError DOMException 拒绝 promise 并返回 promise。
3. 设置 禁止修改标志。
4. 并行 执行以下步骤：
   1. 令 rules 为执行 解析规则列表 从 text 返回的结果。如果 rules 不是规则列表（即解析时发生错误），将 rules 设为空列表。
   2. 如果 rules 包含一个或多个 @import 规则，移除这些规则 从 rules。
   3. 将 sheet 的 CSS 规则 设置为 rules。
   4. 取消设置 sheet 的 禁止修改标志。
   5. 使用 sheet 解析 promise。
5. 返回 promise。

replaceSync(text) 方法必须执行 同步替换 CSSStyleSheet 规则 的步骤，针对这个 CSSStyleSheet 给定 text。

要 同步替换 CSSStyleSheet 的规则，给定 sheet 和 text，执行以下步骤：

1. 如果 constructed 标志 未设置，或 禁止修改标志 被设置，抛出 NotAllowedError DOMException。
2. 令 rules 为执行 解析规则列表 从 text 返回的结果。如果 rules 不是规则列表（即解析时发生错误），将 rules 设为空列表。
3. 如果 rules 包含一个或多个 @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. 如果提供了 optionalIndex，则将 index 设为 optionalIndex，否则将样式表中 CSS 规则 的数量作为 index。
7. 调用 insertRule()， 以 rule 和 index 作为参数。
8. 返回 -1。

作者不应使用这些成员， 而应使用并教授早期定义的标准 CSSStyleSheet 接口， 该接口与 CSSGroupingRule 保持一致。

6.2. CSS 样式表集合

下方定义了与每个 DocumentOrShadowRoot 对象相关的各种新概念。

每个 DocumentOrShadowRoot 关联有零个或多个 CSS 样式表，称为 文档或 shadow root 的 CSS 样式表。 这是一个有序列表，包含：

1. 从 HTTP Link 头创建的任何 CSS 样式表，按照头顺序排列。
2. 与 DocumentOrShadowRoot 关联的任何 CSS 样式表，按照 树顺序排列。

每个 DocumentOrShadowRoot 关联有零个或多个 CSS 样式表，称为 最终的 CSS 样式表。 这是一个有序列表，包含：

1. 文档或 shadow root 的 CSS 样式表。
2. DocumentOrShadowRoot 的 adoptedStyleSheets 的 备份列表，按数组顺序排列。

要 创建一个 CSS 样式表，执行以下步骤：

1. 创建一个新的 CSS 样式表 对象，并按照指定设置其属性。
2. 然后为新创建的 CSS 样式表 执行 添加 CSS 样式表 步骤。

   如果 origin-clean 标志 未设置，可能会暴露用户内部网的信息。

要 添加一个 CSS 样式表，执行以下步骤：

1. 将 CSS 样式表 添加到 文档或阴影根 CSS 样式表 的列表中的适当位置。 这些步骤的其余部分处理 禁用标志。
2. 如果设置了 禁用标志，则返回。
3. 如果 标题 不是空字符串，备用标志 未设置，并且 首选 CSS 样式表集名称 是空字符串，则 将首选 CSS 样式表集名称 更改为 标题。
4. 如果以下任一项为真，则取消设置 禁用标志 并返回：
   • 标题 是空字符串。
   • 上一个 CSS 样式表集名称 为 null，且 标题 与 大小写敏感 匹配 首选 CSS 样式表集名称。
   • 标题 与 上一个 CSS 样式表集名称 大小写敏感 匹配。
5. 设置 禁用标志。

要 移除一个 CSS 样式表，执行以下步骤：

1. 将 CSS 样式表 从 文档或 shadow root 的 CSS 样式表 列表中移除。
2. 将 CSS 样式表 的 父 CSS 样式表、所有者节点 和 所属 CSS 规则 设置为 null。

持久 CSS 样式表是CSS 样式表，它来自文档或影子根 CSS 样式表，其标题为空字符串，且其备用标志未设置。

CSS 样式表集 是由一个或多个来自文档或影子根 CSS 样式表的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 样式表 数量减一的数字。如果没有这些 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 属性必须返回一个 StyleSheetList 集合，表示 文档或阴影根 CSS 样式表。

设置索引值 算法对于 adoptedStyleSheets，给定 value 和 index， 如下：

1. 如果 value 的 构建标志 未设置，或其 构造文档 不等于此 DocumentOrShadowRoot 的 节点文档，则抛出 "NotAllowedError" DOMException。

6.3. 样式表关联

本节定义了 所有者节点作为 CSS 样式表的所有者时必须 实现的接口，并定义了当链接 关系类型与 "stylesheet" 进行ASCII 不区分大小写匹配时，对 xml-stylesheet 处理指令和 HTTP Link 标头的要求。

6.3.1. 获取 CSS 样式表

要 获取 CSS 样式表，使用解析后的 URL parsed URL、引用页 referrer、文档 document，以及可选的一组参数 parameters（作为创建 请求 的输入），请按以下步骤操作：

1. 设 origin 为 document 的 源。
2. 设 request 为一个新的 请求， 使用 URL parsed URL、源 origin、引用页 referrer，以及指定的参数集 parameters。
3. 设 response 为 获取 request 的结果。
4. 等待 response 可用。
5. 如果 response 是 网络错误，则返回错误。
6. 如果 document 处于 怪癖模式，response 为 CORS 同源，且 response 的 Content-Type 元数据 不是 支持的样式语言，则将 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 为失败，则返回。
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 头的用户代理的要求

对于每个 HTTP Link 头，其中一个链接关系类型是 ASCII 大小写不敏感 匹配 "stylesheet"，必须执行以下步骤：

1. 让 title 为所有 title 参数中的第一个值。如果没有这样的参数，则为空字符串。
2. 如果其中一个（其他的）链接关系类型是 ASCII 大小写不敏感 匹配 "alternate"，且 title 为空字符串，则返回。
3. 设 input URL 为指定的值。

   需要更具体。

4. 设 base URL 为文档的 文档基本 URL。

   此时是否有文档？

5. 设 referrer 为文档的 地址。
6. 设 origin 为文档的 源。
7. 设 parsed URL 为通过调用 URL 解析器，使用字符串 input URL 和基本 URL base URL 返回的值。
8. 如果 parsed URL 解析失败，则返回。
9. 设 response 为 获取 CSS 样式表 的结果，使用解析的 URL parsed URL， 引用 referrer，文档为当前文档。

   如果 HTML 解析器尚未决定是否为混杂/非混杂模式怎么办？

10. 使用以下属性 创建 CSS 样式表：

    位置

    通过调用 URL 序列化器 使用 parsed URL 返回的值。

    所有者节点

    为 null。

    父 CSS 样式表

    为 null。

    所有者 CSS 规则

    为 null。

    媒体

    第一个 media 参数的值。

    标题

    title。

    备用标志

    如果该 HTTP Link 头的指定链接关系类型之一是 ASCII 大小写不敏感 匹配 "alternate"，则设置，否则为 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. 根据适当的 CSS 规范解析 rule，丢弃被指明忽略的部分。如果整个样式规则被丢弃，返回语法错误。
4. 返回 parsed rule。

要 序列化 CSS 规则， 请根据 CSS 规则 的 类型 执行以下操作之一：

CSSStyleRule

返回以下步骤的结果：

1. 让 s 最初是对规则关联的选择器执行序列化一组选择器的结果，后跟字符串 " {"，即一个空格（U+0020），后跟左大括号（U+007B）。
2. 让 decls 是对规则关联的声明执行序列化CSS声明块的结果，如果没有声明，则为null。
3. 让 rules 是对规则的 cssRules 列表中的每个规则执行序列化CSS规则的结果，如果没有规则，则为null。
4. 如果 decls 和 rules 都为null，则将 " }" 添加到 s，并返回 s。
5. 如果 rules 为null：
   1. 在 s 后附加一个空格（U+0020）。
   2. 在 s 后附加 decls。
   3. 在 s 后附加 " }"（即一个空格（U+0020）后跟右大括号（U+007D））。
   4. 返回 s。
6. 否则：
   1. 如果 decls 不为null，将其前置到 rules。
   2. 对于 rules 中的每个 rule：
      1. 在 s 后附加一个换行符和两个空格。
      2. 在 s 后附加 rule。
   3. 在 s 后附加一个换行符，后跟右大括号（U+007D）。
   4. 返回 s。

CSSImportRule

连接以下内容的结果：

1. 字符串 "@import"，后跟一个空格（U+0020）。
2. 对规则的位置执行序列化URL的结果。
3. 如果规则的关联媒体列表不为空，则后跟一个空格（U+0020），然后执行序列化媒体查询列表的结果。
4. 字符串 ";"，即分号（U+003B）。

@import url("import.css");

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

CSSMediaRule

连接以下内容的结果：

1. 字符串 "@media"，后跟一个空格（U+0020）。
2. 对规则的媒体查询列表执行序列化媒体查询列表的结果。
3. 一个空格（U+0020），后跟字符串 "{ "，即左大括号（U+007B），并换行。
4. 对规则的 cssRules 列表中的每个规则执行序列化CSS规则的结果，规则之间换行并缩进两个空格。
5. 一个换行符，后跟字符串 "}"，即右大括号（U+007D）。

CSSFontFaceRule

连接以下内容的结果：

1. 字符串 "@font-face {"，后跟一个空格（U+0020）。
2. 字符串 "font-family:"，后跟一个空格（U+0020）。
3. 对规则的字体族名称执行序列化字符串的结果。
4. 字符串 ";"，即分号（U+003B）。
5. 如果规则的关联源列表不为空，执行以下子步骤：
   1. 一个空格（U+0020），后跟字符串 "src:"，再后跟一个空格（U+0020）。
   2. 对每个源调用序列化逗号分隔列表，执行序列化URL或序列化LOCAL。
   3. 字符串 ";"，即分号（U+003B）。
6. 如果规则的关联unicode-range描述符存在，后跟一个空格（U+0020），后跟字符串 "unicode-range:"，再后跟一个空格（U+0020），后跟序列化一个<'unicode-range'>的结果，后跟字符串 ";"，即分号（U+003B）。
7. 如果规则的关联font-variant描述符存在，后跟一个空格（U+0020），后跟字符串 "font-variant:"，再后跟一个空格（U+0020），后跟序列化一个<'font-variant'>的结果，后跟字符串 ";"，即分号（U+003B）。
8. 如果规则的关联font-feature-settings描述符存在，后跟一个空格（U+0020），后跟字符串 "font-feature-settings:"，再后跟一个空格（U+0020），后跟序列化一个<'font-feature-settings'>的结果，后跟字符串 ";"，即分号（U+003B）。
9. 如果规则的关联font-stretch描述符存在，后跟一个空格（U+0020），后跟字符串 "font-stretch:"，再后跟一个空格（U+0020），后跟序列化一个<'font-stretch'>的结果，后跟字符串 ";"，即分号（U+003B）。
10. 如果规则的关联font-weight描述符存在，后跟一个空格（U+0020），后跟字符串 "font-weight:"，再后跟一个空格（U+0020），后跟序列化一个<'font-weight'>的结果，后跟字符串 ";"，即分号（U+003B）。
11. 如果规则的关联font-style描述符存在，后跟一个空格（U+0020），后跟字符串 "font-style:"，再后跟一个空格（U+0020），后跟序列化一个<'font-style'>的结果，后跟字符串 ";"，即分号（U+003B）。
12. 一个空格（U+0020），后跟字符串 "}"，即右大括号（U+007D）。

需要定义如何序列化CSSFontFaceRule描述符的值。

CSSPageRule

需要定义如何序列化CSSPageRule。

CSSNamespaceRule

字面字符串 "@namespace"，后跟一个空格（U+0020），后跟prefix属性的标识符序列化结果（如果有），如果有前缀，则后跟一个空格（U+0020），然后是namespaceURI属性的URL序列化结果，最后是字符";"（U+003B）。

CSSKeyframesRule

连接以下内容的结果：

1. 字面字符串 "@keyframes"，后跟一个空格（U+0020）。
2. name属性的标识符序列化结果。
3. 对规则的cssRules列表中的每个规则执行序列化CSS规则的结果，规则之间换行并缩进两个空格。
4. 换行符，后跟字符串 "}"，即右大括号（U+007D）。

CSSKeyframeRule

连接以下内容的结果：

1. keyText。
2. 字符串 " { "，即一个空格（U+0020），后跟左大括号（U+007B）。
3. 对规则的关联声明执行序列化CSS声明块的结果。
4. 如果规则关联了一个或多个声明，则字符串 " "，即一个空格（U+0020）。
5. 字符串 "}"，即右大括号（U+007D）。

“缩进两个空格”部分与浏览器匹配，但需要改进，详见#5494

要插入一个CSS规则 rule到CSS规则列表list中，在索引index处，按以下步骤操作：

1. 将length设置为list中的项目数量。
2. 如果index大于length，则抛出一个IndexSizeError异常。
3. 将new rule设置为对参数rule执行解析CSS规则的结果。
4. 如果new rule是语法错误，抛出一个SyntaxError异常。
5. 如果由于CSS规定的约束，new rule不能在零索引位置index插入到list中，抛出一个HierarchyRequestError异常。[CSS21]

   注意：例如，CSS样式表不能在样式规则之后包含@import规则。

6. 如果new rule是@namespace规则，并且list中包含除@import规则和@namespace规则以外的任何内容，抛出一个InvalidStateError异常。
7. 将new rule插入到list中，在零索引位置index。
8. 返回index。

要移除一个CSS规则从CSS规则列表list中，在索引index处，按以下步骤操作：

1. 将length设置为list中的项目数量。
2. 如果index大于或等于length，则抛出一个IndexSizeError异常。
3. 将old rule设置为list中的第index项。
4. 如果old rule是@namespace规则，并且list中包含除@import规则和@namespace规则以外的任何内容，抛出一个InvalidStateError异常。
5. 从list中移除old rule，在零索引位置index。
6. 将old rule的父CSS规则和父CSS样式表设置为null。

6.4.1.The CSSRuleList Interface

CSSRuleList接口表示CSS样式规则的有序集合。

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

对象的支持的属性索引是从零到比CSSRule对象集合数量少一的范围。如果没有这样的CSSRule对象，则没有支持的属性索引。

item(index)方法必须返回集合中的第index个CSSRule对象。如果集合中没有第index个对象，则方法必须返回null。

length属性必须返回集合中CSSRule对象的数量。

6.4.2.The CSSRule Interface

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;
};

The cssText 属性必须返回该 CSS 规则的 序列化结果。 在设置 cssText 属性时必须不执行任何操作。

The parentRule 属性必须返回 父 CSS 规则。

注：例如，@media 可以包含一个规则，在这种情况下 parentRule 将 非空；在没有包含规则的情况下，parentRule 将为 null。

The parentStyleSheet 属性必须返回 父 CSS 样式表。

注：规则被移除后返回 null 的唯一情况是此情况。

注：从 Document 实例中移除实现 LinkStyle 接口的 Document 节点并不会（单独地）导致 CSSRule 所引用的 CSSStyleSheet 变得不可访问。

The 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.The CSSStyleRule Interface

CSSStyleRule接口表示一个样式规则。

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

selectorText属性，在获取时，必须返回对关联选择器组的序列化结果。设置selectorText属性时，必须运行以下步骤：

1. 对给定的值运行解析选择器组算法。
2. 如果该算法返回非空值，则用返回的值替换关联的选择器组。
3. 否则，如果算法返回空值，则不执行任何操作。

style属性必须返回一个CSSStyleDeclaration对象，具有以下属性：

计算标志

未设置。

声明

规则中的声明，按指定顺序排列。

父CSS规则

上下文对象。

拥有节点

空。

指定顺序是指声明与指定时的顺序相同，但将简写属性展开为其长格式属性，按规范顺序排列。如果一个属性被指定多次（在简写展开后），只有具有最高层叠顺序的属性必须保留，并且位于其原始指定位置。[CSS3CASCADE]

6.4.4.The CSSImportRule Interface

CSSImportRule接口表示一个@import规则。

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

href属性必须返回@import规则中指定的URL。

注意：要获取解析后的URL，请使用关联CSS样式表的href属性。

media属性必须返回关联CSS样式表的media属性的值。

styleSheet属性必须返回关联的CSS样式表。

注意：@import规则始终有一个关联的CSS样式表。

6.4.5.The CSSGroupingRule Interface

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)方法必须返回在index处调用插入CSS规则算法，将rule插入到子CSS规则中的结果。

deleteRule(index)方法必须在index处移除CSS规则，从子CSS规则中。

6.4.6.The CSSMediaRule Interface

CSSMediaRule接口在CSS Conditional Rules中定义。[CSS3-CONDITIONAL]

6.4.7.The CSSPageRule Interface

CSSPageRule接口表示一个@page规则。

需要定义解析CSS页面选择器列表和序列化CSS页面选择器列表的规则。

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

selectorText属性，在获取时，必须返回关联的CSS页面选择器列表的序列化结果。设置selectorText属性时，必须执行以下步骤：

1. 对给定的值运行解析CSS页面选择器列表算法。
2. 如果该算法返回非空值，则用返回的值替换关联的CSS页面选择器列表。
3. 否则，如果算法返回空值，则不执行任何操作。

style属性必须返回一个CSSStyleDeclaration对象，适用于@page规则，具有以下属性：

计算标志

未设置。

声明

规则中的声明，按指定顺序排列。

父CSS规则

上下文对象。

拥有节点

空。

6.4.8.The CSSMarginRule Interface

CSSMarginRule接口表示在@page规则中的边距规则（例如@top-left）。[CSS3PAGE]

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

name属性必须返回边距规则的名称，不包含@字符。[CSS3SYN]

style属性必须返回该边距规则的CSSStyleDeclaration对象，具有以下属性：

计算标志

未设置。

声明

规则中的声明，按指定顺序排列。

父CSS规则

上下文对象。

拥有节点

空。

6.4.9.The CSSNamespaceRule Interface

CSSNamespaceRule接口表示一个@namespace规则。

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

namespaceURI属性必须返回@namespace规则的命名空间。

prefix属性必须返回@namespace规则的前缀，如果没有前缀则返回空字符串。

6.5. CSS 声明

CSS 声明 是一个抽象概念，未作为对象在 DOM 中暴露。CSS 声明 具有以下关联属性：

属性名称

声明的属性名称。

值

声明的值，表示为组件值列表。

important标志

可以设置或取消。

区分大小写标志

如果属性名称按照其规范被定义为区分大小写，则设置此标志，否则取消设置。

6.6. CSS 声明块

CSS声明块是一个有序的CSS属性及其关联值的集合，也称为CSS声明。在DOM中，CSS声明块是一个CSSStyleDeclaration对象。CSS声明块具有以下关联属性：

计算标志

如果对象是计算样式声明而非指定样式声明，则设置此标志。除非另有说明，否则不设置。

声明

与该对象关联的CSS声明。

父CSS规则

与CSS声明块关联的CSS规则，如果没有则为null。

拥有节点

与CSS声明块关联的元素，如果没有则为null。

更新标志

默认不设置。当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。

要序列化 CSS 声明，属性名称为 property，值为 value，并可选地设置important标志，请执行以下步骤：

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。

要序列化 CSS 声明块，declaration block意味着执行以下步骤：

1. 令 list 为空数组。
2. 令 already serialized 为空数组。
3. 声明循环：对于 declaration block 的声明中的每个CSS 声明 declaration，执行以下子步骤：
   1. 令 property 为 declaration 的属性 名称。
   2. 如果 property 位于 already serialized 中，则继续执行标记为 声明循环的步骤。
   3. 如果 property 映射到一个或多个简写属性，则令 shorthands 为由这些简写属性组成的 数组，并按首选顺序排列。
   4. 简写循环：对于 shorthands 中的每个 shorthand，执行以下 子步骤：
      1. 令 longhands 为一个数组，其中包含 declaration block 的声明中所有不在 already serialized 中，并且其属性名称映射到 shorthands 中某个简写属性的CSS 声明。
      2. 如果映射到 shorthand 的所有属性并未全部出现在 longhands 中，则继续执行标记为 简写循环的步骤。
      3. 令 current longhands 为空数组。
      4. 将 longhands 中所有其属性名称映射到 shorthand 的CSS 声明追加到 current longhands。
      5. 如果 current longhands 中有一个或多个CSS 声明的重要标志已设置，同时还有一个或多个 未设置，则继续执行 标记为 简写循环的步骤。
      6. 如果在 declaration block 中，位于 current longhands 的第一个与 最后一个长写属性之间存在任何声明，该声明属于相同的逻辑属性组，但其映射逻辑与 current longhands 中任一长写属性不同， 并且不在 current longhands 中，则继续执行标记为 简写 循环的步骤。
      7. 令 value 为对 current longhands 调用序列化 CSS 值的结果。
      8. 如果 value 为空字符串，则继续执行标记为 简写 循环的步骤。
      9. 令 serialized declaration 为调用序列化 CSS 声明的结果，其中 属性名称为 shorthand，值为 value；如果 current longhands 中的CSS 声明的重要标志已设置，则设置 important 标志。
      10. 将 serialized declaration 追加到 list。
      11. 将 current longhands 中所有项目的属性名称追加到 already serialized。
      12. 继续执行标记为 声明循环的步骤。
   5. 令 value 为对 declaration 调用序列化 CSS 值 的结果。
   6. 令 serialized declaration 为调用序列化 CSS 声明的结果，其中属性名称为 property，值为 value；如果 declaration 的重要 标志已设置，则设置 important 标志。
   7. 将 serialized declaration 追加到 list。
   8. 将 property 追加到 already serialized。
4. 返回用 " " (U+0020) 连接 list 后的结果。

注意： 空的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声明块的结果。

要更新样式属性的声明块，请执行以下步骤：

1. 断言：声明块的计算标志未设置。
2. 令owner node为声明块的所有者节点。
3. 如果owner node为null，则返回。
4. 设置声明块的更新标志。
5. 使用"style"和序列化声明块的结果，设置属性值给owner node。
6. 取消设置声明块的更新标志。

首选顺序是简写属性shorthands的顺序规则：

1. 按字典顺序对shorthands进行排序。
2. 将shorthands中以"-"（U+002D）开头的所有项移至列表末尾，保留其相对顺序。
3. 将shorthands中以"-"（U+002D）开头但不以"-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 声明数量少一的范围内的数字。如果不存在这样的CSS 声明，则不存在受支持属性索引。

获取 cssText 属性时必须运行以下 步骤：

1. 如果计算标志已设置，则返回空 字符串。

2. 返回对声明进行序列化的结果。

设置 cssText 属性时必须运行以下步骤：

1. 如果计算标志已设置， 则抛出一个 NoModificationAllowedError 异常。
2. 清空声明。
3. 解析给定值，如果返回值 不是空列表，则将列表中的项 按指定顺序插入声明中。
4. 为该 CSS 声明块更新样式属性。

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 中的适当值设置 CSS 声明 longhand 的结果；如果 priority 不是空字符串，则设置 important 标志，否则取消设置，并以声明作为声明列表。
   2. 如果 longhand result 为 true，则令 updated 为 true。
9. 否则，令 updated 为使用值 component value list 设置 CSS 声明 property 的结果；如果 priority 不是 空字符串，则设置 important 标志，否则取消设置，并以声明作为声明列表。
10. 如果 updated 为 true，则为该 CSS 声明块更新样式属性。

要在声明列表 declarations 中，使用值 component value list 并可选择设置 important 标志来设置 CSS 声明 property，用户代理必须确保在执行步骤 后满足以下约束：

• declarations 中必须恰好存在一个其属性名称与 property 区分大小写地匹配的CSS 声明。 下文将此声明称为 target declaration。
• target declaration 的值必须为 component value list， 并且如果设置了 important 标志，则 target declaration 的important 标志必须被设置，否则必须被取消设置。
• 任何不是 target declaration 的CSS 声明 都不得被更改、插入 或从 declarations 中移除。
• 如果 declarations 中存在其属性名称 与 property 属于同一逻辑属性组，但具有不同映射逻辑的CSS 声明，则 target declaration 必须位于 所有这些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 声明块更新样式属性。
8. 返回 value。

parentRule 属性必须返回 父 CSS 规则。

cssFloat 属性在获取时， 必须返回以 float 作为参数调用 getPropertyValue() 的结果。在设置时，该属性必须调用 setProperty()， 以 float 作为第一个参数，以给定值作为第二个参数，并且不提供第三个参数。 任何抛出的异常都必须重新抛出。

对于每个属于受支持的 CSS 属性的 CSS 属性 property， 以下部分接口适用，其中 驼峰式属性 是通过对 property 运行CSS 属性到 IDL 属性算法获得的。

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

驼峰式属性 属性在获取时，必须返回 以对 camel-cased attribute 运行IDL 属性到 CSS 属性算法所得结果作为 参数调用 getPropertyValue() 的结果。

设置 驼峰式属性 属性时必须调用 setProperty()， 第一个参数为对 camel-cased attribute 运行IDL 属性到 CSS 属性算法所得的结果，第二个参数为给定值，并且不提供第三个参数。任何 抛出的异常都必须重新抛出。

对于每个属于受支持的 CSS 属性且以 字符串 -webkit- 开头的 CSS 属性 property，以下部分接口适用，其中 webkit-cased attribute 是通过对 property 运行CSS 属性到 IDL 属性算法，并设置 lowercase first 标志获得的。

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

webkit-cased attribute 属性在 获取时，必须返回以 对 webkit-cased attribute 运行IDL 属性到 CSS 属性算法所得的结果作为参数调用 getPropertyValue() 的结果，并设置 dash prefix 标志。

设置 webkit-cased attribute 属性时必须调用 setProperty()， 第一个参数为 对 webkit-cased attribute 运行IDL 属性到 CSS 属性算法所得的结果， 并设置 dash prefix 标志，第二个参数为给定值，并且不提供第三个参数。 任何抛出的异常都必须重新抛出。

对于每个属于受支持的 CSS 属性的 CSS 属性 property， 属性名称中不包含 "-" (U+002D) 的属性除外， 以下部分接口适用，其中 dashed attribute 为 property。

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

dashed attribute 属性在获取时，必须返回 以 dashed attribute 作为参数调用 getPropertyValue() 的结果。

设置 dashed attribute 属性时必须 调用 setProperty()， 第一个参数为 dashed attribute，第二个参数为给定值，并且不提供第三个参数。 任何 抛出的异常都必须重新抛出。

element.style['font-size'];

针对 property 的CSS 属性 到 IDL 属性算法，可选择设置 lowercase first 标志， 如下所示：

1. 令 output 为空字符串。
2. 令 uppercase next 为未设置。
3. 如果 lowercase first 标志已设置，则从 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 属性算法，可选择设置 dash prefix 标志， 如下所示：

1. 令 output 为空字符串。
2. 如果 dash prefix 标志已设置，则将 "-" (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 值

将 解析 CSS 值 value 为给定的 property 的含义如下：

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. 令 shorthand 为第一个简写属性，以 首选顺序 映射到 list 中的所有长手属性。

   2. 如果没有这样的简写属性，或 shorthand 不能准确表示 list 中所有属性的值，返回空字符串。

   3. 否则，从假设的 shorthand 属性声明中 序列化 CSS 值，其值表示 list 中声明的组合值。

2. 将 declaration 的值表示为一组 CSS 组件值 components，这些值在根据属性的语法进行 解析 时，表示该值。此外：

   • 如果某些组件值可以以任意顺序出现而不改变值的含义（通常在值语法中由双竖线 || 表示），请按属性定义表中的规范顺序重新排列组件值。

   • 如果某些组件值可以省略或替换为更简短的表示而不改变值的含义，请省略/替换它们。

   • 如果上述任何语法转换会降低向后兼容性，则不要执行它们。

   注意： 这里描述的规则概述了序列化的 一般原则。出于遗留原因，某些属性以不同的方式序列化，这在此处故意未定义，因缺乏资源而不详细说明。请咨询您的本地逆向工程师了解详细信息。

3. 从 components 中删除任何 <whitespace-token>。

4. 将 components 中的每个组件值替换为调用 序列化 CSS 组件值 的结果。

5. 将 components 的项目合并为一个字符串，在每对项目之间插入 " " (U+0020 SPACE)，除非第二个项目是 "," (U+002C COMMA)，然后返回结果。

要 序列化 CSS 组件值 的方法取决于组件，如下所示：

keyword

将关键词 转换为 ASCII 小写。

<angle>

按照 <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 并四舍五入为最接近的整数（如果两个值相等则向上舍入）时等于 alpha，则将 rounded 定为该整数除以 100。
3. 否则，将 rounded 设为 alpha 除以 0.255 并四舍五入为最接近的整数（如果两个值相等则向上舍入），再除以 1000。
4. 返回将 rounded 序列化为 <number> 的结果。

否则，返回将给定值序列化为 <number> 的结果。

<counter>

返回以下算法的值：

1. 令 s 为空字符串。
2. 如果 <counter> 有三个 CSS 组件值，则将字符串 "counters(" 附加到 s。
3. 如果 <counter> 有两个 CSS 组件值，则将字符串 "counter(" 附加到 s。
4. 令 list 为属于 <counter> 的 CSS 组件值列表，省略最后一个 CSS 组件值如果它是 "decimal"。
5. 将 list 中的每个项目设为调用 序列化 CSS 组件值 的结果。
6. 将调用 序列化逗号分隔列表 的结果附加到 s。
7. 将 ")" (U+0029) 附加到 s。
8. 返回 s。

<frequency>

按照 <number> 的序列化方式序列化频率值后缀为单位，按照其各自规范定义的规范形式。

可能需要区分指定值和计算/解析值。

<identifier>

将标识符 序列化为标识符。

<integer>

用最短的形式表示十进制整数，使用数字 0-9（U+0030 到 U+0039），如果为负数，则前置 "-" (U+002D)。

<length>

按照 <number> 的序列化方式序列化长度值后缀为单位，按照其各自规范定义的规范形式。

可能需要区分指定值和计算/解析值。

<number>

用最短的形式表示十进制数，使用数字 0-9（U+0030 到 U+0039），如果有小数，用 "." 作为小数点分隔符，必要时四舍五入为不超过 6 位小数，如果为负数，则前置 "-" (U+002D)。

注意： 不使用科学计数法。

<percentage>

按照 <number> 的序列化方式序列化后缀为 "%" (U+0025)。

<resolution>

以每 CSS 像素 的点数为单位，按照 <number> 的序列化方式序列化后缀为 "dppx" 字符串。

<ratio>

按 <number> 序列化分子，后跟字符串 " / "，然后按 <number> 序列化分母。

<shape>

返回以下算法的值：

1. 令 s 为字符串 "rect("。
2. 令 list 为属于 <shape> 的 CSS 组件值列表。
3. 将 list 中的每个项目设为调用 序列化 CSS 组件值 的结果。
4. 将调用 序列化逗号分隔列表 的结果附加到 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>， 都被此规范视为宏。它们都表示上面列出的组件的实例。

一个想法是我们可以在 CSS3/CSS4 的时间线上某处删除这一节，通过将上述定义移至定义 CSS 组件的草案中来实现。

6.7.2.1. 示例

以下是一些指定值的转换前后结果示例。 “前”列可能是作者在样式表中编写的内容，而“后”列展示了查询 DOM 返回的内容。

7. DOM 访问 CSS 声明块

7.1. ElementCSSInlineStyle Mixin

ElementCSSInlineStyle mixin 提供了对元素内联样式属性的访问。

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

style 属性必须返回一个 CSS 声明块 对象，其中 computed flag 被取消设置，parent CSS rule 为 null， owner node 为 上下文对象。

如果用户代理支持 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 计算得到的解析值。此外，将所有其针对 obj 的计算 值不是保证无效值的自定义 属性追加到 decls。

   有些 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

适用协议

http

状态

标准

作者/更改控制人

W3C

规范文档

本文件是相关规范。

相关信息

无。

11. 更改历史

本节记录了本规范各版之间的一些更改。此部分并非详尽无遗。通常不会列出错误修复和编辑更改。

11.1. 2016年3月17日的更改

• <resolution> 的序列化已更改。

• 添加了 [CEReactions] IDL 扩展属性。

• 添加了逻辑属性的解析值。

• getComputedStyle 对 display：contents 的处理已更改。

• MediaList.item 现在返回序列化结果。

• MediaList.item 在重要性不同时不会序列化简写属性。

• 允许其他规范指定解析值。

• insertRule 中的 index 参数现在是可选的。

• Stylesheet 和 CSSImportRule 的 href 属性现在使用 USVString。

• 引入了 CSSOMString。

• 添加了 CSSMediaRule 和 CSSFontFaceRule 的序列化。

• CSS 声明块中添加了 更新标志，以避免对 style 属性进行序列化后重新解析。

• 现在正确地定义了声明值的序列化。

• getComputedStyle 现在返回节点文档的样式规则。

• 当传递给 getComputedStyle 的伪元素未知或为 ::slotted() 时，会抛出一个 TypeError 异常。

• CSS 已从接口切换为命名空间。

• 由于实现方缺乏兴趣，从 CSSStyleDeclaration 中移除了 setPropertyValue 和 setPropertyPriority。

• styleSheets IDL 属性从 Document 移动到了 DocumentOrShadowRoot。

• LinkStyle.sheet 现在返回 CSSStyleSheet 而不是 StyleSheet。

• 定义了已弃用的 CSSStyleSheet 成员。

• CSSRule.type 属性已弃用。

• 添加了 <ratio> 的序列化。

• CSSStyleDeclaration.cssText 现在对于计算样式返回空字符串。

• 自定义属性现在包含在 getComputedStyle 中。

• 引入了 MathML IDL。

• 添加了 CSSKeyframesRule 和 CSSKeyframeRule 的序列化。

• 媒体查询的序列化已更改。

• 如果某个简写属性的普通属性之间存在具有其他属性组/映射逻辑的普通属性，则不会序列化该简写属性。

• CSSStyleRule 序列化现在支持嵌套。

• 引入了可构造样式表。

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 改回只读属性。

• 删除了 @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] 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 对此规范做出的贡献。

特别感谢 Ian Hickson 撰写了 替代样式表 API 的初始版本和 CSS 值的规范化 （现在为序列化）规则。