CSS 快照 2023

1. 介绍

当第一个CSS规范发布时， 所有的CSS都包含在定义CSS第一级的一个文档中。 CSS第2级也是由一个多章节的文档定义的。 然而，对于超越第2级的CSS， CSS工作组选择采用模块化的方法， 每个模块定义CSS的一部分， 而不是定义一个单一的整体规范。 这将规范分解为更易管理的部分， 并允许对CSS进行更快速的增量改进。

由于不同的CSS模块具有不同的稳定性级别， CSS工作组选择发布这个概要文件， 以定义截至2023年层叠样式表的当前范围和状态。

1.1. 什么是CSS？

层叠样式表（CSS）

CSS 是一种用于编写样式表的语言， 旨在描述结构化文档（如HTML和XML） 在各种媒体上的呈现。 CSS 用于描述源文档的表现， 通常不会更改其文档语言所表达的底层语义。

样式表

一组指定文档表现的规则。 样式表由作者编写， 由用户代理解释， 以将文档呈现给用户。

源文档

一个或多个样式表应用的文档。 源文档的结构和语义使用文档语言（例如HTML、XHTML或SVG）进行编码。

作者

作者是编写文档和相关样式表的人。 创作工具是生成样式表的用户代理。

用户

用户是与用户代理交互以查看、收听或以其他方式使用文档的人。

用户代理（UA）

用户代理是代表用户 解释文档及其相关样式表 的任何程序。 用户代理可以显示文档、朗读文档、 打印文档、将其转换为另一种格式等。 对于CSS规范的目的， 用户代理是指支持并解释这些规范中定义的层叠样式表的用户代理。

1.2. 背景：W3C流程与CSS

本节为非规范性内容。

在W3C流程中， 一个推荐轨道的文档会经过三个稳定性阶段，概述如下：

工作草案（WD）

这是W3C规范的设计阶段。 工作组根据内部和外部的反馈迭代规范。

第一个正式的工作草案被称为“首个公开工作草案”（FPWD）。 在CSS工作组中，发布FPWD表示整个工作组已同意按照编辑草案中大致范围和建议的方式对该模块进行工作。

向下一阶段的过渡有时被称为“最后征求意见工作草案”（LCWD）阶段。 CSS工作组在解决了所有已知问题后，会将工作草案转为这一阶段， 并且在没有通过构建测试和实现反馈而无法进一步改进时，才会进入该阶段。

“最后征求意见”的目的是为报告任何未解决的问题设定一个截止日期， 并要求工作组特别跟踪和处理收到的反馈。 评论跟踪文档是《意见处理报告》（DoC）。 它与更新后的草案一起提交给主管批准，以展示广泛的审查和接受度。

候选推荐标准（CR）

这是W3C规范的测试阶段。 值得注意的是，这个阶段主要是通过测试和实现来测试规范： 不是为了测试实现本身。 这个过程中通常会揭示更多的规范问题， 因此候选推荐标准会随着时间的推移而根据实现和测试反馈进行调整， 虽然通常比设计阶段（WD）期间的调整要少。

为了退出CR阶段，需要证明每个特性有两个正确的、独立的实现， 因此在此阶段，工作组会构建测试套件并生成实现报告。

过渡到下一个阶段是“提案推荐标准”（PR）。 在此阶段，W3C顾问委员会必须批准向REC过渡。

推荐标准（REC）

这是W3C规范的完成状态，代表了维护阶段。 此时，工作组仅维护勘误表， 并偶尔发布包含勘误信息的更新版规范。

编辑草案实际上是编辑者自己工作副本的实时副本。 它可能反映，也可能不反映工作组的共识， 有时可能处于自我不一致的状态。 （由于W3C的发布过程耗时且繁琐， 编辑草案通常是规范的最佳（最新）参考。 目前正在努力减少发布的摩擦， 以便官方草案能够定期更新， 而编辑草案可以回归其原始功能作为草稿空间。）

2. CSS规范的分类

所有稳定和正在进行中的CSS模块及其状态的列表 可以在CSS当前工作页面找到。

2.1. 层叠样式表（CSS）——官方定义

此概要文件仅包含我们认为稳定的规范以及我们拥有足够实现经验确保其稳定性的规范。

注意： 这并不是一个CSS桌面浏览器配置文件： 包含在此概要文件中的内容仅基于特性稳定性 而非预期使用或Web浏览器的采用。 此概要文件定义了CSS的最完整形式。

截至2023年，层叠样式表 (CSS)由以下规范定义。

CSS第2级，最新修订版（包括勘误表）[CSS2]

这定义了CSS的核心，其中部分内容被后来的规范覆盖。 我们特别建议阅读第2章， 其中介绍了CSS的一些基本概念 及其设计原则。

CSS语法第3级 [CSS-SYNTAX-3]

替代了CSS2§4.1、CSS2§4.2、CSS2§4.4和CSS2§G， 重新定义了CSS的解析方式。

CSS样式属性 [CSS-STYLE-ATTR]

定义了如何在标记属性中嵌入CSS声明。

媒体查询第3级 [CSS3-MEDIAQUERIES]

替代了CSS2§7.3，并扩展了媒体特定样式的语法。

CSS条件规则第3级 [CSS-CONDITIONAL-3]

扩展并取代了CSS2§7.2， 更新了@media规则的定义，允许嵌套 并引入@supports规则以进行特性支持查询。

选择器第3级 [SELECTORS-3]

替代了CSS2§5和CSS2§6.4.3，定义了扩展的选择器范围。

CSS命名空间 [CSS3-NAMESPACE]

引入了@namespace规则，以允许使用命名空间前缀的选择器。

CSS层叠和继承第4级 [CSS-CASCADE-4]

扩展并取代了CSS2§1.4.3和CSS2§6，以及[CSS-CASCADE-3]。 描述了如何整理样式规则并为所有元素上的所有属性分配值。 通过层叠和继承，值会在所有元素上的所有属性中传播。

CSS值与单位第3级 [CSS-VALUES-3]

扩展并取代了CSS2§1.4.2.1、CSS2§4.3和CSS2§A.2.1–3， 定义了CSS的属性定义语法 并扩展了其单位集。

CSS自定义属性用于层叠变量模块第1级 [CSS-VARIABLES-1]

引入了层叠变量作为一种新型基本值类型，可被所有CSS属性接受， 并引入了定义它们的自定义属性。

CSS框模型第3级 [CSS-BOX-3]

替代了CSS2§8.1、§8.2、§8.3（但不包括§8.3.1）和§8.4。

CSS颜色第4级 [CSS-COLOR-4]

扩展并取代了CSS2§4.3.6、CSS2§14.1和CSS2§18.2， 还扩展并取代了[CSS-COLOR-3]， 引入了超越sRGB的扩展颜色空间， 扩展颜色值， 以及用于颜色的CSS对象模型扩展。 还定义了透明度 属性。

CSS背景和边框第3级 [CSS-BACKGROUNDS-3]

扩展并取代了CSS2§8.5和CSS2§14.2， 提供了对背景和边框的更多控制， 包括分层背景图像、 图像边框、 和阴影。

CSS图像第3级 [CSS-IMAGES-3]

重新定义并合并了外部二维图像值类型， 引入了原生二维渐变， 并增加了对替换元素大小和渲染的额外控制。

CSS字体第3级 [CSS-FONTS-3]

扩展并取代了CSS2§15 并提供了对字体选择和功能选择的更多控制。

CSS书写模式第3级 [CSS-WRITING-MODES-3]

定义了CSS对各种国际书写模式的支持， 如从左到右（例如拉丁或印度文）， 从右到左（例如希伯来文或阿拉伯文）， 双向（例如混合的拉丁文和阿拉伯文）和垂直（例如亚洲书写系统）。 替代并扩展了CSS2§8.6和§9.10。

CSS多列布局第1级 [CSS-MULTICOL-1]

将多列流引入CSS布局。

CSS弹性盒模型第1级 [CSS-FLEXBOX-1]

为CSS引入了一种灵活的线性布局模型。

CSS用户界面模块第3级 [CSS-UI-3]

扩展并取代了CSS2§18.1和CSS2§18.4， 定义了光标、轮廓， 以及几个增强用户界面的新CSS特性。

CSS封装模块第1级 [CSS-CONTAIN-1]

引入了封装 属性， 它通过强制对元素子树的独立CSS处理， 使用户代理在使用得当时能够进行大规模优化。

CSS变换第1级 [CSS-TRANSFORMS-1]

将基于坐标的图形变换引入CSS。

CSS合成与混合第1级 [COMPOSITING]

定义了叠加内容的合成与混合 并引入了控制其模式的特性。

CSS缓动函数第1级 [CSS-EASING-1]。

描述了作者定义变换的一种方式， 该变换控制某些值的变化速度。 应用于动画时， 这种变换可用于生成模仿物理现象如动量的动画， 或使动画以离散步骤移动，产生类似机器人移动的效果。

CSS计数器样式第3级 [CSS-COUNTER-STYLES-3]

引入了@counter-style规则， 允许作者定义自己的自定义计数器样式， 以用于CSS列表标记和生成内容计数器[CSS-LISTS-3]。 它还预定义了一组常见的计数器样式， 包括CSS2和CSS2.1中存在的样式。

注意： 虽然我们不预期对形成此快照的规范进行重大更改， 但它们的包含并不意味着它们是冻结的。 工作组将继续解决在这些规范中发现的问题。 实现者应关注www-style和/或 CSS工作组博客的任何相关变更、修正或澄清。

2.2. 相对稳定的模块，但实现经验有限

以下模块的设计工作已经完成，并且相对稳定，但尚未经过大量测试和实现经验。我们希望在未来的CSS 官方定义中将其纳入。

Media Queries Level 4 [MEDIAQUERIES-4]

扩展并取代了[CSS3-MEDIAQUERIES]，扩展了语法，弃用大多数媒体类型，并引入了新的媒体特性。

CSS Display Module Level 3 [CSS-DISPLAY-3]

取代了CSS2§9.1.2, §9.2.1 (但不包括§9.2.1.1), §9.2.2 (但不包括§9.2.2.1), §9.2.3, 和§9.2.4 (并为取代§9.7奠定了基础)， 定义了如何从文档元素树生成CSS格式化框树，并定义了控制它的display属性。

CSS Writing Modes Level 4 [CSS-WRITING-MODES-4]

扩展并取代了[CSS-WRITING-MODES-3]，增加了更多垂直书写的选项。

CSS Fragmentation Module Level 3 [CSS-BREAK-3]

描述了将流划分为页面、列或区域的分片模型，并定义了控制它的属性。扩展并取代了CSS2§13.3。

CSS Box Alignment Module Level 3 [CSS-ALIGN-3]

引入了在各种CSS盒布局模型中控制盒子在其容器内对齐的属性：块布局、表布局、弹性布局和网格布局。

CSS Shapes Module Level 1 [CSS-SHAPES-1]

扩展了浮动（CSS2§9.5），以实现非矩形的包裹形状。

CSS Text Module Level 3 [CSS-TEXT-3]

扩展并取代了CSS2§16，除了§16.2，定义了文本操作的属性，并指定了其处理模型。涵盖了换行、对齐、空白处理和文本转换。

CSS Text Decoration Level 3 [CSS-TEXT-DECOR-3]

扩展并取代了CSS2§16.3，提供了对文本装饰线的更多控制，并增加了指定文本强调标记和文本阴影的能力。

CSS Masking Level 1 [CSS-MASKING-1]

取代了CSS2§11.1.2，并引入了更强大的裁剪和遮罩内容的方法。

CSS Scroll Snap Module Level 1 [CSS-SCROLL-SNAP-1]

包含用于控制滚动行为的“捕捉位置”功能。

CSS Speech Module Level 1 [CSS-SPEECH-1]

取代了CSS2§A，全面修订了（非规范性）语音渲染章节。

CSS Scrollbars Styling Module Level 1 [CSS-SCROLLBARS-1]

定义了影响滚动条视觉样式的属性，增加了控制其颜色和宽度的功能。

CSS View Transitions Module Level 1 [CSS-VIEW-TRANSITIONS-1]

定义了视图过渡API，以及相关属性和伪元素，允许开发者创建表示文档状态变化的动画视觉过渡效果。

2.3. 具有粗糙互操作性的模块

尽管以下模块已广泛部署，并具有粗糙的互操作性，但其细节尚未完全确定或规范充分， 需要更多的测试和错误修复。我们希望在未来的CSS 官方定义中将其纳入。

CSS Transitions Level 1 [CSS-TRANSITIONS-1] 和 CSS Animations Level 1 [CSS-ANIMATIONS-1]。

引入了随时间变化CSS 属性计算值的机制。

CSS Grid Layout Module Level 1 [CSS-GRID-1]

引入了一个基于二维网格的布局系统，专为用户界面设计优化。在网格布局模型中，网格容器的子元素可以放置到预定义的灵活或固定大小的布局网格中的任意槽位。

CSS Grid Layout Module Level 2 [CSS-GRID-2]

扩展并取代了[CSS-GRID-1]，引入了用于管理嵌套标记的共享网格框架的“子网格”。

CSS Will Change Level 1 [CSS-WILL-CHANGE-1]

引入了一个名为will-change的性能提示属性。

Filter Effects Module Level 1 [FILTER-EFFECTS-1]

引入了过滤效果，作为在元素显示在文档中之前处理其渲染的一种方式。

CSS Font Loading Module Level 3 [CSS-FONT-LOADING-3]

引入了用于动态加载字体资源的事件和接口。

CSS Box Sizing Level 3 [CSS-SIZING-3]

覆盖并扩展了CSS§10，扩展了尺寸属性的值集合，引入了更精确的尺寸术语，并更精确和详细地定义了在CSS2中仅模糊定义的各种自动尺寸概念。

CSS Transforms Level 2 [CSS-TRANSFORMS-2]

基于[CSS-TRANSFORMS-1]增加了新的变换函数和属性，用于三维变换，并引入了用于简单变换的便捷函数。

CSS Lists and Counters Module Level 3 [CSS-LISTS-3]

包含与列表计数器相关的CSS功能：样式化它们、定位它们并操控它们的值。

CSS Logical Properties and Values Level 1 [CSS-LOGICAL-1]

引入了逻辑属性和值，赋予作者通过逻辑方向和尺寸映射控制布局的能力。同时还定义了在[CSS2]中定义的特性 的逻辑属性和值。这些属性是与相应物理属性对应的书写模式相对属性。

CSS Positioned Layout Module Level 3 [CSS-POSITION-3]

定义了CSS的基于坐标的定位和偏移方案：相对定位，粘性定位，绝对定位， 和固定定位。

Resize Observer [RESIZE-OBSERVER-1]

本规范描述了用于观察元素主框大小变化的API。

Web Animations [WEB-ANIMATIONS-1]

定义了用于同步和定时Web页面呈现变化的模型，并定义了与此模型交互的应用编程接口。

CSS Fonts Module Level 4 [CSS-FONTS-4]

扩展并取代了CSS Fonts 3，并提供了对字体选择和功能选择的更多控制，包括对OpenType变体的支持。

CSS Color Adjustment Module Level 1 [CSS-COLOR-ADJUST-1]

本模块引入了模型和控件，用于通过用户代理处理用户偏好和设备输出优化的自动颜色调整。

CSS Conditional Rules Module Level 4 [CSS-CONDITIONAL-4]

扩展了CSS Conditional 3，以允许测试支持的选择器。

CSS Cascading and Inheritance Level 5 [CSS-CASCADE-5]

扩展了CSS Cascade 4，以增加级联层。

2.4. CSS 等级

层叠样式表没有传统意义上的版本；相反，它有等级。每个 CSS 等级都建立在前一版本的基础上，改进定义并添加新功能。每个较高级别的功能集是任何较低级别的超集，而在较高级别中允许的功能行为是较低级别允许的行为的子集。因此，符合较高级别 CSS 的用户代理也符合所有较低级别。

CSS Level 1

CSS 工作组认为CSS1 规范已经过时。CSS Level 1定义为CSS1规范中定义的所有功能（属性、值、规则等），但使用CSS2.1 规范中的语法和定义。CSS 样式属性定义了它在元素特定样式属性中的包含。

CSS Level 2

尽管CSS2 规范在技术上是 W3C 推荐标准，但它在 W3C 定义候选推荐标准阶段之前就已经进入了推荐阶段。随着时间的推移，实施经验和进一步的审查揭示了 CSS2 规范中的许多问题，因此 CSS 工作组选择定义CSS Level 2 Revision 1（CSS2.1），而不是扩大已经非常庞杂的勘误表。在两个规范之间的任何冲突情况下，CSS2.1 包含了最终定义。

一旦 CSS2.1 成为候选推荐标准——实际上尽管并非正式达到与 CSS2 相同的稳定性级别——它就废除了 CSS2 推荐标准。CSS2 中被 CSS2.1 删除的功能应被视为处于候选推荐标准阶段，但请注意，这些功能中的许多已经或将被纳入 CSS Level 3 工作草案，一旦该规范达到候选推荐标准阶段，就会废除 CSS2 中的定义。

CSS2.1 规范定义了CSS Level 2，CSS 样式属性规范定义了它在元素特定样式属性中的包含。

CSS Level 3

CSS Level 3模块逐个构建在CSS Level 2的基础上，使用CSS2.1规范作为核心。每个模块添加功能和/或替换CSS2.1规范的一部分。CSS 工作组的意图是，新CSS模块不会与CSS2.1规范相矛盾：它们只会增加功能并改进定义。随着每个模块的完成，它将被插入CSS2.1加上先前完成的模块的现有系统中。

从这个级别开始，模块是独立分级的：例如，选择器第4级可能会在CSS Line模块第3级之前完成。没有CSS Level 2对应物的模块从第1级开始；更新CSS Level 2中存在的功能的模块从第3级开始。

CSS Level 4及后续等级

没有CSS Level 4。独立模块可以达到第4级或更高，但CSS语言不再有等级。（“CSS Level 3”这个术语仅用于与之前的整体版本区分。）

2.5. CSS 配置文件

并非所有实现都会实现CSS中定义的所有功能。

过去，工作组发布了一些配置文件，旨在定义各种用户代理应支持的CSS的最小子集。

这项工作已经停止，因为工作组发现它既无效也无用，之前定义的配置文件现在不再维护。

注意： 即使是部分实现了 CSS，如果该子集是官方配置文件，也必须遵循部分实现的前向兼容解析规则。

3. CSS 负责任实施的要求

以下章节定义了负责实施CSS以促进当前和未来互操作性的若干一致性要求。

3.1. 部分实现

为了使作者能够利用向前兼容的解析规则分配回退值，CSS 渲染器必须将任何其不支持的@规则、属性、属性值、关键字和其他语法结构视为无效（并根据需要忽略）。 特别是，用户代理不得在单个多值属性声明中有选择地忽略不支持的属性值并支持已支持的值：如果任何值被视为无效（因为不支持的值必须被视为无效），CSS 要求整个声明被忽略。

3.2. 不稳定和专有功能的实现

为了避免与未来稳定的CSS功能发生冲突，CSS工作组建议以下关于实施不稳定功能和CSS的专有扩展的最佳实践：

3.2.1. 实验和不稳定功能

实现描述在W3C规范中的不稳定功能，但这些功能并不具备互操作性， 不应广泛发布以供一般使用；但可以在受控环境中发布以供有限的实验使用。

在W3C流程中，CSS功能在其规范达到候选推荐（CR）阶段之前，均被视为不稳定。在特殊情况下，CSS工作组还可以通过正式记录的决议，将CR前功能添加到可安全广泛使用的功能集中。参见§ 4 可安全发布的CR前例外情况。

注意：厂商应明确咨询工作组，不要在这一点上做出假设，因为通常尚未变化的CR前规范往往更过时而非稳定。

3.2.2. 专有和非标准化功能

为避免与未来的CSS功能发生冲突，CSS2.1规范为CSS的专有和实验性扩展保留了一个前缀语法 [CSS2]。 当一个CSS功能在仅对单个厂商的用户代理可访问的封闭环境中使用时，该功能即为专有扩展。 UA应仅通过厂商前缀语法支持此类专有扩展，并且不应将其暴露在如万维网这样的开放（多UA）环境中。

即使某个功能最终旨在用于Web，如果它尚未标准化，也不应暴露于Web。

3.2.3. 市场压力与事实标准

如果某个功能是不稳定的（即规范尚未稳定），但

• 至少有三个用户代理实现了该功能 （或者 一个用户代理已经违反其他规则，并在生产版本中为广泛使用而发布了一个不稳定或其他非标准功能），

• 并且这些实现具有粗糙的互操作性，

• 并且 CSS 工作组已记录一致认为该功能应该存在并发布，

实现者可以在广泛发布的版本中无前缀地发布该功能。粗糙的互操作性由主观判断来满足，即使可能存在差异，这些实现仍足够相似，可以在生产网站中用于大量用例。

请注意，仍然必须咨询CSS工作组以确保跨供应商的协调，并确保各供应商的CSS专家进行一致性审查。 另请注意，粗糙的互操作性通常仍意味着在边缘（或不那么边缘）情况下缺乏互操作性，特别是因为细节尚未通过标准审查过程进行修正。

3.2.3.1. 供应商前缀的不稳定功能

当在生产版本中将此类标准轨迹的不稳定功能暴露给Web时，实现应同时支持供应商前缀和无前缀语法。 一旦该功能稳定下来并且实现已更新以匹配互操作行为，则应删除对供应商前缀语法的支持。

任何向作者推广不稳定功能的人都应使用其标准无前缀语法进行文档化，并避免鼓励将供应商前缀语法用于除解决实现差异以外的任何目的。

3.2.3.2. 保持CSS的开放性

为了保持CSS作为一项技术的开放性，供应商应使其他实现者能够自由实现他们发布的任何功能。 为此，他们应提供规范编辑和测试资源以完成此类功能的标准化，并避免给竞争对手发布该功能设置其他障碍（例如平台依赖、许可限制）。

3.3. CR级功能的实现

一旦规范达到候选推荐阶段，实现者应发布任何他们可以证明已根据规范正确实现的CR级功能的无前缀实现，并应避免暴露该功能的带前缀变体。

为了建立和维护CSS在不同实现之间的互操作性，CSS工作组要求非实验性的CSS渲染器在发布任何CSS功能的无前缀实现之前，向W3C提交实现报告（如果需要，还需提交用于该实现报告的测试用例）。提交给W3C的测试用例将由CSS工作组进行审查和修正。

关于提交测试用例和实现报告的更多信息，可以在CSS工作组的网站上找到：https://www.w3.org/Style/CSS/Test/。 有关问题应发送到public-css-testsuite@w3.org邮件列表。

4. 安全发布的CR前例外情况

以下功能已被CSS工作组明确且积极地批准在规范达到候选推荐之前广泛发布。 参见§ 3.2.1 实验和不稳定功能。

• 与尺寸属性（width、height等）、边框属性、边距和填充属性的流相对等效项。参见解释和规范。
• 尺寸属性的min-content和max-content关键字。参见决策和规范。
• conic-gradient()渐变符号。参见决策。
• aspect-ratio属性。[CSS-SIZING-4]
• translate、rotate和scale属性。[CSS-TRANSFORMS-2]
• hyphenate-character属性。[CSS-TEXT-4]
• color-mix()函数。[CSS-COLOR-5]
• <color-interpolation-method>，定义于[CSS-COLOR-4]并用于线性、径向和圆锥渐变的插值。[CSS-IMAGES-4]
• 定义于relative color语法，定义于[CSS-COLOR-5]

以下功能已被CSS工作组明确且追溯性地批准在规范达到候选推荐之前广泛发布：

• CSS Animations Level 1和CSS Transitions Level 1中的所有内容。
• :dir()、:lang()和:focus-within伪类，出自[SELECTORS-4]。

5. 索引

这些章节是非规范性的。

5.1. 术语索引

5.2. 选择器索引

5.3. At-Rule 索引

5.4. 属性索引

5.5. 值索引

6. 致谢

特别感谢Florian Rivoal创建了§ 3.2.1 实验和不稳定功能建议的初稿。