跟我学w3c specifications，万字长文告诉你2021年的css都规定了什么

这是前言

这可能是你见过的最全的一篇讲原生css的文章了

并推荐一篇讲原生css以外知识的文章，两个搭配可以包含我们需要的绝大部分css内容。

2020年的css周边：preprocessor、css-in-js等解决方案与methodology

关于css的参考资料，我们能查到的资料里，要么讲奇淫技巧、华而不实，要么讲某几个热门知识点，要么已经过时很多年了，甚至很多同学还把css3作为新技术或者不知道css到底包括什么。

鉴于此，本文的目的是将css完整的呈现给大家，会从css的规范w3c specifications(相当于js的ecma262)说起,讲

css到底是什么
css规范的制定流程
最新浏览器应实现的规范有哪些
最新的规范包括哪些内容

因为相关内容很多，不可能在这两万字中全部讲清楚，建议搭配文中相关链接和规范原文食用。

正文开始

css specs是W3C为用户代理（比如浏览器）厂商等编写的实现规范，直接的目标用户并不是一般前端开发者，因此很多内容对于我们是无意义且难以理解的。
但其包括对css最系统最原始的描述，如果进行进一步解读会对深入理解css有比较大的帮助，也可以获取最新发布的css功能，这就是这篇文章的目的，如果对其感兴趣想对其深入阅读可以参考How to Read W3C Specs。

什么是css

css，即层叠样式表（cascading style sheets）是一个style sheet语言，可以使开发者和用户为结构化文档（比如html或xml）添加样式（比如字体）。通过将文档的样式和文档内容分开可以简化页面开发。

关于css我们最近几年听过最多的就是css3，那么css3是什么呢？css的整个标准化流程是什么呢？下面介绍规范相关的一些背景知识。

Level

css没有传统意义上版本的说法，在这里被称为level,css3即是css level 3。
每个level的css都建立在前一个level之上，改进了定义并添加了特性。高level的特性是低level的超集，因此用户代理（比如浏览器）只要符合高level的也就符合所有低level。

level 1

CSS1 specification 已经过时，其涉及到特性被level 2包含在内。

level 2

旧的 CSS2 specification 是w3c的推荐版本，但是后来发现了很多错误，因此又推出了修订版本1- CSS 2.1 specification,以及修订版本2- CSS 2.2 specification ，它们都对前一个版本中存在的问题做了订正。

level 3及以上

css2使用了9年（2002-2011）才到了Recommendation状态，主要原因是一些次要的特性影响了整个规范的进程推进，为了加快没有问题特性的标准化进程,根据Beijing doctrine的决定，将css分成了更小的组件，即modules，这些modules的每一个都独立的向前发展。

此即人们常说的css3，它是css2以后各模块的统称，官方并没有css3对应的版本，其中基于css2向后发展的模块将会有独立的level，比如Selectors Level 3,之前的规范中没有的新特性则作为新的level 1发布，比如Flexible box layout module level 1。

Finding the latest state of CSS

用户代理开发商都需要知道当前哪些特性应该被实现，哪些不应该被实现，这个问题可参考从2007年开始w3c公布的snapshots，当前最新的snapshots是CSS Snapshot 2018。

值得注意的是，即使某个特性已经称为标准，也不一定被所有用户代理实现，这一点我们作为css的使用者要明白，这也是css出现兼容性问题的原因。

Document statuses

前面介绍的module和snapshot都是document,为了表示这些文档的稳定性，w3c引入了以下状态：

1. Working Draft (WD)

WD在规范起草过程中发布，用来向w3c和公众征求意见，经常是不稳定且不完整的。

2. Candidate Recommendation (CR)

通过发布CR来表示该规范已经完整，并解决了已知的问题，供各厂商实现并接受实践的检验。

3. Proposed Recommendation (PR)

从CR到PR,规范需要一个全面的测试和实现报告以证明每个特性至少在两个发布实现中实现了客户操作性，w3c成员需要进行最后一次review。

4. Recommendation (REC)

这是最后一个阶段，成为标准，这时候不会再改了。但是后面可能会推出勘误或者修订版本，并可能会被新的标准取代。

注意

这些状态的流转并不是线性的，比如即使进了CR,也可能因为遇到问题而退回到WD阶段，因此CSS Snapshot不一定包括所有CR:工作组知道有些CR需要被修订。

本文会涉及到css的哪些规范

本文会参考最新版Snapshot（这也是用户代理厂商在进行实现时参考的版本，更接近我们实际的开发环境），即CSS Snapshot 2018，对当前我们正在使用的css作较全面的解读。顺序大致对应css2.2的章节顺序（其中包括css2.2的内容以及后面对应的单独模块，并且会省略对于前端开发者用处不大的章节），在snapshot 2018中出现但没在css2.2中的模块以在snapshot出现的顺序为准，具体为（标黑的为重点）：

值与单位，包括CSS Values and Units Level 3（取代了CSS2§4.3）。
选择器和各种选择器的specificity，包括Selectors Level 3 （取代了CSS2§5 and CSS2§6.4.3）。
层叠和继承，包括CSS Cascading and Inheritance Level 3（取代了CSS2§1.4.3 and CSS2§6）
媒体类型，包括CSS2§7.1、CSS Conditional Rules Level 3(取代了CSS2§7.2)、Media Queries Level 3(取代了CSS2§7.3)
盒子模型和视觉格式化模型,包括CSS2§8（不包括CSS2§8.5）、CSS2§9、CSS2§10以及CSS Backgrounds and Borders Level 3中取代CSS2§8.5的部分。
视觉效果，包括CSS2§11
生成内容、自动编号和列表，包括CSS2§12
颜色和背景，包括CSS Color Level 3（取代了CSS2§4.3.6, CSS2§14.1, and CSS2§18.2）,CSS Backgrounds and Borders Level 3中取代CSS2§14.2的部分。
字体，包括CSS Fonts Level 3(取代了CSS2§15)。
文本，包括CSS2§16
表格，包括CSS2§17(这里暂不展开)
ui,包括CSS User Interface Module Level 3(取代了CSS2§18.1 and CSS2§18.4，另外CSS2§18.2在颜色与背景一节中讲述)。

以下为css2中没有定义的特性

样式属性，包括CSS Style Attributes
namespace,包括CSS Namespaces
图像和可替换内容，包括CSS Image Values and Replaced Content Level 3
多列布局，包括CSS Multi-column Layout Level 1
组合和混合，包括CSS Compositing and Blending Level 1
书写模式，包括CSS Writing Modes Level 3
弹性盒模型，包括CSS Flexible Box Module Level 1
变量，包括CSS Custom Properties for Cascading Variables Module Level 1
变换，包括CSS Transforms Level 1

以下规范虽然细节没有完成，但已经被浏览器广泛实现

过渡，包括CSS Transitions Level 1
动画，包括 CSS Animations Level 1
网格布局，包括CSS Grid Layout Module Level 1
文本，包括CSS Text Module Level 3
will-change属性，包括CSS Will Change Level 1
过滤效果，包括Filter Effects Module Level 1

另外两个虽然不在以上范围但是有必要提及的，只做概述，不详细展开。

cssom，包括CSSOM View Module
css object,包括CSS Object Model

下面对以上提及的规范和对应知识点一一解读。

值与单位

这里讲作为属性值的单位和函数符号，规范中关于值的部分主要用于读懂规范其他部分，可以参考Understanding The CSS Property Value Syntax，这里不赘述。

单位

长度单位
- 相对长度
  - 相对对应元素字体的长度，如果在元素以外的上下文使用，比如在媒体查询，这些单位就会对应font属性的initial值，作为元素的font-size属性值使用时对应父元素的font-size或initial。
    - em 当前元素font-size属性计算值的倍数
    - ex 当前元素x的高度
    - ch 当前元素数字0的高度或宽度，一般是0的宽度，即0.5em
    - rem 根元素（在html文档中是html元素）font-size属性的计算值
  - 相对视口的长度，视口是指包含文档的一个窗口
    - vw 视口宽度的1%
    - vh 视口高度的1%
    - vmin vw和vh高度较小的一个
    - vmax vw和vh高度较大的一个
- 绝对长度，分为视角单位和物理单位两种，前者用于屏幕媒介，包括px，后者用于打印媒介，包括除px以外的其他绝对长度，这里只介绍一个in,其他请点击。
  - in inches,1in = 2.54cm = 96px
  - px pixels
  px和其他物理单位在css1中的单位换算并不是固定的，物理单位以实际测量为准，而px会不断变化以匹配reference pixel。而现在很多已存在的内容都是基于96pdi的假设，如果修改这种假设会破坏那些内容，因此就将两种单位换算固定下来了。也正是因为这样，在一个实际的设备上，两者的换算并不一定符合这种比例。
  其中reference pixel指的是一个96dpi的设备的1px距离一胳膊的距离时的视角，一个胳膊长度通常71cm，这个视角也就是大约0.0213度。因此当距离为1胳膊时1px为为1/96 inch，其他距离时1px对应其他长度。
  
  另外一个px单位并不一定等于一设备像素，在高分辨率的设备上一px单位可能是由多个设备象速组成的。
角度
1. deg(degrees,度),360度为一圈
2. grad(Gradians,梯度),400梯度为一圈
3. rad(Radians,弧度),2π弧度为一圈
4. turn,1trun为1圈
时间
1. s 秒
2. ms 毫秒
频率
1. Hz 赫兹
2. kHz 千赫兹
分辨率
- dpi,Dots per inch,每英寸的物理像素数
- dpcm,Dots per centimeter
- dppx,Dots per px. 相当于dpr

函数表达式

就是用一个函数返回的值，这里只介绍两种，其他请参考CSS Functional Notation-mdn

calc() 数学表达式，可以对各种带单位的数值进行加减乘除运算，其中+-符号两侧要有空格，*/不要求。比如width: calc(100% - 80px);
attr() 获取元素的属性用于css样式中，目前只支持在content上用,比如

p:before {
    content:attr(data-foo) " ";
}

<p data-foo="hello">world</p>

选择器与specificity

选择器selector是一种在tree中匹配元素的模式，可以用于在文档中选择节点。

简单选择器

类型选择器

E 一个类型为E的元素

通用选择器

* 匹配任何元素

属性选择器

[foo] 一个有foo属性的元素
[foo="bar"] 属性foo等于bar的元素
[foo~="bar"] includes，属性foo的值列表中包括bar
[foo^="bar"] prefixMatch 属性foo包含bar的前缀
[foo$="bar"] suffixMatch 属性foo包含bar的后缀
[foo*="bar"] substring 属性foo包含bar子串
[foo|="en"] dashMatch 属性是en或以en-为前缀

类选择器

.warning class属性是warning的元素

id选择器

#myid id属性是myid的元素

伪类（pseudo-class）是添加到一个选择器上的关键字，用来指定元素的特定状态，由冒号（:）+伪类名组成。

动态伪类
- 用来区分链接是否访问过
  - :link 没被访问过
  - :visited 被访问过
- 表示用户动作
  - :hover
  - :active 一个元素被激活，比如被点击时
  - :focus
target伪类 :target 点击锚点表示的链接时匹配到的元素（锚点匹配对应id）
语言伪类 :lang() 选择lang属性为对应参数的元素
可用性伪类
- :enabled
- :disabled
结构化伪类，其中的序号从1开始
- :root 文档的根元素
- :nth-child(n) 第几n子元素，其中的参数可以是
  - 关键字odd（单数）、even（双数）
  - 表达式An+B，A表示整数步长，B表示偏移，n是自然数，表示第An+B个元素
- :nth-last-child(n) 倒数第n个子元素
- :nth-of-type(n) 第n个对应选择器类型的元素
- :nth-last-of-type(n)
- :first-child 等效于:nth-child(1)
- :last-child 等效于:nth-last-child(1)
- :first-of-type 等效于:nth-of-type(1)
- :last-of-type 等效于 :nth-last-of-type(1)
- :only-child 等效于:first-child:last-child
- :only-of-type 等效于:first-of-type:last-of-type
- :empty 一个元素没有内容
- :not() 参数是另一个选择器，表示非

伪元素（pseudo-element ）也是添加到一个选择器后面，用来指定选择元素的一部分，由两个冒号（::）+伪元素名组成。

::first-line 第一行，用于block-level element.
::first-letter 第一个字母，也是应用于block-level element
::before和::after，用于在元素前后生成内容

组合

E F 后代
E > F 子元素
相邻元素
- E + F 下一个
- E ~ F 之后的所有对应同级元素

计算specificity

一个选择器的优先级按如下计算：

把id选择器记为a
class选择器、属性选择器和伪类选择器记为b
类型选择器和伪元素选择器记为c

将对应的选择器加起来，按照a-b-c的顺序组成一个数，最大的选择器组合优先级最高，比如

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

注意style属性中的样式优先级最高

层叠与继承

Cascading and Inheritance，Cascading是多个样式表同时作用于一个文档的展示。当不同的声明作用于同一元素或组合时，这个冲突需要解决。
相反的，如果一个元素或组合没有设置属性值则需要找继承或者初始值。
cascading和defaulting过程会处理一系列声明输入，为每个元素的每个属性输出一个specified value。
本模块就是描述怎么通过cascading和inheritance处理所有的样式规则，为每个元素的所有属性赋值的。

引入样式表

语法,其中样式表url可以是url()形式，也可以是直接的url字面量，media-query-list指媒体查询

@import [ <url> | <string> ] <media-query-list>? ;

样式表的Content-Type

对引入的样式表的处理取决于链接资源的实际类型，如果这个资源没有Content-Type metadata或者host文档是quick模式并且和引入的样式表是同源，则该资源的类型就是text/css，否则就从Content-Type metadata中读取。
如果资源的类型是text/css，则会被解释为css样式文档，否则会被解释为网络错误。

重置所有属性

可以利用all属性重置除了direction and unicode-bidi以外的非自定义属性，这个属性只接受CSS-wide keywords（即initial, inherit and unset）。
比如在一个元素上设置all:initial,将会阻止所有继承值，使用初始值。

值的处理

一旦用户代理将文档解析成文档树。必须为树中的每个元素每个盒子（盒子的概念参考后文的盒模型）的每个属性赋予一个对应媒体类型的值。一个元素或盒子最后的值要经过以下步骤的计算（其中涉及到的名词在本模块后面部分有介绍）：

首先收集一个元素对应的所有declared values，对应元素上的每个属性都可能有0或多个declared values。
通过Cascading生成 cascaded value，每个元素的每个属性最多有一个 cascaded value。
通过Defaulting生成 specified value，每个元素的每个属性有且仅有一个specified value。
解析值得依赖关系生成 computed value，每个元素得每个属性有且仅有一个 computed value。
格式化文档生成used value，如果一个属性应用到元素才会有一个used value。
最后used value基于展示环境得限制被转化为 actual value，和used value一样，一个元素的给定属性可能有actual value,也可能没有。

1. declared values

每个应用到元素的属性声明都会贡献一个declared values

2. Cascaded Values

Cascaded Values是cascade得结果，在所有的declared values中生成一个优先级最高的值。

3. Specified Values

将Cascaded Values通过defaulting处理，来保证每个元素的每个属性都有一个Specified Values。
大多数情况，Specified Values是Cascaded Values，但是如果根本没有Cascaded Values，Specified Values就是defaulted（见Defaulting）。

4. Computed Values

是解析specified value得结果，通常是绝对化一个值用于继承，比如将em转化为px.

5. Used Values

使用Computed Values做进一步得计算获取绝对值，如果这个属性没有应用到元素上，这个元素就没有used value。
比如在不知道祖先元素布局的情况下无法将width:auto计算出确切长度，因此omputed Values仍然为auto，在这里可以进一步计算。
比如flex属性用在不是flex item得元素上则没有sed Values。

6. Actual Values

一个used value原则上已经可以使用了，但是用户代理在给定环境可能不能用used value，比如边框的宽度只能是整数像素，因此需要做调整。

7. 例如

跟我学w3c specifications，万字长文告诉你2021年的css都规定了什么

Filtering

为了找到所有的declared values，首先需要确定所有应用到每个元素的声明。一个声明应用到一个元素，如果

它属于应用到当前文档的样式表
符合conditional rule
属于选择器匹配到的样式
是一个语法上的有效声明

这个过程对每个元素的每个属性生成一个declared values列表，供cascade排序，可能为空。

Cascading

cascade将一个declared values列表排序，生成一个单一的cascaded value.

按照以下规则排序，优先级降序