1. 简介
CSS 定义了一组有限的参数,称为属性(properties),用于指导文档的渲染。每个属性都有一个名称(例如 color、font-size 或 border-style)、一个值空间(例如 <color>、<length-percentage>、[ solid | dashed | dotted | … ])以及定义的渲染行为。属性值通过属性声明分配给文档的各个部分,这些声明为相关的元素或框赋予属性值(例如 red、12pt、dotted)。
CSS 的基本设计原则之一是层叠(cascading),它允许多个样式表影响文档的呈现。当不同的声明尝试为相同的元素/属性组合设置值时,必须以某种方式解决冲突。
当没有声明试图为“元素/属性”组合设置值时,会出现相反的问题。在这种情况下,将通过继承或查看属性的初始值来寻找该值。
级联和默认化过程以一组声明作为输入,并为每个元素的每个属性输出一个指定值。
本规范描述了为文档中所有元素上的所有属性查找指定值的规则。页面上下文及其边距框中的指定值查找规则描述于 [css-page-3] 中。
1.1. 模块交互
本节是规范性的。
本模块替换并扩展了 [CSS2] 第 6 章中定义的分配属性值、层叠和继承的规则。
其他 CSS 模块可能会扩展此处定义的某些语法和功能。例如,媒体查询第 4 级规范在与本模块结合时,扩展了本规范中使用的 <media-query> 值类型的定义。
就本规范而言,文本节点被视为其关联元素的元素子节点,并拥有全套属性;由于它们不能被选择器定位,其所有计算值均通过默认化分配。
2. 导入样式表:@import 规则
@import 规则允许用户从其他样式表导入样式规则。如果 @import 规则指向一个有效的样式表,用户代理必须将该样式表的内容视为如同直接书写在 @import 规则的位置一样,但有两个例外。
-
如果某个功能(例如 @namespace 规则)明确定义为仅适用于特定样式表而不适用于任何导入的样式表,则它不适用于该导入的样式表。
-
如果某个特性依赖于样式表中两个或多个构造的相对顺序(例如 @namespace 规则不得有除 @import 之外的其他规则在其前方的要求),则该要求仅适用于同一样式表内的构造。
例如,来自导入样式表的样式规则中的声明与级联的交互,就如同它们字面书写在 @import 所在位置的样式表中一样。
任何 @import 规则必须位于样式表中所有其他有效 @规则和样式规则之前(忽略 @charset),否则该 @import 规则无效。@import 的语法如下:
@import [ <url> | <string> ]
[ supports( [ <supports-condition> | <declaration> ] ) ]?
<media-query-list>? ;
其中 <url> 或 <string> 提供要导入的样式表的 URL,而可选的 [<supports-condition>|<declaration>] 和 <media-query-list>(统称为导入条件)说明了其适用的条件。
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
如果提供了 <string>,则必须将其解释为具有相同值的 <url>。
2.1. 条件 @import 规则
导入条件允许导入依赖于媒体或特性支持。在没有任何导入条件的情况下,导入是无条件的。(为 <media-query-list> 指定 all 具有相同的效果。)如果导入条件不匹配,则导入样式表中的规则不适用,就像导入的样式表被包含在具有给定条件的 @media 和/或 @supports 块中一样。
@import url ( "fineprint.css" ) print; @import url ( "bluish.css" ) projection, tv; @import url ( "narrow.css" ) handheld and( max-width:400 px );
因此,只要导入条件不匹配,用户代理就可以避免获取条件导入。此外,如果 <supports-condition> 阻止了导入样式表的应用,UA *不得* 获取该样式表(除非它是通过其他链接加载的),并且 *必须* 为导入规则的 CSSImportRule.styleSheet 值返回 null(即使它是通过其他链接加载的)。
@import url ( "fallback-layout.css" ) supports ( not( display: flex)); @supports ( display: flex) { ...}
导入条件由 <media-query-list>(作为媒体查询列表解析和解释)和 <supports-condition>(作为支持查询解析和解释)给出。如果提供了 <declaration> 来代替 <supports-condition>,则必须将其解释为 <supports-decl>(即暗示了额外的括号),并作为 <supports-condition> 处理。
@import "mystyle.css" supports ( display: flex); @import "mystyle.css" supports (( display: flex));
导入条件的评估和完整语法由 媒体查询 (Media Queries) [MEDIAQ] 和 CSS 条件规则 (CSS Conditional Rules) [CSS-CONDITIONAL-3] 规范定义。
2.2. 处理样式表导入
当同一个样式表在多个地方被导入或链接到文档时,用户代理必须处理(或表现得好像处理了)每个链接,就像该链接指向一个独立的样式表一样。
注:这不对资源获取提出任何要求,仅涉及样式表如何在 CSSOM 中反映以及在本规范等规范中如何使用。假设缓存得当,UA 只获取一次样式表是完全合适的,即使它被多次链接或导入。
导入样式表的级联源是导入它的样式表的级联源。
导入样式表的环境编码是导入它的样式表的编码。[css-syntax-3]
-
如果 rule 有 <supports-condition>,且该条件不为真,则返回。
-
令 parsedUrl 为 URL 解析器处理 rule 的 URL 和 parentStylesheet 的位置后的结果。如果算法返回错误,则返回。[CSSOM]
-
从 parsedUrl 获取样式资源,样式表为 parentStylesheet,目标为 "style",CORS 模式为 "no-cors",且 processResponse 为以下步骤,给定 响应 response 以及字节流(null 或失败)byteStream:
-
如果 maybeByteStream 不是字节流,则返回。
-
如果 parentStylesheet 处于怪异模式 (quirks mode) 且 response 是 CORS 同源,令 content type 为
"text/css"。否则,令 content type 为 response 的 Content Type 元数据。 -
如果 content type 不是
"text/css",则返回。 -
令 importedStylesheet 为解析 byteStream(给定 parsedUrl)后的结果。
-
将 importedStylesheet 的来源清洁标志 (origin-clean flag) 设置为 parentStylesheet 的来源清洁标志。
-
将 rule 的
styleSheet设置为 importedStylesheet。
-
2.3. CSS 样式表的 Content-Type
导入样式表的处理取决于所链接资源的实际类型。
-
如果资源没有 Content-Type 元数据,则该类型被视为
text/css。 -
如果宿主文档处于怪异模式,且宿主文档的来源与所链接资源响应的来源 URL 的来源同源,则该类型被视为
text/css。 -
否则,该类型由其 Content-Type 元数据确定。
如果链接资源的类型为 text/css,则必须将其解释为 CSS 样式表。否则,必须将其解释为网络错误。
3. 简写属性
某些属性是简写属性,意味着它们允许作者通过单个属性指定多个属性的值。简写属性设置其所有的长写子属性,就像原地展开一样。
当简写形式中省略了值时,除非另有定义,否则每个“缺失的”子属性都会被分配其初始值。
例如,编写 background: green 而不是 background-color: green 可确保背景颜色覆盖任何先前可能已将背景设置为具有 background-image 的图像的声明。
h1{ font-weight : bold; font-size : 12 pt ; line-height : 14 pt ; font-family : Helvetica; font-variant : normal; font-style : normal; }
因此可以重写为
h1{ font : bold12 pt /14 pt Helvetica}
在某些情况下,简写可能具有不同的语法或特殊关键字,这些语法或关键字不直接对应其子属性的值。(在这种情况下,简写将明确定义其值的展开。)
在其他情况下,属性可能是简写属性的一个仅重置子属性:与其他子属性一样,当未指定时,它会被简写属性重置为初始值,但简写属性可能不包含将该子属性设置为其任何其他值的语法。例如,border 简写属性会将 border-image 重置为其初始值 none,但没有语法将其设置为其他任何值。[css-backgrounds-3]
如果简写属性被指定为某个CSS 全局关键字 [css-values-3],它会将所有子属性设置为该关键字,包括任何仅重置子属性。(请注意,这些关键字不能在单个声明中与其他值组合,即便是简写属性也不行。)
将简写属性声明为 !important 等同于将该简写的所有子属性声明为 !important。
3.1. 属性别名
属性在得到一段时间的支持后有时会更改名称,例如厂商前缀属性被标准化。出于兼容性原因,仍需支持原始名称,但新名称更受青睐。为实现这一点,CSS 定义了两种将旧语法“别名化”为新语法的不同方式。
- 遗留名称别名
- 当旧属性的值语法与新属性的语法完全一致时,这两个名称会通过一种类似于大小写映射的操作进行别名处理:在解析时,旧属性被转换为新属性。这种转换也适用于 CSSOM,无论是对于字符串参数还是属性访问器:对旧属性名称的请求会透明地转发给新属性名称。例如,如果 old-name 是 new-name 的遗留名称别名,
getComputedStyle将返回( el). oldNamenewName属性的计算样式,而el会将 new-name 属性设置为. style. setPropertyValue( "old-name" , "value" ) 。"value" - 遗留简写
- 当旧属性的语法与新属性不同时,这两个名称会使用简写机制进行别名处理。这些简写被定义为遗留简写,且不建议使用。它们的行为与常规简写完全相同,只是在序列化声明时 CSSOM 不会使用它们。[CSSOM]例如,page-break-* 属性是 break-* 属性的遗留简写(参见 CSS Fragmentation 3 § 3.4 分页别名:page-break-before, page-break-after 和 page-break-inside 属性)。
将 page-break-before: always 设置为 break-before: page 会在解析时展开,就像其他简写一样。同样,如果设置了 break-before: page,调用
getComputedStyle将返回( el). pageBreakBefore。然而,在序列化样式块时(参见 CSSOM 1 § 6.7.2 序列化 CSS 值),page-break-before 属性永远不会被选为序列化的简写,无论指定的是它还是 break-before;相反,总是会选择 break-before。"always"
3.2. 重置所有属性:all 属性
| 名称 | all |
|---|---|
| 值 | initial | inherit | unset | revert |
| 初始值 | 见各个属性 |
| 应用于 | 见各个属性 |
| 可继承 | 见各个属性 |
| 百分比 | 见各个属性 |
| 计算值 | 见各个属性 |
| 动画类型 | 见各个属性 |
| 规范顺序 | 按语法 |
all 属性是一个简写,用于重置所有 CSS 属性,除了 direction 和 unicode-bidi。它仅接受CSS 全局关键字。它不会重置自定义属性 [css-variables-1]。
注:例外的 CSS 属性 direction 和 unicode-bidi 实际上是标记级功能,不应在作者的样式表中设置。(它们仅作为 CSS 属性存在,用于样式化 UA 不支持的文档语言。)作者应改用适当的标记,例如 HTML 的 dir 属性。[css-writing-modes-3]
这对于页面中包含的“组件”根元素很有用,该组件不希望继承外部页面的样式。然而请注意,应用于该元素的任何“默认”样式(例如 UA 样式表中块级元素如 <div> 上的 display: block)也会被清除。
4. 值处理
一旦用户代理解析了文档并构建了文档树,它必须为扁平树中的每个元素(以及格式化结构中的每个框)分配一个值,该值对应于目标媒体类型适用的每个属性。
给定元素或盒子的 CSS 属性的最终值是多步计算的结果:
- 首先,为每个元素上的每个属性收集应用于该元素的所有声明值。应用于该元素的声明值可能有零个或多个。
- 层叠产生层叠值。每个元素上的每个属性最多有一个层叠值。
- 默认设定产生指定值。每个元素上的每个属性恰好有一个指定值。
- 解决值依赖关系产生计算值。每个元素上的每个属性恰好有一个计算值。
- 格式化文档产生使用值。仅当给定属性适用于该元素时,该元素才具有该属性的使用值。
- 最后,使用值根据显示环境的约束转换为实际值。与使用值一样,元素上的给定属性可能存在也可能不存在实际值。
未连接或不属于文档扁平元素树的元素不参与 CSS 值处理,也没有声明值、级联值、指定值、计算值、使用值或实际值,即使它们可能被分配了样式声明(例如通过 style 属性)。
4.1. 声明值
每个应用于元素的属性声明都会贡献一个与元素关联的声明值(declared value)。有关详细信息,请参阅过滤声明。
这些值随后由层叠处理,以选择单个“获胜值”。
4.1.1. 值别名
某些属性值具有遗留值别名(legacy value aliases):在解析时,遗留语法被转换为新语法,导致产生的声明值与解析输入的语法不同。这些别名通常用于处理遗留兼容性要求,例如将厂商前缀值转换为其标准等价物。
4.2. 层叠值
级联值(cascaded value)代表级联的结果:它是胜出级联(在级联输出中排序第一)的声明值。如果级联输出为空列表,则没有级联值。
4.3. 指定值
指定值(specified value)是样式表作者为该元素预期的给定属性的值。它是将级联值通过默认化过程得出的结果,保证每个元素上的每个属性都有一个指定值。
在许多情况下,指定值就是级联值。但是,如果根本没有级联值,则指定值为默认值。当CSS 全局关键字作为属性的级联值时会进行特殊处理,根据该关键字设置指定值,详见 § 7.3 显式默认化。
4.4. 计算值
计算值(computed value)是将指定值按照属性定义表中“计算值”一行定义的规则解析后的结果,通常在准备继承时将其绝对化。
注意:计算值是在继承期间从父级传输到子级的值。由于历史原因,它不一定是 getComputedStyle() 函数返回的值,该函数有时返回使用值。[CSSOM] 此外,计算值是一种抽象数据表示:它们的定义反映了数据表示,而非该数据的序列化方式。例如,序列化规则通常允许省略解析时隐含的某些值;但这些值仍然是计算值的一部分。
- 具有相对单位(em, ex, vh, vw)的值必须通过乘以相应的参考尺寸来绝对化;
- 某些关键字(例如 smaller, bolder)必须根据其定义进行替换。
- 某些属性上的百分比必须乘以参考值(由属性定义);
- 有效的相对 URL 必须解析为绝对 URL。
参见下表中的示例 (f)、(g) 和 (h)。
注意:通常情况下,计算值会尽可能解析指定值,而无需对文档进行布局或执行其他昂贵或难以并行化的操作,例如解析网络请求或检索除元素及其父元素以外的值。
即使属性不适用,计算值依然存在。然而,某些属性可能会根据该属性是否适用于元素来改变其确定计算值的方式。
4.5. 使用值
使用值(used value)是将计算值完成任何剩余计算后得出的绝对理论值,用于文档的格式化。
例如,声明 width: auto 在不知道元素祖先布局的情况下无法解析为长度,因此其计算值是 auto,而其使用值是一个绝对长度,例如 100px。[CSS2]
另一个例子是,<div> 的计算 break-before 值可能为 auto,但通过其第一个子元素的传播,获取了 break-before 的使用值 page。[css-break-3]
例如,flex 属性在非弹性项目(flex items)的元素上没有使用值。
4.5.1. 适用属性
如果某个属性不适用于(apply to)特定元素或框类型——正如其“适用于”一行所注明的那样——这意味着它不会直接作用于该类型的框或元素。
注意:一个不适用的属性仍然可能具有间接格式化效果,如果其计算值影响了其他适用的属性计算;当然,其计算值(总是存在)仍然可以继承给后代并对它们产生作用。
p 元素(默认为 display: block)上设置 text-transform 是有效果的,即使 text-transform 仅适用于行内框,因为该属性会继承到段落的匿名根行内框并应用于其中包含的文本。注意:定义为适用于“所有元素”的属性适用于所有元素和显示类型,但不一定适用于所有伪元素类型,因为伪元素通常有其特定的渲染模型或其他限制。然而,::before 和 ::after 伪元素被定义为像普通元素一样生成框,因此被定义为接受所有适用于“所有元素”的属性。有关伪元素的更多信息,请参阅 [CSS-PSEUDO-4]。
4.6. 实际值
使用值原则上已准备好使用,但用户代理可能无法在给定环境中利用该值。例如,用户代理可能只能以整数像素宽度渲染边框,因此必须近似使用宽度。此外,元素的字体大小可能需要根据字体的可用性或 font-size-adjust 属性的值进行调整。实际值(actual value)是在做出任何此类调整之后的使用值。
注:通过探测元素的实际值,可以了解文档是如何布局的。然而,并非所有信息都记录在实际值中。例如,page-break-after 属性的实际值并不反映元素之后是否有分页符。类似地,orphans 的实际值并不反映特定元素中有多少孤行。参见下表中的示例 (j) 和 (k)。
4.7. 示例
| 属性 | 获胜声明 | 层叠值 | 指定值 | 计算值 | 使用值 | 实际值 | |
|---|---|---|---|---|---|---|---|
| (a) | text-align | text-align: left
| left | left | left | left | left |
| (b) | border-top-width, border-right-width, border-bottom-width, border-left-width | border-width: inherit
| inherit | 4.2px | 4.2px | 4.2px | 4px |
| (c) | width | (none) | (none) | auto (初始值) | auto | 120px | 120px |
| (d) | list-style-position | list-style-position: inherit
| inherit | inside (内侧) | inside (内侧) | inside (内侧) | inside (内侧) |
| (e) | list-style-position | list-style-position: initial
| 初始值 | outside (初始值) | outside (外侧) | outside (外侧) | outside (外侧) |
| (f) | font-size | font-size: 1.2em
| 1.2em | 1.2em | 14.1px | 14.1px | 14px |
| (g) | width | width: 80%
| 80% | 80% | 80% | 354.2px | 354px |
| (h) | width | width: auto
| auto | auto | auto | 134px | 134px |
| (i) | height | height: auto
| auto | auto | auto | 176px | 176px |
| (j) | page-break-after | (none) | (none) | auto (初始值) | auto | auto | auto |
| (k) | orphans (孀行) | orphans: 3
| 3 | 3 | 3 | 3 | 3 |
5. 过滤
为了找到声明值,实现必须首先识别应用于每个元素的所有声明。如果以下情况成立,则声明适用于元素:
- 它属于当前适用于本文档的样式表。
- 它未被具有假条件的条件规则 [CSS-CONDITIONAL-3] 限定。
- 它属于一个选择器与该元素匹配的样式规则。[SELECT](如有必要,考虑作用域)。
- 它是语法有效的:声明的属性是已知的属性名称,并且声明的值匹配该属性的语法。
对于每个元素上的每个属性,适用的声明值构成了声明值列表。下一节“级联”将对这些列表进行优先级排序。
6. 层叠
级联(cascade)接收给定元素上给定属性的无序声明值列表,按声明的优先级(由下述规则确定)进行排序,并输出单个级联值。
6.1. 层叠排序顺序
层叠根据以下标准对声明进行排序,优先级由高到低:
- 来源和重要性
- 声明的来源基于其来源,其重要性在于是否用 !important 声明(见下文)。各种来源的优先级,按降序排列:
此列表中排在前面的 来源 的声明优于排在后面的 来源 的声明。
- 上下文
- 文档语言可以支持混合来自不同封装上下文(encapsulation contexts)的声明,例如 [DOM] 中影子树(shadow trees)的嵌套树上下文。
当比较两个来自不同封装上下文的声明时,对于普通(normal)规则,来自外部上下文的声明获胜;对于重要(important)规则,来自内部上下文的声明获胜。为此,[DOM] 树上下文被视为以包含影子的树顺序进行嵌套。
注意:这实际上意味着属于某个封装上下文的普通声明可以设置默认值,这些默认值很容易被外部上下文覆盖,而属于封装上下文的重要声明则可以强制要求,使其无法被外部上下文覆盖。
- 特殊性
- 选择器模块 [SELECT] 描述了如何计算选择器的特指度(specificity)。每个声明具有与其所在样式规则相同的特指度。就此步骤而言,不属于样式规则的声明(例如样式属性的内容)被认为具有比任何选择器都高的特指度。具有最高特指度的声明获胜。
- 出现顺序
- 文档顺序中的最后一个声明胜出。为此
- 来自导入样式表的声明排序,就如同其样式表被替换到 @import 规则的位置一样。
- 由原始文档独立链接的样式表中的声明,被视为按链接顺序串联,具体顺序由宿主文档语言确定。
- 来自 style 属性的声明按照出现该 style 属性的元素的文档顺序排列,并且全部置于所有样式表之后。
级联输出是每个元素上每个属性的一个(可能为空的)声明值排序列表。
6.2. 级联来源
每个样式规则都有一个级联源(cascade origin),它决定了它进入级联的位置。CSS 定义了三个核心源:
- 作者来源
- 作者根据文档语言的约定为源文档指定样式表。例如,在 HTML 中,样式表可以包含在文档中或外部链接。
- 用户来源
- 用户可能能够为特定文档指定样式信息。例如,用户可以指定一个包含样式表的文件,或者用户代理可能提供一个生成用户样式表(或表现得好像它生成了一个)的界面。
- 用户代理来源
- 符合标准的用户代理必须应用一个默认样式表(或表现得好像它应用了一个)。用户代理的默认样式表应该以满足文档语言一般表现预期的方式来呈现文档语言的元素(例如,对于视觉浏览器,HTML 中的 EM 元素使用斜体字体呈现)。参见例如 HTML 用户代理样式表。 [HTML]
CSS 的扩展定义了以下额外的源:
- 动画源 (Animation Origin)
- CSS 动画 [css-animations-1] 在运行时生成表示其效果的“虚拟”规则。
- 过渡来源
- 与 CSS 动画一样,CSS 过渡 [css-transitions-1] 在运行时生成表示其效果的“虚拟”规则。
6.3. 重要声明:!important 注解
CSS 试图在作者和用户的样式表之间创建一种权力平衡。默认情况下,作者样式表中的规则会覆盖用户样式表中的规则,而用户样式表中的规则又会覆盖用户代理默认样式表中的规则。为了平衡这一点,声明可以被标记为重要(important),这会增加其在级联中的权重并颠倒优先顺序。
如果声明具有 [css-syntax-3] 定义的 !important 注解,则该声明为重要,即如果其值中的最后两个(非空白、非注释)标记是分隔符标记 ! 后跟标识符标记 important。所有其他声明均为普通(normal)(非重要)。
重要声明优先于普通声明。作者和用户样式表都可以包含重要声明,其中用户源重要声明会覆盖作者源重要声明。这一 CSS 特性通过让有特殊需求的用户(大字体、特定颜色组合等)控制表现,提高了文档的可访问性。
来自所有源的重要声明优先于动画。这允许作者在重要情况下覆盖动画值。(动画值通常覆盖所有其他规则。)[css-animations-1]
用户代理样式表也可能包含重要声明。这些会覆盖所有作者和用户声明。
/* From the user’s style sheet */ p{ text-indent : 1 em !important} p{ font-style : italic !important} p{ font-size : 18 pt } /* From the author’s style sheet */ p{ text-indent : 1.5 em !important} p{ font : normal12 pt sans-serif !important} p{ font-size : 24 pt }
| 属性 | 胜出的值 |
|---|---|
| text-indent | 1em |
| font-style | italic |
| font-size | 12pt |
| font-family | sans-serif |
6.4. 非 CSS 表现性提示的优先级
UA 可以选择尊重源文档标记中的表现性提示,例如 [HTML] 中的 bgcolor 属性或 s 元素。所有基于文档语言的样式必须转换为相应的 CSS 规则,并作为 UA 源或位于常规用户源与作者源之间的专用作者表现性提示源(author presentational hint origin)进入级联。就级联而言,此作者表现性提示源被视为一个独立的源,但就 revert 关键字而言,它被视为的一部分。
文档语言可以定义此类表现性提示是作为 UA 源还是作者源进入级联;如果是这样,UA 必须相应处理。例如,[SVG11] 将其表现属性映射到中。
注意:作为 UA 源规则进入级联的表现性提示可以被作者源或用户源样式覆盖。作为作者表现性提示源规则进入级联的表现性提示可以被样式覆盖,但不能被非重要的用户源样式覆盖。宿主语言在考虑这些因素时,应为表现性提示选择适当的源。
7. 默认值
当级联未产生值时,必须以其他方式查找指定值。继承属性通过继承从父元素提取默认值;所有其他属性采用其初始值。作者可以通过 inherit 和 initial 关键字显式请求继承或初始化。
7.1. 初始值
每个属性都有一个定义在属性定义表中的初始值。如果该属性不是继承属性,且级联未产生值,则该属性的指定值就是其初始值。
7.2. 继承
继承(Inheritance)将属性值从父元素传播给其子元素。元素上属性的继承值(inherited value)是该元素父元素上该属性的计算值。对于没有父元素的根元素,继承值是该属性的初始值。
对于带有影子的 [DOM] 树,继承操作于扁平元素树之上。这意味着插入的元素从它们分配到的 slot 继承,而不是直接从其浅树(light tree)父级继承。伪元素根据为每个伪元素描述的虚构标签序列进行继承。[CSS-PSEUDO-4]
某些属性是继承属性,如其属性定义表中所定义。这意味着,除非级联产生了一个值,否则其值将由继承决定。
属性也可以显式继承。参见 inherit 关键字。
注意: 继承遵循文档树,不会被 匿名框 拦截,也不会受到框树操作的影响。
7.3. 显式默认值
以下定义了几个 CSS 全局属性值;声明属性具有这些值可以显式指定特定的默认行为。正如 CSS 值与单位 (CSS Values and Units) [css-values-3] 中所指定,所有 CSS 属性都可以接受这些值。
7.3.1. 重置属性:initial 关键字
如果属性的级联值是 initial 关键字,则该属性的指定值就是其初始值。
7.3.2. 显式继承:inherit 关键字
如果属性的级联值是 inherit 关键字,则该属性的指定值和计算值均为继承值。
7.3.3. 清除所有声明:unset 关键字
如果属性的级联值是 unset 关键字,那么如果它是继承属性,则处理为 inherit,如果不是,则处理为 initial。此关键字有效地擦除了级联中较早出现的所有声明值,并根据属性(或简写属性的所有长手属性)的属性适当进行继承或不继承。
7.3.4. 回滚级联源:revert 关键字
如果属性的级联值是 revert 关键字,其行为取决于声明所属的级联源:
- 用户代理原点
- 等同于 unset。
- 用户来源
- 将级联值回滚到用户代理级别,从而使指定值的计算就像该属性在此元素上未指定任何作者源或用户源规则一样。
- 作者来源
- 将级联值回滚到用户级别,从而使指定值的计算就像该属性在此元素上未指定任何作者源规则一样。就 revert 而言,此源包括动画源。
8. 变更记录
8.1. 自 2021 年 10 月 15 日工作草案以来的变更
自 2021 年 10 月 15 日工作草案以来的主要变更:
-
更新了 @import 语法以支持媒体查询和支持条件。
-
允许功能性符号的解析时别名。
-
基于 Fetch 标准定义了如何获取 @import。
-
添加了 § 4.1.1 值别名 一节。(Issue 6193)
8.2. 自 2018 年 8 月 28 日候选推荐标准以来的变更
自 2021 年 3 月 19 日工作草案以来的主要变更包括:
- 定义了作者表现性提示源来处理作者源的表现性提示,而不是依赖零特指度和来源顺序,以正确定义它们与级联封装上下文方面的交互。(Issue 66749)
自 2020 年 8 月 18 日工作草案以来的主要变更包括:
- 移除了遗留名称别名映射值空间子集的能力,因为它们只是简单的名称别名。(Issue 4839)
- 将适用(applies to)的概念独立为一节,并增加了一些关于其影响的说明。(Issue 1861 和 5565)
- 定义了属性(property)一词。(Issue 5633)
-
定义了不属于树的元素的值处理。(Issue 1964 和 1548)
未连接或不属于文档扁平元素树的元素不参与 CSS 值处理,也没有声明值、级联值、指定值、计算值、使用值或实际值,即使它们可能被分配了样式声明(例如通过
style属性)。 - 在 § 2.3 CSS 样式表的 Content-Type 中澄清了针对怪异模式 Content-Type 假设的源比较。(Issue 4838)
自 2018 年 8 月 28 日候选推荐标准以来的主要变更包括:
8.3. 自 2016 年 1 月 14 日候选推荐标准以来的变更
自 2016 年 1 月 14 日工作草案以来的主要变更包括:
- 精确定义了 CSS 使用的别名类型。(Issue 866)参见 § 3.1 属性别名。
-
澄清了 revert 仅影响级联值,不影响继承值。
-
澄清了自定义属性不会被 all 简写属性重置。(2518)
all 属性是一个简写,用于重置所有 CSS 属性,除了 direction 和 unicode-bidi。… 它不会重置自定义属性 [css-variables-1]。
-
更精确地定义了导入的样式表在规则排序等方面独立于导入样式表进行解释。
如果 @import 规则指向一个有效的样式表,用户代理必须将该样式表的内容视为如同直接书写在 @import 规则的位置一样,有两个例外:
- 如果某个功能(例如 @namespace 规则)明确定义为仅适用于特定样式表而不适用于任何导入的样式表,则它不适用于该导入的样式表。
- 如果某个特性依赖于样式表中两个或多个构造的相对顺序(例如 @charset 不得有任何其他内容在其前方的要求),则该要求仅适用于同一样式表内的构造。
-
明确了文本节点被视为其父元素的子元素,并通过默认机制(defaulting)接收样式,因为它们的属性现在可以通过 display: contents [css-display-3] 与其内联父元素区分开并被观察到。
在本规范中,文本节点被视为其关联元素的元素子节点,并拥有完整的属性集;由于它们无法被选择器定位,其所有计算值均通过默认机制(defaulting)进行分配。
- 删除了任何提及过时的“override”来源的内容,该来源最初由 DOM Level 2 Style 定义,后来被废弃。(问题 1385)
可查阅意见处理说明(Disposition of Comments)。
8.4. 自 2015 年 4 月 21 日工作草案以来的变更
自 2015 年 4 月 21 日工作草案以来的变更包括:
- 将 default 关键字重命名为 revert。
- 允许在 supports() 语法仅包含一个声明时,省略重复的括号。
8.5. 自 Level 3 以来的新增内容
自 Level 3 以来添加了以下功能
-
引入了 revert 关键字,用于回滚层叠(cascade)。
-
为支持条件的 @import 规则引入了 supports() 语法。
-
将 封装上下文(encapsulation context) 加入到层叠排序标准中,以适配 Shadow DOM。[DOM]
-
定义了 CSS 为支持旧版语法所使用的两种属性别名机制。参见 § 3.1 属性别名。
8.6. 自 Level 2 以来的新增内容
自 Level 2 以来添加了以下功能
致谢
David Baron, Tantek Çelik, Simon Sapin, Noam Rosenthal 和 Boris Zbarsky 对本规范做出了贡献。
隐私与安全考虑
-
级联过程不区分同源和跨源样式表,这使得跨源样式表的内容可以从它们应用于文档的计算样式中推断出来。
-
通过应用样式规则表示的用户偏好和 UA 默认值通过级联过程暴露,并且可以从它们应用于文档的计算样式中推断出来。
-
@import 规则假定没有
Content-Type元数据(如果宿主文档处于怪异模式,则指任何同源文件)的资源为text/css,这可能允许任意文件被导入到页面中并被解释为 CSS,从而可能导致从它们应用于文档的计算样式中推断出敏感数据。