Cssom

CSSOM定义了媒体查询、选择器以及CSS本身的一系列API(包括一般的解析和序列化规则)。

介绍

   issue: ...

历史

一些DOM Level 2 Style里的接口已经被抛弃了，这些接口在需要频繁使用的情况下显得过于笨拙，本规范将不再包括它们。DOMImplementationCSS和CSSCharsetRule也已经因为必要性不大而被移除。

一致性

该规范中的所有的图表、实例和注意事项都是非规范性的，这也包括全部被标注为非规范性的内容。除此之外的内容都是规范性的。

规范性内容中的关键字："必须"、"禁止"、"要求的"、"应该"、"不应该"、"推荐的"、"可以"、"可选的"都是RFC2119中的描述性解释。为了保障阅读的流畅性，该规范中对这些关键字不会做格式上的强调。[RFC2119]

有算法要求的部分全部使用了"必须"、"应该"、"可以"等关键字进行描述。

算法和步骤方面的一致性要求可以通过任何方式进行实现，只要运行结果相同即可。(规范里的算法定义只是为了易于遵循，而非性能最优)

用户代理在实现上可以针对无约束的用户输入进行特殊限制。比如为了防御服务攻击、为了保护过多内存被占用、为了在有局限性的平台上工作等。

当一个方法或特性调用另一个方法或特性时，用户代理必须调用其内部的API。比如在ECMAScript中，开发者无法通过重写特性或方法来改变其原本的行为。

除非特殊声明，字符串的比较都是大小写敏感的。

术语

本规范使用的术语来自DOM4、HTML、XML文档的关联样式表、XML。[DOM] [HTML] [XMLSS] [XML]

在本规范中，如果A是一个接口时，则我们讨论的对象A实际上是一个通过接口A实现的对象。

术语空格定义于CSS。

通用序列化习语

序列化一个字符的意思是创建一个由"\" (U+005C)开头，后面紧跟着该字符的字符串。

以数字码形式序列化一个字符的意思是创建一个字符串，这个字符串由"\" (U+005C)开头，后面紧跟代表该字符的Unicode数字码的最小16进制数，该数字码由0-9和a-f组成(U+0030至U+0039、U+0061至U+0066)，最后紧跟一个空格(U+0020)。

序列化一个标示符的意思是创建一个字符串，这个字符串是对该标识符的每个字符作如下处理的结果的连接：

• 如果字符在U+0000和U+001F或U+007F和U+009F的范围内，则结果是以数字码形式转换的该字符。
• 如果第一个字符在0-9的范围内(U+0030至U+0039)，则结果是以数字码的形式转换的该字符。
• 如果第二个字符在0-9的范围内(U+0030至U+0039)且第一个字符是"-" (U+002D)，则结果是以数字码的形式转换的该字符。
• 如果第二个字符是"-" (U+002D)，则结果是以数字码的形式转换的该字符。
• 如果第二个字符和第一个字符一样都是"-" (U+002D)，则结果是转换后的第二个字符。
• 如果字符不属于上述任何情况，或大于或等于U+0080，或是是"-" (U+002D)、"_" (U+005F)，0-9数字(U+0030至U+0039)，大小写英文字母(U+0041至U+005A或U+0061至U+007A)，则结果是字符本身。
• 其他情况下，结果是转换后的字符。

序列化一个字符串的意思是，创建一个字符串，这个字符串的第一个字符是"""，紧跟着对每个字符作如下处理的结果，最后以"""结尾：

• 如果字符在U+0000至U+001F或U+007F至U+009F的范围内，则结果是以数字码的形式转换的该字符。
• 如果字符是'"' (U+0022)或'\' (U+005C)，则结果是转换后的该字符。
• 否则，结果是字符本身。

   注意："'" (U+0027)不会被转换，因为这里的字符串总是被'"' (U+0022)序列化。

序列化一个URL的意思是，创建一个字符串，这个字符串以"url("开头，以")"结尾，中间是序列化的字符串。

序列化一个以逗号分隔的列表的意思是，将列表中的每一项按顺序用一个"," (U+002C)和紧跟着的一个空格 (U+0020)连接起来。

序列化一个以空格分隔的列表的意思是，将列表中的每一项按顺序用一个空格 (U+0020)连接起来。

媒体查询

媒体查询是在媒体查询规范中定义的。本节围绕媒体查询定义了一些概念，包括其API和序列化形式。

解析媒体查询

将已知字符串s 解析一个媒体查询列表的行为已经在媒体查询规范中定义，并返回其算法给出的一个或多个媒体查询的列表。

将已知字符串s 解析为一个媒体查询的行为遵循解析为一个媒体查询列表的行为，并在返回的媒体查询多于一个时返回null，在只返回一个媒体查询时返回这个媒体查询。

序列化媒体查询

序列化一个媒体查询列表会执行以下步骤：

1. 如果媒体查询列表为空，则返回空字符串并结束运行。
2. 序列化列表中的每个媒体查询，然后按字典顺序排列好，最后将这个列表序列化。

序列化一个媒体查询时，先创建一个空字符串s，然后按步骤作如下处理，最后返回s：

1. 如果媒体查询是否定的，则为s加入"not"开头，再跟随一个空格 (U+0020)。
2. 令type为媒体查询的媒体类型，并转义为小写的ASCII字符。
3. 如果媒体查询并没有包含媒体特性，则为s加入type，然后返回s并结束运行。
4. 如果type不是"all"，或媒体查询否定的，则为s加入type，再跟随一个空格 (U+0020)，再跟随"and"，再跟随一个空格 (U+0020)。
5. 将媒体特性按字典顺序排列。
6. 然后对每个媒体特性作如下处理：
   1. 为s加入一个"(" (U+0028)，跟随媒体特性的小写ASCII名称。
   2. 如果该特性有给定的值，则为s加入一个":" (U+003A)，再跟随一个空格 (U+0020)，再跟随序列化的媒体特性值。
   3. 为s加入一个")" (U+0029)。
   4. 如果这不是最后一个媒体特性，则为s加入一个空格 (U+0020)，再跟随"and"，再跟随一个空格 (U+0020)。

序列化媒体特性值

将已知的v 序列化媒体特性值，我们把v放在了前面，把序列化格式的描述放在了后面。

• width：...
• height：...
• device-width：...
• device-height：...
• orientation：如果值是"portrait"则为"portrait"；如果值是"landscape"则为"landscape"
• aspect-ratio：...
• device-aspect-ratio：...
• color：...
• color-index：...
• monochrome：...
• resolution：...
• scan：如果值是"progressive"则为"progressive"；如果值是"interlace"则为"interlace"
• grid：...

其它规范可以扩展这个表且带供应商前缀的媒体特性同样可以自定义序列号格式。

比较媒体查询

比较媒体查询 m1 和 m2 的意思是，把它们两个都序列化，如果以大小写敏感的方式判断匹配，则返回true，否则返回false。

MediaList 接口

一个实现了MediaList接口的对象具有一个相关联的媒体查询集合。

   interface MediaList {
       stringifier attribute DOMString mediaText;
       readonly attribute unsigned long length;
       DOMString item (unsigned long index);
       void appendMedium (DOMString medium);
       void deleteMedium (DOMString medium);
   };

• mediaText为字符串类型

mediaText特性必须返回一个序列化的媒体查询集合。 设置mediaText特性必须执行下列步骤：

1. 清空媒体查询集合。
2. 如果给定的值是空字符串则结束运行。
3. 将媒体查询集合给定的每个值解析并加入。

• length为只读非负长整型

length特性必须返回媒体查询集合中的媒体查询数量。

• item(非负长整型)，返回字符串

item方法必须返回通过媒体查询集合给定的第index个媒体查询。如果index超过或等于集合的长度，则返回null。

• appendMedium(字符串)，返回空

appendMedium方法必须执行以下步骤：

1. 让m为给定值的解析结果。
2. 如果m为null则结束运行。
3. 如果将媒体查询集合中的任何一个媒体查询比较m返回true，则结束运行。
4. 将m加入媒体查询集合中。

• deleteMedium(字符串)，返回空

deleteMedium方法必须执行以下步骤：

1. 让m为给定值的解析结果。
2. 如果m为null则结束运行。
3. 如果将媒体查询集合中的任何一个媒体查询比较m返回true，则将这个媒体查询移除。

通过已知s 创建一个MediaList对象会运行以下步骤：

1. 创建一个新的{@name}对象。
2. 设置其mediaText特性的值为s。
3. 返回新创建的{@name}对象。

选择器

选择器已经在CSS的选择器规范中被定义了。本章节主要定义了如何序列化他们。

解析选择器

解析一组选择器的意思是，根据选择器规范中定义的selectors_group解析一个值。如果解析为失败则返回一组选择器，否则返回null。

序列化选择器

序列化一组选择器的意思是，将组内的每个选择器都序列化，然后序列化这个组。

序列化选择器的意思是，先让s为一个空数组，然后为选择器链运行以下步骤，并最终返回s：

1. 如果只有一个简单的通用选择器，则序列化通用选择器并加入s。
2. 否则，为每个非通用且命名空间前缀为null(即不在命名空间里)或非默认命名空间的简单的选择器，序列化，并加入s。
3. 如果这不是选择器链的结尾，则为s加入一个空格(U+0020)，并适当紧跟组合字符">"、"+"或"~"，如果组合字符不是空格，则再紧跟另一个空格(U+0020)。
4. 如果这是选择器链的结尾且存在伪元素，则为s加入"::"，再紧跟伪元素的名称。

序列化一个简单选择器的意思是，让s为空字符串，运行以下步骤，然后最终返回s。

类型选择器

通用选择器

(格式需要)

1. 如果命名空间前缀对应的命名空间不是默认命名空间，也不是null命名空间(不在任何命名空间内)，则为s加入转义后的命名空间前缀，再跟随一个"|" (U+007C)字符。
2. 如果命名空间前缀对应的命名空间是null命名空间(不在任何命名空间内)则为s加入"|" (U+007C)。
3. 如果这是一个类型选择器，则为s加入转义后的元素名称。
4. 如果这是一个通用选择器，则为s加入一个"*" (U+002A)。

(格式需要)

属性选择器

(格式需要)

1. 为s加入一个"[" (U+005B)。
2. 如果命名空间前缀对应的命名空间不是null命名空间(不在任何命名空间内)，则为s加入转义后的命名空间前缀，再跟随一个"|" (U+007C)字符。
3. 如果命名空间前缀对应的命名空间是null命名空间(不在任何命名空间内)则为s加入"|" (U+007C)。
4. 为s加入转义后的属性名称。
5. 如果有被定义的属性值，则为s根据属性选择器的类型加入"="、"~="、"|="、"^="、"$="或"*="，再紧跟转义后的属性值。
6. 为s加入"]"。

(格式需要)

类型选择器

为s加入一个"." (U+002E)，再紧跟转义后的类型名称。

ID选择器

为s加入一个"#" (U+0023)，再紧跟转义后的ID名称。

伪类

如果是一个不接受参数的伪类，则为s加入":" (U+003A)，再紧跟伪类的名称。

否则，为s加入":" (U+003A)，再紧跟伪类的名称，再紧跟 "(" (U+0028)，再按下列的每种方式紧跟伪类的参数，最后紧跟")" (U+0029)。

<code>:lang()</code>

转义后的值。

<code>:nth-child()</code>

<code>:nth-last-child()</code>

<code>:nth-of-type()</code>

<code>:nth-last-of-type()</code>

(格式需要)

1. 如果是奇数，则值为"2n+1"。
2. 如果是偶数，则值为"2n"。
3. 如果a是0，则值为序列化为整数的b。
4. 如果a是1或-1同时b是0，则值为"n" (U+006E)。
5. 如果a是1或-1同时b是正数，则值为"n" (U+006E)后跟随"+" (U+002B)再跟随序列化为整数的b。
6. 如果b是0，则值为序列化为整数的a后跟随"n" (U+006E)。
7. 否则，值为序列化为正数的a，紧跟"n" (U+006E)，如果b是正数，则紧跟"+" (U+002B)，再紧跟序列化为整数的b。

(格式需要)

<code>:not()</code>

通过序列化一组选择器的方法将其值序列化。

CSS

样式表

样式表是一个抽象的概念，它代表了CSS中定义的样式表。在DOM里一个样式表是一个CSSStyleSheet对象。一个样式表具有多个相关的属性：

样式表类型：字面量"text/css"。

样式表位置：样式表的URL，如果样式表是内嵌形式的，则为null。

父样式表：该样式表的父样式表。

样式表所属结点：该样式表相关联的DOM结点，如果没有相关联的DOM结点则为null。

样式表所属的CSS规则：如果该样式表是被包含于某个父样式表的CSS规则，则为该CSS规则，否则为null。

样式表媒介：与样式表相关联的MediaList对象。在设置该属性的时候，以被设置的字符串，通过创建一个MediaList对象的步骤，返回这个对象。

样式表标题：样式表的标题。如果标题为空，则是空字符串。

<style> body { background:papayawhip } </style>
<style> body { background:orange } </style>

样式表备选标记：只有选中和非选中两种状态，默认为非选中。

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

样式表不可用标记：只有选中和非选中两种状态，默认为非选中。

样式表CSS规则：样式表相关联的CSS规则。

当你创建一个样式表时，上述属性都会被设置为相应的值，同时伴随样式表类型和样式表CSS规则的异常处理。

StyleSheet接口

StyleSheet接口代表了一个抽象的基本样式表。

interface StyleSheet {
    readonly attribute DOMString type;
    readonly attribute DOMString href;
    readonly attribute Node ownerNode;
    readonly attribute StyleSheet parentStyleSheet;
    readonly attribute DOMString title;
    readonly attribute MediaList media;
    attribute boolean disabled;
};

type，DOMString类型，只读

type特性必需返回样式表类型。

href，DOMString类型，只读

href特性必需返回样式表位置。

ownerNode，Node类型，只读

ownerNode特性必需返回样式表所属结点。

parentStyleSheet，StyleSheet类型，只读

parentStyleSheet特性必需返回父样式表。

title，DOMString类型，只读

title特性必需返回样式表标题。

media，MediaList类型，只读

media特性必需返回样式表媒介。

type，DOMString类型，只读

type特性必需返回样式表类型。

disabled，boolean类型

如果样式表不可用标记为选中状态，则disabled特性必需返回true，否则返回false。设置disabled特性为true时，样式表不可用标记为选中，否则为未选中。

CSSStyleSheet接口

CSSStyleSheet接口代表了一个CSS样式表规则。

interface CSSStyleSheet {
    readonly attribute CSSRule ownerRule;
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
};

ownerNode，CSSRule类型，只读

ownerNode特性必需返回该样式表所属CSS规则。

cssRules，CSSRuleList类型，只读

cssRules特性必需返回一个代表样式表CSS规则的CSSRuleList对象。

注：在解析过程中被丢掉的CSS规则不会被本规范中描述的API找到。

insertRule(DOMString, unsigned long)，返回unsigned long

insertRule操作必需在cssRules返回的CSS规则列表中的index位置插入一个名为rule的CSS规则。

deleteRule(unsigned long)，返回void

deleteRule操作必需在cssRules返回的CSS规则列表中的index位置删除一个CSS规则。

样式表集合

下列各项新概念都与每个Document对象相关联。

每个Document都有一个名为文档样式表列表的相关联的列表，这个列表包含0个或多个样式表。该列表是一个包含该Document所有相关联的样式表的有序的列表，且该列表是按照目录树顺序排列的，以及按HTTP头的顺序，首先从HTTP Link头创建的样式表。 (这段没有完全理解愿意)

创建一个样式表的步骤如下：

1. 创建一个新的样式表对象，并将其各属性值设置好。
2. 为新创建的样式表执行添加一个样式表的步骤。

添加一个样式表的步骤如下：

1. 在文档样式表列表的适当位置加入该样式表。其余的步骤取决于该样式表不可用标记。
2. 如果样式表不可用标记被选中，终止运行。
3. 如果样式表标题不为空，样式表备选标记未被选中，首选样式表集合名为空，则改变首选样式表集合名为该样式表标题。
4. 如果以下任何条件为true，则取消选中样式表不可用标记并终止运行：
   • 样式表标题为空。
   • 最近样式表集合名是null且样式表标题是大小写敏感的匹配首选样式表集合名。
   • 样式表标题是大小写敏感的匹配最近样式表集合名。
5. 选中样式表不可用标记。

持久性样式表的意思是文档样式表列表中的某样式表，其样式表标题为空，并且其样式表备选标记未选中。

样式表集合是一个有序集合，它包含一个或多个文档样式表集合的样式表，这些样式表有唯一的非空样式表标题。

样式表集合名是一个样式表集合通用的样式表标题。

可用的样式表集合是每个样式表不可用标记都未选中的样式表集合。

启用一个样式表集合为name的步骤如下：

1. 如果name是空字符串，则选中样式表集合中的每个样式表的样式表不可用标记并终止运行。
2. 取消选中大小写敏感的匹配name的样式表集合中的每个样式表的样式表不可用标记。同时将其它样式表集合的样式表的样式表不可用标记选中。

选中一个样式表集合为name的步骤如下：

1. 启用一个样式表集合为name。
2. 设置最近样式表集合名为name。

最近样式表集合名是一个决定最近被选中的样式表集合的概念。其初始值为null。

首选样式表集合名是一个决定取消选中样式表不可用标记的样式表列表的概念。其初始值为空字符串。

改变首选样式表集合名为name的步骤如下：

1. 让current为首选样式表集合名。 (这里原文好像写反了)
2. 设置首选样式表集合名为name。
3. 如果name和current在大小写敏感的情况下不匹配，且最近样式表集合名是null，则启用样式表集合为name。

HTTP头的Default-Style

HTTP的Default-Style头可以用作设置首选样式表集合名，它可以用来影响可用的样式表集合的初始状态。

用户代理必需按照HTTP头顺序，根据每个HTTP的Default-Style头改变首选样式表集合名为该HTTP头的值。

StyleSheetList序列

StyleSheetList序列代表了一个有序的样式表集合。

[[TBD - TYPEDEF]]

对Document接口的扩展

partial interface Document {
    readonly attribute StyleSheetList styleSheets;
    attribute DOMString? selectedStyleSheetSet;
    readonly attribute DOMString? lastStyleSheetSet;
    readonly attribute DOMString? preferredStyleSheetSet;
    readonly attribute DOMStringList styleSheetSets;
    void enableStyleSheetsForSet (DOMString? name);
};

styleSheets，StyleSheetList类型，只读

styleSheets特性必需返回一个代表文档样式表列表的StyleSheetList序列。

注：因为之前的IDL限制，styleSheets特性曾是一个独立的接口：DocumentStyle

selectedStyleSheetSet，DOMString类型

selectedStyleSheetSet特性在读取时的步骤如下：

1. 如果当前只有一个单独的可用样式表集合，且没有其它样式表标题非空且样式表不可用标记未选中的文档样式表列表。则返回该可用样式表集合的样式表集合名，并终止运行。
2. 否则，如果在不同的样式表集合中，都有样式表不可用标记未选中的情况，则返回null，并终止运行。
3. 否则，返回空字符串。

注：这里指所有样式表标题非空的样式表都选中了样式表不可用标记，或没有样式表标题非空的样式表。

设置selectedStyleSheetSet特性的步骤如下：

1. 如果值为null，则终止运行。
2. 否则，选择一个样式表集合为传入的这个值。

从DOM的角度，所有的视图都有相同的selectedStyleSheetSet。如果用户代理支持多种视图，同时可选择多个备选样式表，那么这个特性(和StyleSheet接口的disabled特性)必需返回默认视图的值。

lastStyleSheetSet，DOMString类型，只读

lastStyleSheetSet特性必须返回最近样式表集合名。

注：该特性初始值为null。

preferredStyleSheetSet，DOMString类型，只读

preferredStyleSheetSet特性必需返回首选样式表集合名。

注：和lastStyleSheetSet不一样，该特性的初始值为空字符串。

styleSheetSets，DOMStringList类型，只读

styleSheetSets特性必需返回一个列表，这个列表是文档样式表列表顺序的样式表集合名的列表。

enableStyleSheetsForSet(DOMString?)，返回void

enableStyleSheetsForSet被调用时的运行步骤如下：

1. 如果name是null，则终止运行。
2. 启用一个样式表集合为name。

注：样式表标题为空的样式表绝不会被这个方法影响。这个方法不改变lastStyleSheetSet或preferredStyleSheetSet特性。

与用户界面的交互

支持样式表的浏览器用户界面应该列出styleSheetSets列表给出的所有样式表标题，将selectedStyleSheetSet作为选中的样式表集合展示出来，如果其为null或空字符串，则保留未选中状态，同时，如果selectedStyleSheetSet和preferredStyleSheetSet都是空字符串，则选择一个额外的“基本页面样式”(或类似的)选项。

从该列表中选择一个样式表时应该遵循选择一个样式表集合的步骤。它被定义将会影响到lastStyleSheetSet特性。

保持被选中的样式表集合

如果用户代理保持选中的样式表集合，则应该使用selectedStyleSheetSet特性的值。或者，如果这个值是null，则当离开这个页面(或某些其它的时候)时，lastStyleSheetSet特性是要存储的名称。如果lastStyleSheetSet是null，则样式表集合不应该被保留。

当重置样式表集合为保留值时(这可以发生在任何时候，典型的是在第一次通过样式表列表呈现文档样式时、在文档的<head>解析之后、在任何不取决于样式计算结果的脚本运行之后)，如果用户已经手动选择了集合，则样式表集合应该通过选择一个样式表集合的步骤进行设置。

示例

<link rel="alternate stylesheet" title="foo" href="a">
<link rel="alternate stylesheet" title="bar" href="b">
<script>
  document.selectedStyleSheetSet = 'foo';
  document.styleSheets[1].disabled = false;
</script>
<link rel="alternate stylesheet" title="foo" href="c">
<link rel="alternate stylesheet" title="bar" href="d">

<link rel="alternate stylesheet" title="foo" href="a">
<link rel="alternate stylesheet" title="bar" href="b">
<script>
  var before = document.preferredStyleSheetSet;
  document.styleSheets[1].disabled = false;
</script>
<link rel="stylesheet" title="foo" href="c">
<link rel="alternate stylesheet" title="bar" href="d">
<script>
  var after = document.preferredStyleSheetSet;
</script>

样式表关联

本章节定义了一个样式表所属结点有必要实现的接口，以及XML样式表处理说明和当其关联类型是ASCII大小写不敏感的"stylesheet"时的HTTP的link头的需求。其它地方并没有这个定义。

LinkStyle接口

结点的相关联样式表是指文档样式表列表中样式表所属结点实现了LinkStyle接口的样式表。

interface LinkStyle {
    readonly attribute StyleSheet sheet;
}

sheet，StyleSheet类型，只读

sheet特性必须返回该结点的相关联样式表，如果相关联样式表不存在，则返回null。

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

对规范的要求

规范介绍通过DOM关联样式表的新方式应该定义哪些结点实现了LinkStyle接口。同时，它们必须也定义样式表何时被创建。

对用户代理实现xml-stylesheet处理说明的要求

[[TBD - IMPLEMENTS]]

对于每个不在文档类型声明之中且拥有href伪特性的xml-stylesheet处理说明，必须运行以下步骤：

1. 让title为伪特性title，如果伪特性title没有被设置，则为空字符串。
2. 如果存在alternate伪特性，且值为大小写敏感的"yes"，title是空字符串，则终止运行。
3. 如果type伪特性的值不是被支持的样式语言，则用户代理可以终止运行。
4. 分解href伪特性设置的URL，并抓取它。
5. 当资源可用时，文档在古怪模式下且资源的Content-Type metadata并不是支持的样式语言，则将其Content-Type metadata设置为text/css。
   注：事实上这一步骤从未发生，但为保证其它规范发生改变时规则的一致性，这里还会将其包含在内。
6. 如果资源并不属于支持的样式语言则终止运行。
7. 以下列属性创建一个样式表：

样式表位置

资源的绝对地址。

父样式表

null

样式表所属结点

该结点

样式表所属CSS规则

null

样式表媒介

media伪特性的值，如果其不存在则为空字符串

样式表标题

title

样式表备选标记

如果alternate伪特性的值是大小写敏感的"yes"则选中，否则不选中。

对用户代理实现HTTP头的Link的要求

对于每个链接关系类型为大小写不敏感的stylesheet的HTTP Link头，必须运行以下步骤：

1. 让title为第一个title或title*参数，如果不存在这样的参数，则为空字符串。
2. 如果其它链接关系类型匹配大小写不敏感的alternate，且title是空字符串，则终止运行。
3. 分解被设置的URL，并抓取它。
4. 当资源可用时，文档在古怪模式下且资源的Content-Type metadata并不是支持的样式语言，则将其Content-Type metadata设置为text/css。
5. 如果资源并不属于支持的样式语言则终止运行。
6. 以下列属性创建一个样式表：

样式表位置

资源的绝对地址。

父样式表

null

样式表所属结点

null

样式表所属CSS规则

null

样式表媒介

第一个media参数。

样式表标题

title

样式表备选标记

如果该HTTP Link头的任意链接关系类型是大小写不敏感的alternate，则选中，否则不选中。

CSS规则

解析一个CSS规则的意思是……

序列化一个CSS规则依照CSS规则的类型，如下：

CSSStyleRule

……

CSSImportRule

下面字符串的相连接结果。

1. 字面量字符串"@import"，紧跟一个空格(U+0020)，紧跟URL转义后的href特性。
2. 如果相关联的MediaList对象非空，则一个空格(U+0020)，紧跟相关联MediaList对象的mediaText特性的值。
3. 一个";" (U+003B)。

(格式要求)

CSSMediaRule

……

CSSFontFaceRule

……

CSSPageRule

……

CSSNamespaceRule

字面量"@namespace"，紧跟一个空格(U+0020)，紧跟标识符转义后的prefix特性和一个空格(U+0020) (如果存在的话)，紧跟URL转义后的namespaceURI特性，紧跟一个";" (U+003B)。

插入一个CSS规则到一个CSS规则列表list中的index位置会执行这些步骤：

1. 如果index是负数或大于list的长度，则抛出一个"IndexSizeError"异常并终止运行。
2. 解析rule。
3. 如果解析失败则终止运行。
4. 如果由于CSS规范的限制导致新对象不能插入到list中的index位置，则抛出"HierarchyRequestError"异常并终止运行。
5. 插入新对象到list中的index位置。

从CSS规则列表list的index位置删除一个CSS规则会执行这些步骤：

1. 如果index是负数或大于list的长度，则抛出一个"IndexSizeError"异常并执行运行。
2. 删除list的index位置的对象。

CSSRuleList序列

CSSRuleList序列代表了一个CSS样式规则的有序集合。

[[TBD - TYPEDEF]]

CSSRule接口

CSSRule接口代表了一个抽象的基本CSS样式规则。每个不同的CSS样式规则类型都继承该接口呈现出不同的接口。

interface CSSRule {
    const unsigned short STYLE_RULE = 1;
    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 NAMESPACE_RULE = 10;
    readonly attribute unsigned short type;
    attribute DOMString cssText;
    readonly attribute CSSRule parentRule;
    readonly attribute CSSStyleSheet parentStyleSheet;
};

STYLE_RULE，unsigned short类型，值为1

当type特性的值为STYLE_RULE时，实现该接口的对象必须实现CSSStyleRule接口。

IMPORT_RULE，unsigned short类型，值为3

当type特性的值为IMPORT_RULE时，实现该接口的对象必须实现CSSImportRule接口。

MEDIA_RULE，unsigned short类型，值为4

当type特性的值为MEDIA_RULE时，实现该接口的对象必须实现CSSMediaRule接口。

FONT_FACE_RULE，unsigned short类型，值为5

当type特性的值为FONT_FACE_RULE时，实现该接口的对象必须实现CSSFontFaceRule接口。

PAGE_RULE，unsigned short类型，值为6

当type特性的值为PAGE_RULE时，实现该接口的对象必须实现CSSPageRule接口。

NAMESPACE_RULE，unsigned short类型，值为10

当type特性的值为NAMESPACE_RULE时，实现该接口的对象必须实现CSSNamespaceRule接口。

type，unsigned short类型，只读

type特性必须返回下列值中的一个：STYLE_RULE, IMPORT_RULE, MEDIA_RULE, FONT_FACE_RULE, PAGE_RULE, NAMESPACE_RULE或一个注册的扩展值。

值0和2，之前作为UNKNOWN_RULE和CHARSET_RULE，已经被本规范弃用。这些值将被永久保留不再使用。

注：新的规则类型约束在CSSOM约束wiki页面中。

cssText，DOMString类型

cssText特性必须返回序列化的CSS规则。

当设置cssText特性时运行这些步骤：

1. 解析其值。
2. 如果解析失败则终止运行。
3. 如果新对象的type并不匹配当前对象的type则抛出"InvalidModificationError"异常。
4. 替换当前对象为新对象。

(格式要求)

parentRule，CSSRule类型，只读

parentRule特性必须返回包含当前规则的最近规则。如果没有任何包含规则，则返回null。

注：比如，@media可以包含一个规则。

parentStyleSheet，CSSStyleSheet类型，只读

parentStyleSheet特性必须返回包含当前规则的CSSStyleSheet对象。

CSSStyleRule接口

CSSStyleRule接口代表了一个规则集合。

interface CSSStyleRule {
    attribute DOMString selectorText;
    readonly attribute CSSStyleDeclaration style;
};

selectorText，DOMString类型

在取值selectorText特性时，必须返回序列化相关选择器组的结果。

当赋值selectorText特性时，必须运行以下步骤：

1. 对给定的值运行解析一个选择器组的算法。
2. 如果该算法返回一个非null的值，则以此替代相关的选择器组。
3. 否则，如果该算法返回null，则什么也不做。

(格式要求)

style，CSSStyleDeclaration类型，只读

style特性必须返回表示规则集合的CSSStyleDeclaration对象。

CSSImportRule接口

CSSImportRule接口代表了一个@import规则。

interface CSSImportRule {
    readonly attribute DOMString href;
    readonly attribute MediaList media;
    readonly attribute CSSStyleSheet styleSheet;
};

href，DOMString类型，只读

href特性必须返回@import规则的URL。

注：得到的是对相关样式表href特性解析后的URL。

media，MediaList类型，只读

media特性必须返回相关联的media特性。

styleSheet，CSSStyleSheet，只读

styleSheet特性必须返回相关联的样式表。

注：如果载入样式表失败，则其cssRules列表是空的。换句话说，一个@import规则总是有一个相关联的样式表。

CSSMediaRule接口

CSSMediaRule接口代表了一个@media规则。

interface CSSMediaRule {
    readonly attribute MediaList media;
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
};

media，MediaList类型，只读

media特性必须返回一个列出@media规则设定的媒介查询列表的MediaList对象。

cssRules，CSSRuleList类型，只读

cssRules特性必须返回一个列出@media规则设定的CSS规则列表的CSSRuleList对象。

insertRule(DOMString, unsigned long)，返回unsigned long

insertRule操作必须插入一个CSS规则rule到cssRules返回的CSS规则列表的index位置。

deleteRule(unsigned long)，返回void

deleteRule操作必须从cssRules返回的CSS规则列表中的index位置删除一个CSS规则。

CSSFontFaceRule接口

CSSFontFaceRule接口代表了一个@font-face规则。

interface CSSFontFaceRule {
    readonly attribute CSSStyleDeclaration style;
};

style，CSSStyleDeclaration类型，只读

style特性必须返回一个包含@font-face规则设定的属性声明的CSSStyleDeclaration块。

CSSPageRule接口

CSSPageRule接口代表了一个@page规则。

interface CSSPageRule {
    attribute DOMString selectorText;
    readonly attribute CSSStyleDeclaration style;
};

selectorText，DOMString类型

在对selectorText特性取值时，必须返回序列化相关联的CSS页选择器的结果。

1. 对给定的值运行解析一个CSS页选择器的算法。
2. 如果算法返回一个非null的值，则替换相关联的CSS页选择器为算法返回值。
3. 否则，如果算法返回null，则什么也不做。

(格式要求)

style，CSSStyleDeclaration类型，只读

style特性必须返回一个包含@page规则设定的属性声明的CSSStyleDeclaration块。

CSSNamespaceRule接口

CSSNamespaceRule接口代表了一个@namespace规则。

interface CSSNamespaceRule {
    readonly attribute DOMString namespaceURI;
    readonly attribute DOMString? prefix;
};

namespaceURI，DOMString类型，只读

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

prefix，DOMString类型，只读

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

CSS声明块

一个CSS声明块，也叫CSS声明，是指一个CSS属性及其相关的值的有序集合。在DOM里，一个CSS声明块是一个CSSStyleDeclaration对象。一个CSS声明块有两个相关属性：

CSS声明块只读标记

如果该对象可以配置，则是未选中；如果该对象不可配置，则为选中；其它情况为未选中。

CSS声明块的声明列表

该对象相关联的CSS声明列表。

CSSStyleDeclaration接口

CSSStyleDeclaration接口代表了一个CSS声明块，包括依赖于CSSStyleDeclaration实例的资源的基础状态。(underlying state?)

interface CSSStyleDeclaration {
    attribute DOMString cssText;
    readonly attribute unsigned long length;
    DOMString item (unsigned long index);
    DOMString getPropertyValue (DOMString property);
    DOMString getPropertyPriority (DOMString property);
    void setProperty (DOMString property, DOMString value, optional DOMString priority);
    DOMString removeProperty (DOMString property);
    readonly attribute CSSRule? parentRule;
};

cssText，DOMString类型

cssText特性必须返回把CSS声明块的声明列表序列化的结果。

当设置cssText特性时，必须运行这些步骤：

1. 如果CSS声明块只读标记为选中，则抛出一个NoModificationAllowedError异常并终止运行。
2. 清空CSS声明块的声明列表。
3. 解析给定的值，且如果返回值不是null，则将其插入CSS声明块的声明列表中。

(格式需要)

length，unsigned long类型，只读

length特性必须返回CSS声明列表的声明数量。

parentRule，CSSRule类型，只读

parentRule特性必须返回CSSStyleDeclaration对象相关联的CSSRule对象。如果没有相关联的CSSRule对象，则返回null。

item(unsigned long)，返回DOMString

item操作必须返回index位置的属性。

getPropertyValue(DOMString)，返回DOMString

getPropertyValue方法必须 (此处省略78个字儿)

getPropertyPriority(DOMString)，返回DOMString

当getPropertyPriority操作被调用时，如果property是一个大小写不敏感的匹配了的属性且拥有一个优先级，则用户代理必须根据给定的语法定义返回该属性的优先级。否则，返回空字符串。

比如对于background-color:lime !IMPORTANT来说，返回值将会是important。

setProperty(DOMString, DOMString, 可选的DOMString)，返回void

setProperty操作必须运行这些步骤：

1. 如果CSS声明块只读标记选中，则抛出一个NoModificationAllowedError异常并终止运行。
2. 如果property并没有大小写不敏感的匹配一个支持的属性，则终止运行。
3. 如果value是空字符串，则调用removeProperty()，并传入property参数，然后终止运行。
4. 如果priority参数被省略，则让priority为空字符串。
5. 如果priority不是有效的优先级也不是空字符串，则终止运行。
6. 如果解析属性值返回null则终止运行。
   注：value并不包含!important。
7. 最后，当priority不为空时，设置property的值为value，且优先级为priority，否则只设置property的值为value。

(格式需要)

removeProperty(DOMString)，返回DOMString

removeProperty操作必须运行这些步骤：

1. 如果CSS声明块只读标记选中，则抛出NoModificationAllowedError异常并终止运行。
2. 如果property大小写不敏感的匹配了一个CSS声明列表中的声明，则删除这个声明。

在下面的表格中，第一列的IDL特性必须返回调用getPropertyValue()并传入相应的第二列的CSS属性作为参数的结果。

同样是下面这个表，设置其第一列的IDL特性必须调用setProperty()，并传入相应的第二列的CSS属性和给定的值作为第一个和第二个参数，第三个参数不存在。任何异常都必须提前抛出。

IDL特性 -> CSS属性 (表略)

CSS的值

解析CSS的值

解析一个CSS的值 property的意思是根据大小写不敏感匹配property的CSS规范里的属性定义，解析给定的值。如果给定的值被忽略则返回null，否则返回给定的property的CSS的值。

序列化CSS的值

序列化一个CSS的值会运行这些步骤：

• 序列化任何CSS值里的组件值。
• 在多个CSS组件值可以任意顺序出现且不干扰表意的地方(通常会表示为双竖线||语法)，使用语法中给定的顺序。
• 在CSS值里的组件值可以被省略且不干扰表意的地方(比如，缩写属性值里的初始值)，省略它们。如果这会删除所有的值，则包含第一个被允许的值。
  比如margin: 20px 20px变成了margin: 20px。
  比如border的属性值0。
• 如果缩写属性值被请求，但这个缩写属性相关联的属性值无法表现为缩写，则序列化为空字符串。
• 如果值是一个用空格分隔的CSS组件值列表，则序列化这个以空格分隔的列表。
• 如果值是一个用分号分隔的CSS组件值列表，则序列化这个以分号分隔的列表。

序列化一个CSS组件值依赖于下列组件：

keyword

转换为小写后的关键字

<angle>

以<number>进行序列化后紧跟字面量"deg"的度数。

<color>

保留系统颜色，可能还有颜色关键字……

<counter>

将这些内容串连起来：

1. 如果<counter>有3个CSS组件值，则为字符串"counters("。
2. 如果<counter>有2个CSS组件值，则为字符串"counter("。
3. 如果最后一个CSS组件值是'decimal'则省略它。得到序列化属于<counter>的CSS组件值的列表的结果。
4. ")" (U+ 0029)

(格式需要)

<frequency>

以赫兹为单位的频度，以<number>的方式序列化后紧跟字面量"hz"。

<identifier>

转义后的标示符。

<length>

0长度会表示为字面量"0px"。

绝对长度：对毫米数进行<number>序列化，后面紧跟"mm"。

Rumor将由绝对长度变为相对长度。Centimeters将会兼容<resolution>……

相对长度：对<number>组件进行<number>序列化，然后紧跟各自规范中定义的单位格式。

<number>

浏览器看起来使用ToString()，但是可以根据技术给定一个从某些角度看存在问题的有效数字。

<percentage>

对<number>组件进行序列化，再紧跟字面量"%" (U+0025)。

<resolution>

以每厘米多少点为分辨率的数字，进行<number>序列化，并跟随字面量"dpcm"。

<shape>

字符串"rect"，跟随序列化属于<shape>CSS组件值列表，跟随")" (U+0029)。

<string>

<family-name>

<specific-voice>

转义后的字符串。

<time>

以秒为单位的数字进行<number>序列化，再跟随字面量"s"。

<uri>

URL转义后的绝对地址。

<absolute-size>，<border-width>，<border-style>，<bottom>，<generic-family>，<generic-voice>，<left>，<margin-width>，<padding-width>，<relative-size>，<right>和<top>都被该规范认为微观的。他们都代表了上述提到的组件示例。

示例

这里有一些示例，针对一些特定值的前后结果对比。之前列是作者写在样式表里的，而之后列是通过DOM查询得到的结果：

DOM访问和CSS声明块

ElementCSSInlineStyle接口

ElementCSSInlineStyle接口实现于Element对象，依次提供内联样式属性访问。

[NoInterfaceObject]
interface ElementCSSInlineStyle {
    readonly attribute CSSStyleDeclaration style;
};

style，CSSStyleDeclaration，只读

style特性必须返回一个可变的CSSStyleDeclaration对象，该对象代表了相关Element对象的内联样式属性列表。

对Window接口的扩展

partial interface Window {
    CSSStyleDeclaration getComputedStyle (Element elt);
    CSSStyleDeclaration getComputedStyle (Element elt, DOMString pseudoElt);
};

getComputedStyle(Element)，返回CSSStyleDeclaration

getComputedStyle(Element, DOMString)，返回CSSStyleDeclaration

getComputedStyle操作必须运行这些步骤：

1. 方法被调用时，让doc为调用该方法的Window对象相关联的Document。
2. 让obj为elt。
3. 如果pseudoElt大小写不敏感的匹配:before或::before，则obj为elt的'::before'伪元素。
4. 如果pseudoElt大小写不敏感的匹配:after或::after，则obj为elt的'::after'伪元素。
5. 返回一个具有选中的CSS声明块只读标记和CSS声明块声明列表的CSS声明块，其具有obj使用doc的样式规则计算出来的所有用户代理支持的属性的最终值。
   注：意思是说，即使obj在不同的文档中(比如，通过XMLHttpRequest抓取到的)，getComputedStyle()仍然会使用调用它计算CSS声明块的全局对象相关联的文档的样式。

最终值

getComputedStyle()历史上被定义为返回一个元素或伪元素“计算后的值”。尽管如此，“计算后的值”这个概念在不同的CSS版本中发生了改变。可getComputedStyle()的实现有必要对已经部署的脚步保持相同的兼容性。为了达到这个目的，本规范介绍了最终值的概念。

给定属性的最终值可以通过接下来的方式决定：

line-height

其最终值就是使用的值。

height

margin

margin-bottom

margin-left

margin-right

margin-top

padding

padding-bottom

padding-left

padding-right

padding-top

width

如果属性提供给了元素或伪元素且display的最终值不是none，则最终值是使用的值，否则最终值是计算后的值。

bottom

left

right

top

如果属性提供给了一个被定位的元素且display的最终值不是none，则最终值是使用的值，否则最终值是计算后的值。

任何其他值

其最终值是计算后的值。

IANA考虑

Default-Style

本节介绍了永久性消息标头字段注册表中注册的头字段。

头字段名称

Default-Style

应用协议

http

状态

标准

作者/变更控制

W3C

规范文档

该文档就是相关的规范

相关信息

无

引用

正式引用

[DOM]

DOM4, Anne van Kesteren, Aryeh Gregor and Ms2ger. W3C.

[HTML]

HTML, Ian Hickson. WHATWG.

[RFC2119]

Key words for use in RFCs to Indicate Requirement Levels, Scott Bradner. IETF.

[XML]

Extensible Markup Language, Tim Bray, Jean Paoli, C. M. Sperberg-McQueen et al.. W3C.

[XMLSS]

Associating Style Sheets with XML documents 1.0 (Second Edition), James Clark, Simon Pieters and Henry S. Thompson. W3C.

非正式引用

致谢

The editors would like to thank Alexey Feldgendler, Björn Höhrmann, Brian Kardell, Christian Krebs, Daniel Glazman, David Baron, fantasai, Hallvord R. M. Steen, Ian Hickson, John Daggett, Lachlan Hunt, Morten Stenshorne, Philip Taylor, Robert O'Callahan, Sjoerd Visscher, Simon Pieters, Sylvain Galineau, Tarquin Wilton-Jones, and Zack Weinberg for contributing to this specification.

Additional thanks to Ian Hickson for writing the initial version of the alternative style sheets API and canonicalization (now serialization) rules for CSS values.