从9102年的CSS状态报告中看CSS特性的使用

在9102年终于有了一份属于 CSS状态的报告 。对，这是CSS发展20多年以来第一份属于自己的状态报告。大家的印象中可能只有 JavaScript相关的状态报告 ，对于CSS的状态报告并无了解（那是以前没有）。正如报告开篇所说，

在Web开发家族中，JavaScript更似一位愤怒、叛逆的少年，每年都会经历一个新阶段。而CSS却一直以来更似一位勤奋好学，举止得体的少年，他总是保持礼貌，从不草率的做出任何决定。

不过有迹象表明，CSS可能正经历着与JavaScript刚刚经历的同样动荡的青少年时期。Flexbox，Grid，CSS-in-JS在9102年都来了。可以说，CSS终于把头发染成粉红色，并像它一直想要的纹身了。

在这份有史以来第一份关于CSS状态调查中，调查了一万多名开发人员。在这份详尽的报告中我们可以看到哪些CSS特性使用得最多，哪些 工具 正在被采用等等。

这份报告涵盖了不少内容，从我自身的视角去看，其中这三部分内容是值得我们去关注的：

• CSS哪些特性使用的最多
• CSS哪些技术可以帮助我们提效
• CSS单位和选择器

接下来我们将围绕着这三方面内容来展开。感兴趣的同学请继续往下阅读。

CSS哪些特性使用的最多

在过去的几年里，CSS的发展具有极大的灵活性和适应性。虽然它的发展不尽完美，但它仍然能够顺利过渡到许多新设备、上下文、交互模式和可访问性相关的需求。比如说，像有了Grid这样的特性，我们可以不再依赖一些hack手段就可以实现一些复杂的布局；比如说有了CSS的混合模式、遮罩和形状（以及其他特性）让我们可以实现以往任何时候都更丰富和更有创意的设计。

在一万多名开发者的反馈中，我们可以知道使用最多的CSS特性主要分为六大类：

• 布局
• 形状和图形
• 交互
• 排版
• 动画和变换
• 其他特性

具体数据可以点击这里查阅或者直接看下面这张录屏的图：

注意，深蓝色表示使用过的数据，浅蓝色表示知道但未使用过！~~~

布局

布局是CSS近年来最大的变化之一。最早出现的是Flexbox，并且得到众多主流浏览器的支持，让我们在Web的布局中可以更轻易的适配于众多不同的终端，然后出现的就是CSS Grid。CSS Grid可以说是布局的最多元和最有表现力的布局特性。CSS Grid可以让我抛弃DOM结构（文档流的限制），更灵活的实现更丰富和更为灵活的布局。

从数据上来看，目前使用Flexbox特性来布局的人是最多的，除了是因为该特性得到众多浏览器支持之外，还有另一层原因，相比于CSS Grid、Exclusions要更易掌握，而且Flexbox基本上能够满足我们 80% ，甚至是 90% 以上的布局需求。

虽然Flexbox布局可以让Flex容器的子元素向任何方向布局，并且可以自动伸缩，或者自动填充未使用的空间和缩小自己的容器自身空间来满足父容器的空间，但它和以往的布局方式具有一个本质性的相同，是 一维布局 。CSS Grid有所不同的是它是一个二维布局，这也是CSS Grid布局的强大之处。

正因为CSS Grid是一个二维布局系统，所以它能更好的满足我们布局的多样式，从而让布局更为丰富，更具创意。也正为这个原因，掌握CSS Grid特性要比Flexbox更为复杂的多。除此之外，在不久的将来，CSS的 subgrid 会让CSS Grid变得更强大，能帮助我们实现类似表格套表格这样的布局需求（ 其实表格布局是非常强大的 ）。

在布局特性中除了Flexbox，CSS Grid之外，还有多列布局，在实现类似报纸类的布局，该特性是特别灵活的。多列布局可以在布局中灵活的设置列数，以及内容应该如何从一列流向另一列，列与列之间间隔大小以及列分隔线及其外观，还可以让标题如何跨列显示等：

对于有国际业务需求的团队，应该在排版中碰到了不同语言的排版风格的相关需求。比如说英文和阿拉伯语的排版风格：

面对上图这样的排版场景，CSS的书写模式就显得特别的有用了。除了水平方向之外，还可以很好的控制垂直方向，比如中文的横排和竖排：

在一些文本编辑软件中（比如Word软件）实现文本围图像的排版非常容易：

但在Web页面或Web应用中要实现类似这样的排版需求，还是非常的痛苦的。不管是曾经的 float 、 position 布局还是最新的 flexbox 、 grid 等都无法实现类似的布局。但在不久的未来，CSS Exclusions特性可以很好的解决文本围绕图片（当然也可以是其他元素）布局 效果。它看上去类似于CSS Shapes，但又和CSS Shapes有很大的区别，它不需要依赖于 float ，也不管是否设置了 position 的值为 relative 、 absolute 或者 fixed 。允许内容围绕一个内联元素，如下图所示效果：

这份报告中涉及了目前CSS主流的布局特性，时至今日除了CSS Exclusions支持度较低之外，其他的几个特性都得到了众多浏览器的支持。特别是CSS Grid，从规范推出到浏览器实现，相比于其他的CSS的特性而言，时间周期是最短的。

CSS Grid能得到这么快的发展，需要特别感谢 @rachelandrew 和 @jensimmons ，她们可以说是CSS Grid之父。为CSS Grid的发展做出杰出的贡献。

就我个人而言，有关于布局相关的CSS特性还少了CSS Shapes（虽然报告中Shapes划到了形状和图形中）和 Box Alignment和CSS逻辑属性三大方面相关的特性。

CSS Shapes特性中提供的图形函数除了可以帮助我们绘制一些图形（后面会说）之外，还提供了一些布局的实现方案。比如 shape-outside 、 shape-margin 和 float 的结合可以实现一些艺术性的布局效果，比如上杂志封面的布局效果：