1.1　CSS3出现的历史和背景

我在《CSS世界》一书中反复强调过，CSS2.1中的CSS属性的设计初衷是展示图文。因为在CSS2.1时代，互联网刚刚兴起，计算机硬件、网络带宽等基础设施都比较薄弱。例如：

● 屏幕像素低，所以丰富的色彩和细腻的图形细节无法呈现；

● 硬件性能差，所以动画和滤镜渲染效果不佳；

● 网络速度慢，所以高清大图和视频加载不出来。

迫于当时的环境，Web页面只能显示图文内容，而图文内容的显示并不需要特别复杂的布局。所以，严格来说，CSS2.1并没有专门的与布局相关的CSS属性。

后来的事情大家也看到了，Ajax技术的兴起让电子商务和社交网站这样的大型网站系统开始崛起，交互和布局都越来越复杂，但是CSS并没有跟着进步，怎么办呢？没有办法，只能充分挖掘已有CSS的潜力，看看能不能实现复杂的布局。于是，大家会看到很奇怪的现象，如float属性，明明设计这个CSS属性的初衷是实现简单的文字环绕效果，结果最后这个CSS属性居然成了实现网站布局的中流砥柱。

由于CSS发展滞后，已经无法满足产品开发需求，因此扩展CSS2.1的功能势在必行，于是有了后来的CSS3。从这一点可以看出，CSS3及其以后版本的新特性（下面均称为CSS新特性）都是根据当下具体的Web场景来设计的，这里所说的Web场景包括用户的设备情况、用户的产品需求等。

很具有代表性的例子就是环境变量函数env()。这个函数的出现是因为iPhone X等设备顶部的“刘海儿”和底部的触摸横条会和页面内容冲突，所以需要env()函数给网页设置安全距离。要是把时间拨回到几年前，再怎样开动脑筋都预料不到会出现这样一个函数。但是它就是出现了，就因为手机设备的变化和浏览器及时的支持。env()函数的草案在2018年8月才制定，在1年多的时间内，就可以在移动端放心使用它了。

又比如说CSS布局，大家肯定不知道，Multi-column多栏布局的第一版规范居然是在1999年6月制定的，比弹性布局早了整整10年。我们仅从规范制定的时间就可以推断Multi-column多栏布局和CSS中的float属性一样，它们都是为图文排版布局服务的，因为1999年的时候复杂布局还不是强需求，图文内容展示才是主要的用户需求。

我根据应用场景的类型将CSS新特性划分为下面4个方向：

● 更复杂、更具弹性的布局的支持，如弹性布局、网格布局等；

● 更丰富的视觉表现的支持，如圆角、盒阴影、动画和渐变等；

● 更多样的浏览设备的支持，如CSS Media Queries媒体查询等；

● 开发者CSS自定义能力的支持，如CSS Houdini等。

本书的内容也均是围绕这4个方向展开的。

下面再说一说CSS新特性的另外一个特点，那就是语法更加复杂，但是理解更加简单。在CSS2.1的世界中，很多CSS属性虽然语法很简单，但是要理解渲染出来的样式表现，可是要花费大功夫的。除盒模型、块级格式化上下文、包含块等CSS特有的概念增加了学习成本之外，更重要的是下面两个原因。

（1）CSS2.1中CSS属性主要为图文排版服务，而图文排版是有一定难度的，更不用说是在英语框架体系下的排版设计了。这就导致中文开发者无法轻松理解一些样式表现，例如图文元素默认的基线对齐，这个“基线”就是英语中特有的概念。

（2）CSS属性用在了远离设计本意的场景中。例如之前提到的Float布局，很多人都不明白为什么容器元素的高度会塌陷，这是因为CSS的float属性的设计初衷本来就不包括将该属性用在模块布局上。

CSS新特性则不一样，其语法设计非常明确，布局相关的CSS特性就用来布局，视觉表现相关的CSS特性就用来实现视觉效果，背后没有其他看不见的CSS特性互相干涉。只要记住了语法，就不会出现意料之外的渲染场景。

但是，这并不表示学习CSS新特性就很容易，因为简洁明了的语法是牺牲CSS属性的数量换来的，也就是理解成本降低了，但是记忆的成本提高了。例如，网格布局中共有27个完全不同的CSS属性，其中还有网格布局专用的CSS函数和单位，想要学透网格布局是要下苦功的。

最后，总结一下，CSS新特性是跟随时代发展而产生的，旨在构建更加丰富的Web应用程序。CSS新特性分工很细，这带来的好处是让语法理解起来更简单，但是这些CSS特性属性种类更复杂，我们需要记住很多CSS特性，本书会详细介绍的CSS特性就不止100个。