Warning:
This wiki has been archived and is now read-only.
Cssom
CSSOM定义了媒体查询、选择器以及CSS本身的一系列API(包括一般的解析和序列化规则)。
Contents
介绍
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 解析一个媒体查询列表的行为已经在媒体查询规范中定义,并返回其算法给出的一个或多个媒体查询的列表。
not all
"将已知字符串s 解析为一个媒体查询的行为遵循解析为一个媒体查询列表的行为,并在返回的媒体查询多于一个时返回null,在只返回一个媒体查询时返回这个媒体查询。
not all
"序列化媒体查询
序列化一个媒体查询列表会执行以下步骤:
- 如果媒体查询列表为空,则返回空字符串并结束运行。
- 序列化列表中的每个媒体查询,然后按字典顺序排列好,最后将这个列表序列化。
序列化一个媒体查询时,先创建一个空字符串s,然后按步骤作如下处理,最后返回s:
- 如果媒体查询是否定的,则为s加入"
not
"开头,再跟随一个空格 (U+0020)。 - 令type为媒体查询的媒体类型,并转义为小写的ASCII字符。
- 如果媒体查询并没有包含媒体特性,则为s加入type,然后返回s并结束运行。
- 如果type不是"
all
",或媒体查询否定的,则为s加入type,再跟随一个空格 (U+0020),再跟随"and
",再跟随一个空格 (U+0020)。 - 将媒体特性按字典顺序排列。
- 然后对每个媒体特性作如下处理:
- 为s加入一个"
(
" (U+0028),跟随媒体特性的小写ASCII名称。 - 如果该特性有给定的值,则为s加入一个"
:
" (U+003A),再跟随一个空格 (U+0020),再跟随序列化的媒体特性值。 - 为s加入一个"
)
" (U+0029)。 - 如果这不是最后一个媒体特性,则为s加入一个空格 (U+0020),再跟随"and",再跟随一个空格 (U+0020)。
- 为s加入一个"
-
not screen and (min-WIDTH:5px) AND (max-width:40px )
:not screen and (max-width: 40px) and (min-width: 5px)
-
all and (color) and (color)
:(color)
序列化媒体特性值
将已知的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
特性必须执行下列步骤:
- 清空媒体查询集合。
- 如果给定的值是空字符串则结束运行。
- 将媒体查询集合给定的每个值解析并加入。
-
length
为只读非负长整型
length
特性必须返回媒体查询集合中的媒体查询数量。
-
item
(非负长整型),返回字符串
item
方法必须返回通过媒体查询集合给定的第index个媒体查询。如果index超过或等于集合的长度,则返回null。
-
appendMedium
(字符串),返回空
appendMedium
方法必须执行以下步骤:
- 让m为给定值的解析结果。
- 如果m为null则结束运行。
- 如果将媒体查询集合中的任何一个媒体查询比较m返回true,则结束运行。
- 将m加入媒体查询集合中。
-
deleteMedium
(字符串),返回空
deleteMedium
方法必须执行以下步骤:
- 让m为给定值的解析结果。
- 如果m为null则结束运行。
- 如果将媒体查询集合中的任何一个媒体查询比较m返回true,则将这个媒体查询移除。
通过已知s 创建一个MediaList
对象会运行以下步骤:
- 创建一个新的
{@name}
对象。 - 设置其
mediaText
特性的值为s。 - 返回新创建的
{@name}
对象。
选择器
选择器已经在CSS的选择器规范中被定义了。本章节主要定义了如何序列化他们。
解析选择器
解析一组选择器的意思是,根据选择器规范中定义的selectors_group
解析一个值。如果解析为失败则返回一组选择器,否则返回null。
序列化选择器
序列化一组选择器的意思是,将组内的每个选择器都序列化,然后序列化这个组。
序列化选择器的意思是,先让s为一个空数组,然后为选择器链运行以下步骤,并最终返回s:
- 如果只有一个简单的通用选择器,则序列化通用选择器并加入s。
- 否则,为每个非通用且命名空间前缀为null(即不在命名空间里)或非默认命名空间的简单的选择器,序列化,并加入s。
- 如果这不是选择器链的结尾,则为s加入一个空格(U+0020),并适当紧跟组合字符">"、"+"或"~",如果组合字符不是空格,则再紧跟另一个空格(U+0020)。
- 如果这是选择器链的结尾且存在伪元素,则为s加入"::",再紧跟伪元素的名称。
序列化一个简单选择器的意思是,让s为空字符串,运行以下步骤,然后最终返回s。
- 类型选择器
- 通用选择器
- (格式需要)
- 如果命名空间前缀对应的命名空间不是默认命名空间,也不是null命名空间(不在任何命名空间内),则为s加入转义后的命名空间前缀,再跟随一个"
|
" (U+007C)字符。 - 如果命名空间前缀对应的命名空间是null命名空间(不在任何命名空间内)则为s加入"
|
" (U+007C)。 - 如果这是一个类型选择器,则为s加入转义后的元素名称。
- 如果这是一个通用选择器,则为s加入一个"
*
" (U+002A)。
- 如果命名空间前缀对应的命名空间不是默认命名空间,也不是null命名空间(不在任何命名空间内),则为s加入转义后的命名空间前缀,再跟随一个"
- (格式需要)
- 属性选择器
- (格式需要)
- 为s加入一个"
[
" (U+005B)。 - 如果命名空间前缀对应的命名空间不是null命名空间(不在任何命名空间内),则为s加入转义后的命名空间前缀,再跟随一个"
|
" (U+007C)字符。 - 如果命名空间前缀对应的命名空间是null命名空间(不在任何命名空间内)则为s加入"
|
" (U+007C)。 - 为s加入转义后的属性名称。
- 如果有被定义的属性值,则为s根据属性选择器的类型加入"="、"~="、"|="、"^="、"$="或"*=",再紧跟转义后的属性值。
- 为s加入"
]
"。
- 为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>
- (格式需要)
- 如果是奇数,则值为"2n+1"。
- 如果是偶数,则值为"2n"。
- 如果a是0,则值为序列化为整数的b。
- 如果a是1或-1同时b是0,则值为"n" (U+006E)。
- 如果a是1或-1同时b是正数,则值为"n" (U+006E)后跟随"+" (U+002B)再跟随序列化为整数的b。
- 如果b是0,则值为序列化为整数的a后跟随"n" (U+006E)。
- 否则,值为序列化为正数的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
头创建的样式表。 (这段没有完全理解愿意)
创建一个样式表的步骤如下:
- 创建一个新的样式表对象,并将其各属性值设置好。
- 为新创建的样式表执行添加一个样式表的步骤。
添加一个样式表的步骤如下:
- 在文档样式表列表的适当位置加入该样式表。其余的步骤取决于该样式表不可用标记。
- 如果样式表不可用标记被选中,终止运行。
- 如果样式表标题不为空,样式表备选标记未被选中,首选样式表集合名为空,则改变首选样式表集合名为该样式表标题。
- 如果以下任何条件为true,则取消选中样式表不可用标记并终止运行:
- 样式表标题为空。
- 最近样式表集合名是null且样式表标题是大小写敏感的匹配首选样式表集合名。
- 样式表标题是大小写敏感的匹配最近样式表集合名。
- 选中样式表不可用标记。
持久性样式表的意思是文档样式表列表中的某样式表,其样式表标题为空,并且其样式表备选标记未选中。
样式表集合是一个有序集合,它包含一个或多个文档样式表集合的样式表,这些样式表有唯一的非空样式表标题。
样式表集合名是一个样式表集合通用的样式表标题。
可用的样式表集合是每个样式表不可用标记都未选中的样式表集合。
启用一个样式表集合为name的步骤如下:
- 如果name是空字符串,则选中样式表集合中的每个样式表的样式表不可用标记并终止运行。
- 取消选中大小写敏感的匹配name的样式表集合中的每个样式表的样式表不可用标记。同时将其它样式表集合的样式表的样式表不可用标记选中。
选中一个样式表集合为name的步骤如下:
- 启用一个样式表集合为name。
- 设置最近样式表集合名为name。
最近样式表集合名是一个决定最近被选中的样式表集合的概念。其初始值为null。
首选样式表集合名是一个决定取消选中样式表不可用标记的样式表列表的概念。其初始值为空字符串。
改变首选样式表集合名为name的步骤如下:
- 让current为首选样式表集合名。 (这里原文好像写反了)
- 设置首选样式表集合名为name。
- 如果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
特性在读取时的步骤如下:- 如果当前只有一个单独的可用样式表集合,且没有其它样式表标题非空且样式表不可用标记未选中的文档样式表列表。则返回该可用样式表集合的样式表集合名,并终止运行。
- 否则,如果在不同的样式表集合中,都有样式表不可用标记未选中的情况,则返回null,并终止运行。
- 否则,返回空字符串。
- 注:这里指所有样式表标题非空的样式表都选中了样式表不可用标记,或没有样式表标题非空的样式表。
- 设置
selectedStyleSheetSet
特性的步骤如下:- 如果值为null,则终止运行。
- 否则,选择一个样式表集合为传入的这个值。
- 从DOM的角度,所有的视图都有相同的
selectedStyleSheetSet
。如果用户代理支持多种视图,同时可选择多个备选样式表,那么这个特性(和StyleSheet
接口的disabled
特性)必需返回默认视图的值。 lastStyleSheetSet
,DOMString类型,只读-
lastStyleSheetSet
特性必须返回最近样式表集合名。 - 注:该特性初始值为null。
preferredStyleSheetSet
,DOMString类型,只读-
preferredStyleSheetSet
特性必需返回首选样式表集合名。 - 注:和
lastStyleSheetSet
不一样,该特性的初始值为空字符串。 styleSheetSets
,DOMStringList类型,只读-
styleSheetSets
特性必需返回一个列表,这个列表是文档样式表列表顺序的样式表集合名的列表。 enableStyleSheetsForSet
(DOMString?),返回void-
enableStyleSheetsForSet
被调用时的运行步骤如下:- 如果name是null,则终止运行。
- 启用一个样式表集合为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">
最终启用的样式表是"a"、"b"和"c",selectedStyleSheetSet
特性应该为null,lastStyleSheetSet
将返回"foo",preferredStyleSheetSet
将会返回空字符串。
同样的,下面的HTML片段中:
<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>变量"before"将等于空字符串,变量"after"将等于"foo","a"和"c"样式表会被启用。即使第一段脚本设置样式表"b"为可用也是如此,因为解析了接下来的
<link>
元素之后,preferredStyleSheetSet
设置了且enableStyleSheetsForSet()
方法被调用(至此selectedStyleSheetSet
从未被显式设置,lastStyleSheetSet
始终为null),这个方法改变了哪些样式表开启,哪些不开启。样式表关联
本章节定义了一个样式表所属结点有必要实现的接口,以及XML样式表处理说明和当其关联类型是ASCII大小写不敏感的"stylesheet
"时的HTTP的link
头的需求。其它地方并没有这个定义。
LinkStyle
接口
结点的相关联样式表是指文档样式表列表中样式表所属结点实现了LinkStyle
接口的样式表。
interface LinkStyle { readonly attribute StyleSheet sheet; }
sheet
,StyleSheet类型,只读-
sheet
特性必须返回该结点的相关联样式表,如果相关联样式表不存在,则返回null。
style
元素有一个sheet
特性,这个特性返回一个代表该样式表的StyleSheet
对象。但是第二个style
其特性返回null。(假设用户代理支持CSS(text/css
)但不支持ExampleSheets(text/example-sheets
))。
<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
处理说明,必须运行以下步骤:
- 让title为伪特性
title
,如果伪特性title
没有被设置,则为空字符串。 - 如果存在
alternate
伪特性,且值为大小写敏感的"yes
",title是空字符串,则终止运行。 - 如果type伪特性的值不是被支持的样式语言,则用户代理可以终止运行。
- 分解
href
伪特性设置的URL,并抓取它。 - 当资源可用时,文档在古怪模式下且资源的Content-Type metadata并不是支持的样式语言,则将其Content-Type metadata设置为
text/css
。注:事实上这一步骤从未发生,但为保证其它规范发生改变时规则的一致性,这里还会将其包含在内。 - 如果资源并不属于支持的样式语言则终止运行。
- 以下列属性创建一个样式表:
- 样式表位置
- 资源的绝对地址。
- 父样式表
- null
- 样式表所属结点
- 该结点
- 样式表所属CSS规则
- null
- 样式表媒介
-
media
伪特性的值,如果其不存在则为空字符串 - 样式表标题
- title
- 样式表备选标记
- 如果
alternate
伪特性的值是大小写敏感的"yes
"则选中,否则不选中。
对用户代理实现HTTP头的Link
的要求
对于每个链接关系类型为大小写不敏感的stylesheet
的HTTP Link
头,必须运行以下步骤:
- 让title为第一个
title
或title*
参数,如果不存在这样的参数,则为空字符串。 - 如果其它链接关系类型匹配大小写不敏感的
alternate
,且title是空字符串,则终止运行。 - 分解被设置的URL,并抓取它。
- 当资源可用时,文档在古怪模式下且资源的Content-Type metadata并不是支持的样式语言,则将其Content-Type metadata设置为
text/css
。 - 如果资源并不属于支持的样式语言则终止运行。
- 以下列属性创建一个样式表:
- 样式表位置
- 资源的绝对地址。
- 父样式表
- null
- 样式表所属结点
- null
- 样式表所属CSS规则
- null
- 样式表媒介
- 第一个
media
参数。 - 样式表标题
- title
- 样式表备选标记
- 如果该HTTP
Link
头的任意链接关系类型是大小写不敏感的alternate
,则选中,否则不选中。
CSS规则
解析一个CSS规则的意思是……
序列化一个CSS规则依照CSS规则的类型,如下:
CSSStyleRule
- ……
CSSImportRule
- 下面字符串的相连接结果。
- 字面量字符串"
@import
",紧跟一个空格(U+0020),紧跟URL转义后的href
特性。 - 如果相关联的
MediaList
对象非空,则一个空格(U+0020),紧跟相关联MediaList
对象的mediaText
特性的值。 - 一个"
;
" (U+003B)。
- 字面量字符串"
- (格式要求)
CSSMediaRule
- ……
CSSFontFaceRule
- ……
CSSPageRule
- ……
CSSNamespaceRule
- 字面量"
@namespace
",紧跟一个空格(U+0020),紧跟标识符转义后的prefix
特性和一个空格(U+0020) (如果存在的话),紧跟URL转义后的namespaceURI
特性,紧跟一个";
" (U+003B)。
插入一个CSS规则到一个CSS规则列表list中的index位置会执行这些步骤:
- 如果index是负数或大于list的长度,则抛出一个"
IndexSizeError
"异常并终止运行。 - 解析rule。
- 如果解析失败则终止运行。
- 如果由于CSS规范的限制导致新对象不能插入到list中的index位置,则抛出"
HierarchyRequestError
"异常并终止运行。 - 插入新对象到list中的index位置。
从CSS规则列表list的index位置删除一个CSS规则会执行这些步骤:
- 如果index是负数或大于list的长度,则抛出一个"
IndexSizeError
"异常并执行运行。 - 删除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
特性时运行这些步骤:- 解析其值。
- 如果解析失败则终止运行。
- 如果新对象的
type
并不匹配当前对象的type
则抛出"InvalidModificationError
"异常。 - 替换当前对象为新对象。
- (格式要求)
parentRule
,CSSRule类型,只读-
parentRule
特性必须返回包含当前规则的最近规则。如果没有任何包含规则,则返回null。注:比如,@media
可以包含一个规则。 parentStyleSheet
,CSSStyleSheet类型,只读-
parentStyleSheet
特性必须返回包含当前规则的CSSStyleSheet
对象。
CSSStyleRule
接口
CSSStyleRule
接口代表了一个规则集合。
interface CSSStyleRule { attribute DOMString selectorText; readonly attribute CSSStyleDeclaration style; };
selectorText
,DOMString类型- 在取值
selectorText
特性时,必须返回序列化相关选择器组的结果。 - 当赋值
selectorText
特性时,必须运行以下步骤:- 对给定的值运行解析一个选择器组的算法。
- 如果该算法返回一个非null的值,则以此替代相关的选择器组。
- 否则,如果该算法返回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页选择器的结果。- 对给定的值运行解析一个CSS页选择器的算法。
- 如果算法返回一个非null的值,则替换相关联的CSS页选择器为算法返回值。
- 否则,如果算法返回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声明列表。
item()
方法有关。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
特性时,必须运行这些步骤:- 如果CSS声明块只读标记为选中,则抛出一个
NoModificationAllowedError
异常并终止运行。 - 清空CSS声明块的声明列表。
- 解析给定的值,且如果返回值不是null,则将其插入CSS声明块的声明列表中。
- 如果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
操作必须运行这些步骤:- 如果CSS声明块只读标记选中,则抛出一个
NoModificationAllowedError
异常并终止运行。 - 如果property并没有大小写不敏感的匹配一个支持的属性,则终止运行。
- 如果value是空字符串,则调用
removeProperty()
,并传入property参数,然后终止运行。 - 如果priority参数被省略,则让priority为空字符串。
- 如果priority不是有效的优先级也不是空字符串,则终止运行。
- 如果解析属性值返回null则终止运行。注:value并不包含
!important
。 - 最后,当priority不为空时,设置property的值为value,且优先级为priority,否则只设置property的值为value。
- 如果CSS声明块只读标记选中,则抛出一个
- (格式需要)
removeProperty
(DOMString),返回DOMString-
removeProperty
操作必须运行这些步骤:- 如果CSS声明块只读标记选中,则抛出
NoModificationAllowedError
异常并终止运行。 - 如果property大小写不敏感的匹配了一个CSS声明列表中的声明,则删除这个声明。
- 如果CSS声明块只读标记选中,则抛出
在下面的表格中,第一列的IDL特性必须返回调用getPropertyValue()
并传入相应的第二列的CSS属性作为参数的结果。
同样是下面这个表,设置其第一列的IDL特性必须调用setProperty()
,并传入相应的第二列的CSS属性和给定的值作为第一个和第二个参数,第三个参数不存在。任何异常都必须提前抛出。
IDL特性 -> CSS属性 (表略)
CSS的值
解析CSS的值
解析一个CSS的值 property的意思是根据大小写不敏感匹配property的CSS规范里的属性定义,解析给定的值。如果给定的值被忽略则返回null,否则返回给定的property的CSS的值。
!important
声明并不是属性值的一部分,因此会导致解析CSS的值为null。序列化CSS的值
序列化一个CSS的值会运行这些步骤:
- 序列化任何CSS值里的组件值。
- 在多个CSS组件值可以任意顺序出现且不干扰表意的地方(通常会表示为双竖线
||
语法),使用语法中给定的顺序。 - 在CSS值里的组件值可以被省略且不干扰表意的地方(比如,缩写属性值里的初始值),省略它们。如果这会删除所有的值,则包含第一个被允许的值。比如
margin: 20px 20px
变成了margin: 20px
。比如border
的属性值0
。 - 如果缩写属性值被请求,但这个缩写属性相关联的属性值无法表现为缩写,则序列化为空字符串。
- 如果值是一个用空格分隔的CSS组件值列表,则序列化这个以空格分隔的列表。
- 如果值是一个用分号分隔的CSS组件值列表,则序列化这个以分号分隔的列表。
序列化一个CSS组件值依赖于下列组件:
- keyword
- 转换为小写后的关键字
- <angle>
- 以<number>进行序列化后紧跟字面量"
deg
"的度数。 - <color>
- 保留系统颜色,可能还有颜色关键字……
- <counter>
- 将这些内容串连起来:
- 如果<counter>有3个CSS组件值,则为字符串"
counters(
"。 - 如果<counter>有2个CSS组件值,则为字符串"
counter(
"。 - 如果最后一个CSS组件值是'decimal'则省略它。得到序列化属于<counter>的CSS组件值的列表的结果。
- "
)
" (U+ 0029)
- 如果<counter>有3个CSS组件值,则为字符串"
- (格式需要)
- <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查询得到的结果:
- background: none -> background: rgba(0, 0, 0, 0)
- outline: none -> outline: invert
- border: none -> border: medium
- list-style: none -> list-style: disc
- margin: 0 1px 1px 1px -> margin: 0px 1px 1px
- azimuth: behind left -> azimuth: 220deg
- font-family: a, 'b"', serif -> font-family: "a", "b\"", serif
- content: url('h)i') '\[\]' -> content: url("h)i") "[]"
- azimuth: leftwards -> azimuth: leftwards
- color: rgb(18, 52, 86) -> color: #123456
- color: rgba(000001, 0, 0, 1) -> color: #000000
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),返回CSSStyleDeclarationgetComputedStyle
(Element, DOMString),返回CSSStyleDeclaration-
getComputedStyle
操作必须运行这些步骤:- 方法被调用时,让doc为调用该方法的
Window
对象相关联的Document
。 - 让obj为elt。
- 如果pseudoElt大小写不敏感的匹配
:before
或::before
,则obj为elt的'::before'伪元素。 - 如果pseudoElt大小写不敏感的匹配
:after
或::after
,则obj为elt的'::after'伪元素。 - 返回一个具有选中的CSS声明块只读标记和CSS声明块声明列表的CSS声明块,其具有obj使用doc的样式规则计算出来的所有用户代理支持的属性的最终值。注:意思是说,即使obj在不同的文档中(比如,通过
XMLHttpRequest
抓取到的),getComputedStyle()
仍然会使用调用它计算CSS声明块的全局对象相关联的文档的样式。
- 方法被调用时,让doc为调用该方法的
getComputedStyle
操作之前是一个名为ViewCSS
的单独的接口。最终值
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.