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. 如果这不是选择器链的最后一部分，请在s中附加一个空格（U+0020），后跟适当的组合符 ">"、 "+"、 "~"、 ">>"或 "||"，如果组合符不是空格，则再附加一个空格（U+0020）。
4. 如果这是选择器链的最后一部分并且存在伪元素，请附加"::"，后跟伪元素的名称，到s。

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

类型选择器

通用选择器

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

属性选择器

1. 附加"["（U+005B）到s。
2. 如果命名空间前缀映射到非null命名空间（不在命名空间中），则将命名空间前缀作为标识符的序列化结果，后跟"|"（U+007C），附加到s。
3. 将属性名称作为标识符的序列化结果附加到s。
4. 如果指定了属性值，附加"="、 "~="、 "|="、 "^="、 "$="或 "*="，然后附加属性值的序列化结果作为字符串，到s。
5. 如果属性选择器具有区分大小写标志，则附加" i"（U+0020 U+0069）到s。
6. 附加"]"（U+005D）到s。

类选择器

附加"."（U+002E），后跟类名的序列化结果作为标识符，到s。

ID选择器

附加"#"（U+0023），后跟ID的序列化结果作为标识符，到s。

伪类

如果伪类不接受参数，附加":"（U+003A），后跟伪类名称，到s。

否则，附加":"（U+003A），后跟伪类名称，后跟"("（U+0028），后跟根据以下规则确定的伪类参数值，后跟")"（U+0029），到s。

:lang()

序列化每个参数的逗号分隔列表，并按相对顺序保留其 序列化为字符串的结果。

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

根据规则序列化值以序列化一个<an+b>值。

:not()

根据规则序列化值以序列化一组选择器。

6. CSS

6.1. CSS样式表

一个CSS样式表是一个抽象概念， 表示由CSS规范定义的样式表。在CSSOM中，CSS样式表表示为一个CSSStyleSheet 对象。

CSSStyleSheet(options)

调用时，执行创建构造的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样式表，如果样式表是嵌入的则为null。此值在样式表的生命周期内不会改变。

父CSS样式表

创建时指定。CSS样式表的父样式表，如果没有关联的父样式表则为null。

所有者节点

创建时指定。与CSS样式表关联的DOM节点，如果没有关联的DOM节点则为null。

所有者CSS规则

创建时指定。父CSS规则中的 父CSS样式表导致包含的CSS样式表，如果没有关联的规则则为null。

媒体

创建时指定。与CSS样式表关联的MediaList对象。

如果此属性指定为字符串，媒体必须设置为调用 创建MediaList对象步骤的返回值。

如果此属性指定为所有者节点的一个属性，媒体必须设置为调用 创建MediaList对象步骤的返回值。每当该属性被设置、更改或移除时， 媒体的mediaText 属性必须被设置为该属性的新值，如果该属性不存在则为null。

注意：更改媒体的mediaText属性不会更改 所有者节点上的相应属性。

注意：如果一个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 样式表 是来自 文档或 shadow root 的 CSS 样式表，其 title 为空字符串，且其 alternate 标志 未设置。

CSS 样式表集 是来自 文档或 shadow root 的 CSS 样式表 的一个或多个 CSS 样式表 的有序集合，这些样式表具有相同的 title 且不为空字符串。

CSS 样式表集名称 是 title 是 CSS 样式表集 共有的。

启用的 CSS 样式表集 是一个 CSS 样式表集，其中每个 CSS 样式表 都取消了 禁用标志。

要 启用一个 CSS 样式表集，名称为 name，执行以下步骤：

1. 如果 name 为空字符串，则为 CSS 样式表集 中的每个 CSS 样式表 设置禁用标志，并返回。
2. 为 CSS 样式表集 中的每个 CSS 样式表 取消禁用标志，该样式表的 CSS 样式表集名称 与 name 大小写敏感 匹配，并为 CSS 样式表集 中的所有其他样式表设置禁用标志。

要 选择一个 CSS 样式表集，名称为 name，执行以下步骤：

1. 启用一个 CSS 样式表集，名称为 name。
2. 将 上一个 CSS 样式表集名称 设置为 name。

上一个 CSS 样式表集名称 是一个概念，用于确定上次选择的 CSS 样式表集。初始值为 null。

首选的 CSS 样式表集名称 是一个概念，用于确定需要取消禁用标志的 CSS 样式表。初始值为空字符串。

要 更改首选的 CSS 样式表集名称，名称为 name，执行以下步骤：

1. 令 current 为 首选的 CSS 样式表集名称。
2. 将 首选的 CSS 样式表集名称 设置为 name。
3. 如果 name 与 current 大小写敏感 不匹配，且 上一个 CSS 样式表集名称 为 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 样式表 数量减一的数字。如果没有这些 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 样式表 所需实现的接口，并定义了 xml-stylesheet 处理指令和 HTTP Link 头的要求， 当链接关系类型与 "stylesheet" 匹配时，忽略大小写。

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;

Prolog 指的是作为 文档 的子节点且不在 元素 子节点后的 文档中的节点（如果有）。

当 ProcessingInstruction 节点 node 成为 prolog 的一部分，或不再是 prolog 的一部分，或其 数据 发生更改时，必须运行以下步骤：

1. 如果当前正在为 node 运行该算法的实例，则中止该实例，并停止关联的 获取（如果适用）。
2. 如果 node 有 关联的 CSS 样式表，移除 它。
3. 如果 node 不是 xml-stylesheet 处理指令，则返回。
4. 如果 node 没有 href 伪属性，则返回。
5. 设 title 为 title 伪属性 的值，或如果未指定 title 伪属性，则为空字符串。
6. 如果有 alternate 伪属性 且其值与 "yes" 匹配，并且 title 为空字符串，则返回。
7. 如果有 type 伪属性 且其值不是 支持的样式语言，用户代理可以返回。
8. 设 input URL 为 href 伪属性 指定的值。
9. 设 document 为 node 的 节点文档。
10. 设 base URL 为 document 的 文档基本 URL。
11. 设 referrer 为 document 的 地址。
12. 设 parsed URL 为调用 URL 解析器 并使用 字符串 input URL 和基本 URL base URL 返回的值。
13. 如果 parsed URL 失败，则返回。
14. 设 response 为 获取 CSS 样式表 的结果，使用解析后的 URL parsed URL，引用页 referrer 和文档 document。
15. 如果 response 是错误，则返回。
16. 创建 CSS 样式表 并具有以下属性：

    位置

    调用 URL 序列化器 并使用 parsed URL 的结果。

    父 CSS 样式表

    为 null。

    所有者节点

    为 node。

    所有者 CSS 规则

    为 null。

    媒体

    为 media 伪属性 的值（如果有），否则为空字符串。

    标题

    为 title。

    备用标志

    如果 alternate 伪属性 的值与 "yes" 匹配，则设置，否则未设置。

    源清洁标志

    如果 response 是 CORS-same-origin，则设置，否则未设置。

    CSS 的 环境编码 是通过运行以下步骤得出的结果：

    1. 如果元素有 charset 伪属性，则从该伪属性的值中获取编码。如果成功，则返回结果编码并中止这些步骤。
    2. 否则，返回 文档的字符编码。[DOM]

由 xml-stylesheet 处理指令引用的样式表，根据本节中的规则，在 文档 的上下文中，如果该 ProcessingInstruction 节点 是由 文档 的解析器创建的，并且当解析器创建该节点时样式表已启用，最后一次 事件循环 到达步骤 1 时，节点位于该文档中，且用户代理尚未放弃加载该特定样式表，那么该样式表被认为是 阻塞脚本的样式表。用户代理可以随时放弃该样式表的加载。

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

cssText属性必须返回CSS规则的序列化结果。设置cssText属性时，必须不做任何操作。

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

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

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

注意：唯一返回null的情况是当规则已经被移除。

注意：从Node实例中移除实现LinkStyle接口的节点，并不会（本身）导致CSSRule引用的CSSStyleSheet变得无法访问。

type属性已被弃用。它必须返回一个整数，如下：

如果对象是CSSStyleRule

返回1。

如果对象是CSSImportRule

返回3。

如果对象是CSSMediaRule

返回4。

如果对象是CSSFontFaceRule

返回5。

如果对象是CSSPageRule

返回6。

如果对象是CSSKeyframesRule

返回7。

如果对象是CSSKeyframeRule

返回8。

如果对象是CSSMarginRule

返回9。

如果对象是CSSNamespaceRule

返回10。

如果对象是CSSCounterStyleRule

返回11。

如果对象是CSSSupportsRule

返回12。

如果对象是CSSFontFeatureValuesRule

返回14。

如果对象是CSSViewportRule

返回15。

否则

返回0。

注意：使用整数枚举和几个常量来标识整数是一个遗留设计实践，不再用于Web API中。相反，建议通过检查rule.constructor.name来确定对象的规则类型，这将返回类似"CSSStyleRule"的字符串。

6.4.3.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中的所有CSS声明，且这些声明尚未在already serialized中，并且其属性名映射到shorthands中的某个简写属性。
      2. 如果映射到shorthand的所有属性不在longhands中，则继续执行简写循环步骤。
      3. 令current longhands为一个空数组。
      4. 将longhands中CSS声明的所有项追加到current longhands，这些项的属性名映射到shorthand。
      5. 如果current longhands中有一个或多个CSS声明的important标志已设置，且有一个或多个尚未设置，请继续执行简写循环步骤。
      6. 如果在current longhands中的第一个和最后一个长手之间有任何声明属于同一逻辑属性组，但具有不同的映射逻辑，且不在current longhands中，请继续执行简写循环步骤。
      7. 令value为调用序列化CSS值时，使用current longhands的返回值。
      8. 如果value为空字符串，请继续执行简写循环步骤。
      9. 令serialized declaration为调用序列化CSS声明时的返回值，使用属性名shorthand、值value，如果current longhands的important标志已设置，则设置important标志。
      10. 将serialized declaration追加到list。
      11. 将current longhands的所有项的属性名追加到already serialized。
      12. 继续执行声明循环步骤。
   5. 令value为调用序列化CSS值时，使用declaration的返回值。
   6. 令serialized declaration为调用序列化CSS声明时的返回值，使用属性名property、值value，如果declaration的important标志已设置，则设置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 转换为 ASCII 小写字母。
   2. 如果 property 是一个简写属性，则执行以下步骤：
      1. 创建一个新的空数组 list。
      2. 对于每个与 property 映射的长属性 longhand，按规范顺序执行以下步骤：
         1. 如果 longhand 与声明中的 属性名称 进行大小写敏感匹配， 则让 declaration 为该 CSS 声明，否则为 null。
         2. 如果 declaration 是 null，则返回空字符串。
         3. 将 declaration 追加到 list。
      3. 如果 list 中所有声明的 important 标志 相同，则返回 list 的 序列化结果。
      4. 返回空字符串。
2. 如果 property 与声明中的 属性名称 进行大小写敏感匹配，则返回该声明的 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 与声明中的 属性名称 大小写敏感匹配，且该声明的 important 标志 已设置，则返回字符串 "important"。
3. 返回空字符串。

setProperty(property, value, priority) 方法必须运行以下步骤：

1. 如果 computed 标志 已设置， 则 抛出 NoModificationAllowedError 异常。
2. 如果 property 不是 自定义属性，请按以下子步骤操作：
   1. 将 property 转换为 ASCII 小写。
   2. 如果 property 不是与 支持的 CSS 属性 大小写敏感匹配，则返回。
3. 如果 value 是空字符串，使用 property 作为参数调用 removeProperty() 并返回。
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 不是空字符串则设置 important 标志，否则不设置，并且使用的声明列表为 declarations。
   2. 如果 longhand result 为 true，则将 updated 设为 true。
9. 否则，将 updated 设为 设置 CSS 声明 property 的结果，值为 component value list，如果 priority 不是空字符串则设置 important 标志，否则不设置，使用的声明列表为 declarations。
10. 如果 updated 为 true，更新样式属性 的 CSS 声明块。

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

• 声明列表 declarations 中必须存在一个 CSS 声明，其 属性名称 与 property 进行大小写敏感匹配。此声明被称为 target declaration。
• target declaration 的值必须为 component value list，且 target declaration 的 important 标志 必须在设置了 important 标志时被 设置，否则被 取消设置。
• 除 target declaration 外，declarations 中的其他 CSS 声明 不得被更改、插入或移除。
• 如果 declarations 中存在与 property 属于同一 逻辑属性组 但映射逻辑不同的 CSS 声明，则 target declaration 必须位于这些声明之后。
• 如果在执行这些步骤后 declarations 的序列化发生了变化，则必须返回 true，否则可以返回 false。

我们是否应该添加类似“在 declarations 之外不得产生任何可观察到的副作用”？目前的约束似乎存在未定义行为的漏洞。

注意： 设置 CSS 声明 的步骤未在本级别的 CSSOM 中定义。用户代理可以使用不同的算法，只要上述约束成立。

removeProperty(property) 方法必须执行以下步骤：

1. 如果 computed 标志 已设置，则 抛出 NoModificationAllowedError 异常。
2. 如果 property 不是 自定义属性，则将 property 转换为 ASCII 小写。
3. 将调用 getPropertyValue() 传入 property 作为参数的返回值赋给 value。
4. 将 removed 设为 false。
5. 如果 property 是简写属性，遍历每个长属性 longhand，对 property 进行映射：
   1. 如果 longhand 不是声明列表 declarations 中的属性名称，继续。
   2. 移除该 CSS 声明，并将 removed 设为 true。
6. 否则，如果 property 是与声明列表中的属性名称大小写敏感匹配的，则移除该 CSS 声明，并将 removed 设为 true。
7. 如果 removed 为 true，更新 CSS 声明块 的样式属性。
8. 返回 value。

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

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

对于每个支持的 CSS 属性 property，以下部分接口适用，camel-cased attribute 是通过为 property 运行 CSS property to IDL attribute 算法获得的。

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

获取 camel-cased attribute 属性时，必须返回通过为 camel-cased attribute 运行 IDL attribute to CSS property 算法，传递给 getPropertyValue() 的结果。

设置 camel-cased attribute 属性时，必须调用 setProperty()，第一个参数为通过为 camel-cased attribute 运行 IDL attribute to CSS property 算法的结果，第二个参数为给定值，不传递第三个参数。抛出的任何异常必须重新抛出。

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

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

webkit-cased attribute 属性在获取时，必须返回通过为 webkit-cased attribute 运行 IDL attribute to CSS property 算法，并设置了 dash prefix 标志后，传递给 getPropertyValue() 的结果。

设置 webkit-cased attribute 属性时，必须调用 setProperty()，第一个参数为通过为 webkit-cased attribute 运行 IDL attribute to CSS property 算法并设置了 dash prefix 标志的结果，第二个参数为给定值，不传递第三个参数。抛出的任何异常必须重新抛出。

对于每个支持的 CSS 属性 property，除了那些在属性名中没有 "-" (U+002D) 的属性，以下部分接口适用，其中 dashed attribute 是 property。

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

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

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

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 已设置，将 uppercase next 设为未设置，并将 c 转换为 ASCII 大写，并附加到 output。
   3. 否则，将 c 附加到 output。
5. 返回 output。

IDL 属性到 CSS 属性 的算法对于 attribute，可选地设置 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 设置为 doc 的样式规则为 obj 计算的所有支持的 CSS 属性的长属性，按字母顺序排列。此外，向 decls 追加所有自定义属性，其计算值不是保证无效的值。
6. 返回一个具有以下属性的实时 CSS 声明块：

   computed flag

   已设置。

   声明

   decls。

   parent CSS rule

   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 声明块添加了 更新标志，以避免在样式属性上进行序列化和重新解析。

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

• 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 值的规范化 （现在为序列化）规则。