我是三钻，一个在《技术银河》中等你们一起来终生漂泊学习。 点赞是力量，关注是认可，评论是关爱！下期再见 👋

前言

进入重学 CSS 的第一步，首先需要找到一些线索。我们在前面的课程中讲学习方法的部分也讲过，要想建立知识体系骨架，我们需要一个完备性更权威，更全的线索。但是 CSS 现在标准的状态非常复杂，所以我们没有办法找到一份像 JavaScript 或者 HTML 中比较完备的现形标准，能把 CSS 的一切都浓缩在内。

不过这种情况也是我们平时学习知识的一种常态，知识并不是有人给我们总结好一本书，或者能有一个地方包含了所有的知识。一般来说知识都会分布在各种不同的文档当中。

根据 Winter 老师比较喜欢学习一个线索，凡是对于编程语言，都会先从它的语法去了解它。

所以 CSS 也不例外，它也有自己的一套语法体系。但是 CSS 标准是分散开的，我们想找到它完整的语法非常的不容易的。所以我们这里先从 CSS 2.1 语法标准开始。

CSS 2.1 语法标准

CSS 2.1 确实是一个比较老的版本了，但是它有一个好处，在 2.1 的版本的时候建立了一个 Snapshot，也就是说没有其他版本去替代它。所以 CSS 2.1 的 Grammar Summary 部分是当时一个比较完整的一份语法列表。

当然现在我们已经大量的引入了 CSS3 了，所以这里面会有一些语法差异和不全。但是总体来讲是一个不错的起点，让我们可以先开始认识 CSS 的语法基础。

这里的语法是使用 “产生式” 来表达的。但是这里会有一些 CSS 中特别的表达方式和标准：

• [ ] —— 方括号代表组的概念
• ? —— 问号代表可以存在和不存在
• | —— 单竖线代表 “或” 的意思
• * —— 星号代表 0 个或 多个

CSS 总体结构

• @charset
• @import
• rules —— 多个规则，这里面的规则没有顺序要求

+ @media

+ @page

+ rule —— 这里基本上就是我们平时写的 CSS 样式规则部分

我们平时写都是在写普通的 CSS 规则，charset 我们基本都不会用，一般我们都会用 UTF-8。

这里讲到的是 CSS 2.1 的 CSS 结构，在 CSS3 中我们有更多的 @ 规则 和 CSS 规则，我们首先要在 CSS3 中找到这两块的所有内容，然后补充道这个总体结构中，那么我们就可以形成 CSS 的总体结构。这时候我们对 CSS 的语法认识就有完备性了。

CSS @ 规则研究

@charset: https://www.w3.org/TR/css-syntax-3/

• 在 CSS syntax 3 中在 CSS 2.1 中做了一个重新的定义
• 但是相对 CSS 2.1 基本没有什么变化

@import: https://www.w3.org/TR/css-cascade-4/

• 然后 import 就在 css cascade 4 的规范里面
• 因为 CSS 的全称就是 Cascade Style Sheet（级联表）
• 所以 import 属于级联规则之一

@media: https://www.w3.org/TR/css3-conditional/

• Media 不是在我们的 media query 标准里
• 它在 CSS3 的 conditional 标准里
• 但是在 media 的 conditional 标准中又去引用了 media query，规定了 media 后面的一部分的查询规则
• 所以我们常常去讲 media query 是一个新特性，其实它并不是，它是类似一个预置好的函数的一个规范
• 真正把 Media 特性真正引入到 CSS3 当中，是通过 CSS3 中的 conditional 标准
• 那么 Conditional，就是 “有条件的”，顾名思义就是用来控制一些规则在有效条件下才会生效

@page: https://www.w3.org/TR/css-page-3/

• page 是有一份单独的 CSS3 标准来表述它
• 就是 css page 3 它主要是给我们需要打印的页面所使用的
• 理论上这个叫做分页媒体，其实主要的分页媒体就是打印机
• 我们的页面是不会有分页的

@counter-style: https://www.w3.org/TR/css-counter-styles-3/

• 我们平时写列表的时候会有一个 counter
• 也就是列表最前面的那个 “小黑点” 或者是 “小数字”

@keyframes: https://www.w3.org/TR/css-animations-1/

• keyframes 是用于我们的动画效果定义的

@fontface: https://www.w3.org/TR/css-fonts-3/

• fontface 就是我们使用 web font 功能时候用到的
• 它可以用来定义一切字体
• 由此延伸出一个技巧叫 Icon font

@supports: https://www.w3.org/TR/css3-conditional/

• 这个同样是来自于 conditional 的标准
• 它是用来检查某些 CSS 的功能是否存在的
• supports 是一个比较尴尬的存在，自己就是隶属于 CSS3，所以它本身是有兼容性问题的导致没办法用
• 所以现在基本上不推荐使用 support 来检查 CSS 兼容性
• 因为我们检查的那个属性，比我们 support 这个规则兼容性要更好，所以根本检查不了
• 估计可能 4～5年后，CSS 新出来的新特性我们再用 support 来检查会更好一点

@namespace: https://www.w3.org/TR/css-namespaces-3/

• 现在 HTML 里面除了 HTML 命名空间，还引入了 SVG、MathML 等这样的其他的命名空间的标记和标签
• 所以 CSS 里面有了对应的设施，其实主要是 一个完备性的考量，并不是一个特别重要的规则

这里不是完整的列表，还有 3 个规则，因为 它们本身状态太年轻在讨论状态，要不就是已经没有浏览器支持了，或者是已经被废弃了。分别有 document、color-profile、font-feature。 然后最常用的有三种：@media、@keyframes、@fontface

CSS 规则结构

这里我们选中了 HTML 所有的 DIV 并且给予它们一个 blue 的背景颜色。

div {  background-color: blue;}

通过以上代码示例，我们看到一段 CSS 代码是有分为 选择器 和 声明 两部分的。在我们《实战中理解浏览器原理》的文章中，我们编写我们的 CSS parsor 的时候，就是把 CSS parse 成 selector 部分和 declaration 部分。我们这里也会按照这个方法来理解 CSS 规则。

• 选择器 —— selector (div)
• 声明 —— declaration

+ Key —— 键 (background-color)

+ Value —— 值 (blue)

CSS 规则标准

Selector 选择器

• Level 3 —— https://www.w3.org/TR/selectors-3/

+ Selectors_group —— 选择器组：用逗号分隔

+ Selector —— 选择器：需要用 combinator (组合器) 把多个简单选择器拼在一起的

+ Combinator —— 组合器：+、>、~、空格

+ Simpleselectorsequence —— 简单选择器：类型选择器、* 一定会在最前面，然后可以是 ID、class、attr、pseudo等选择器

• Level 4 —— https://www.w3.org/TR/selectors-4/

+ Level 4 和 Level 3 是非常的相似的，但是它的选择器更复杂

+ 增加了很多的伪类选择器、“或” 和 “与” 的关系

+ 而且它的 NOT 也更强大

+ Level 4 的话我们看一看拓展思路就可以了，因为从 2018年12月 开始也没有再更新了

+ 所以目测是遇到问题了，处于比较难推动的阶段，所以投入使用还有很漫长的路要走

Key

• Properties｜性质
• Variables｜CSS 变量—— https://www.w3.org/TR/css-variables/

+ 可以声明一个双减号开头的变量：--main-color: #06c

+ 然后我们可以在子元素中使用这些 CSS 变量了 color: var(--main-color)

+ 可以跟其他的函数进行嵌套：--accent-background: linear-gradient(to top, var(--main-color), white);

+ 使用 var() 函数的时候是可以给默认值的，传入第二个参数就是默认值：var(--main-color, black)

+ CSS 变量处理可以用作 value，还可以用作 key：先声明了--side: margin-top 然后就可以这样使用 var(--side): 20px

Value

• Level 4 —— https://www.w3.org/TR/css-values-4/

+ 它也是 working draft (工作草稿) 状态，但是实现状态非常的好

+ 而且这个版本一直有保持更新，最后一次更新是 2019年1月份

+ 数字类型有：整型、百分比、浮点型还有带维度 (Dimensions)

+ 长度单位有：相对单位 (em, ex, cap, ch ... )、视口单位 (vw, vh, vi, vb, vmin, vmax)、绝对单位 (cm, mm, Q, in, pt, pc px)

+ 其他单位：弧度单位 (deg, grad, rad, turn)、时间单位 (s, ms)、频率单位 (Hz, kHz)、分辨率单位 (dpi, dpcm, dppx)

+ 数据类型：颜色 <color>、图片 <image>、2D 位置 <position> 等类型

+ 函数：计算 cal()、最小值 min()、最大值 max() 、范围剪切 clamp()、切换value toogle()、属性引用 attr()

使用爬虫收集整套 CSS 标准

通过上面讲到的几个部分，我们已经了解了整个 CSS 的架构。但是我们发现整个的 CSS 标准是散落在几份标准当中的，为了我们更好的阅读标准，我们想拿到一份比较完整的标准列表是需要我们做一些工作的。很多时候我们都是需要在零散的标准里面，去搜集一些共性的内容。

接下来我们来做一个小实验，通过类似爬虫的方法，在 W3C 网站上抓取标准的内容。然后我们对他进行一些处理，方便我们后续的一些工作。

首先我们打开 W3C 的标准和草稿的列表页：https://www.w3.org/TR/

这里我们可以看到所有的 W3C 的标准和草稿，但是这里我们只需要 CSS 部分的。如果我们检查元素中查看，我们可以看到其实所有的数据都已经挂载在 DOM 上了，只是前端做了筛选分页而已。

所以我们就可以用一段代码，直接复制到浏览器的 console 中运行就可以筛选出所有 CSS 相关的文章列表了。

// 获取 CSS 相关的标准列表JSON.stringify(  Array.prototype.slice    .call(document.querySelector('#container').children)    .filter(e => e.getAttribute('data-tag').match(/css/)) // 找到有 CSS tag 的    .map(e => ({ name: e.children[1].innerText, url: e.children[1].children[0].href })) // 只获取标题名字和链接);

最终输入的内容如下：

然后我们点击下方的 "Copy" 即可复制，把这个 JSON 内容保存在一个 JavaScript 文件里面，并且赋予一个变量叫 standards。在我们后面的爬虫代码中需要用到。

这里我们用一个简单的方法来获取爬取信息，就是在 W3C 原本的页面上开启一个 iframe，这样我们就可以忽略掉跨域的问题。

let standards = [...] // 这里面的内容就是我们刚刚从 W3C 网页中爬取到的内容                 let iframe = document.createElement('iframe');document.body.innerHtml = '';document.body.appendChild(iframe);function happen(element, event) {  return new Promise(function (resolve) {    let handler = () => {      resolve();      element.removeEventListener(event, handler);    };    element.addEventListener(event, handler);  });}void (async function () {  for (let standard of standards) {    iframe.src = standard.url; // 让 Iframe 跳转到每个 standards 中的详情页面    console.log(standard.name);     await happen(iframe, 'load'); // 等待 iframe 中的页面打开完毕  }})();

然后我们需要的信息就是属性表格中的内容：

如果我们看一下这个 table 的 HTML 代码，我们会发现这个 table 都是有一个 class 名叫 propdef 的。我们就可以用这个特性来获取这个表格中的内容了。

所以我们就可以在 await happen(iframe, 'load')，后面添加一行代码来答应这个表格的 DOM 元素来看一下：

let iframe = document.createElement('iframe');document.body.innerHTML = '';document.body.appendChild(iframe);function happen(element, event) {  return new Promise(function (resolve) {    let handler = () => {      resolve();      element.removeEventListener(event, handler);    };    element.addEventListener(event, handler);  });}void (async function () {  for (let standard of standards) {    iframe.src = standard.url;    console.log(standard.name);    await happen(iframe, 'load');    console.log(iframe.contentDocument.querySelectorAll('.propdef')); // 这里答应出表格的内容  }})();