我眼中的 CSS 革命：新特性潜力无限

我从 2000 年初那会开始用 CSS 了。在那之前，我们一直用表格加 GIF 图来设计网页布局，CSS 出现之后我们终于走进了“文明社会”。从此 CSS 成了我最喜欢的编程语言，而回顾它这么多年来的发展，有一件事是肯定的：CSS 不再是当初的样子了。我们在 2003 年编写的 CSS 跟 2013 年总有很大区别，而如今又一个十年过去，我们如今编写的 CSS 比之前更强大、但也更加复杂。

当然，CSS 的进化绝非一蹴而就。就如同 Web 一样，CSS 也是逐步演进，最终成了今天的样子。大家还记得第一次用上 box-shadow、background-size 还有 border-radius 时的兴奋之情吗？对，这就是 CSS 前进路上的一个个脚印。

不知道大家有没有关注今年在阿姆斯特丹举办的 CSS Day 大会，我看了现场直播，而且明显感觉这次跟以往不同。CSS 此番迎来了一系列根本层面的变化，甚至有种到了技术奇点的意思。也就是说，CSS 由此分成了 2020 年代前与 2020 年代后两大阶段。想要选定某个元素的父元素，但浏览器本身又不支持解析 CSS？没关系，现在可以直接用:has()。想根据容器大小调整元素，又担心可能造成无限循环？别担心，现在可以用容器查询和随附的新长度单位。这些功能都对 CSS 乃至整个 Web 平台做出了有益且大家睽违已久的补充。与其他现代功能（例如自定义属性、min（）、max（）、clamp（））以及关键字大小调整（例如 min-content、max-content 和 fit-content）相结合，我们就能打造出前所未有的灵活组件和强大布局。总而言之，我们如今理解和编写 CSS 的基本方式已经发生了根本性转变。

除此之外，标志 CSS 进入新时代的其实是另一个更大、更加根本性的转变：

CSS 现已成为最强大的 Web 设计工具。

多年以来，设计师必须经历一场艰难卓绝的斗争，才能打造出高质量的网站成果、把自己的想法真正在浏览器当中呈现出来。与此同时，诸如“我真的很抱歉，但您的设计无法用 CSS 实现”每天都被前端开发者们无奈地说出。设计师设想中的漂亮构图虽然备受好评，但对于 CSS 这种仍在发展的语言来说显得太过先进。谁能理解并克服 CSS 中的种种局限甚至说“怪癖”，谁才有望开发出杀手级的出色网站。

于是乎，设计师们吸取一教训，开始创建兼容性更强的布局，比如几乎全部使用 12 列平均网格。这明显就是开发平台本身的不足所导致。

但如今，情况已经大为不同。

想在 Figma、Adobe XD 或者 Sketch 等主流设计工具中模拟并设计出一个能充分发挥 CSS 网格潜力的布局？做不到。想通过取色器等工具在 OKLCH 等广色域色彩空间中定义某种颜色，从而在现代屏幕上呈现出更加鲜艳自然的色彩？不可能。想要模拟流体排版，根据窗口或容器大小动态缩放字体，并像在 CSS 中使用 clamp() 那样定义最小值和最大值？不可能。或者说定义一种备用字体，在默认网络字体无法加载时立刻顶上？还是不可能。是的，目前市面上任何一种设计工具都已经跟不上 CSS 的发展。在这个新时代，CSS 上只需几行就能轻松实现的功能，反而在设计端找不到对应的选项。设计工具成了前端开发中的新瓶颈。

在去年的一场演讲中，我曾提到应该解决设计工具和 CSS 间差距越拉越大的问题。从自身出发，我们能做的也只有密切协作、推出更多原型设计，让更多人能在网页设计和开发的交叉点上工作。但这一切并不容易，而且都需要时间。有些团队已经展开了探索，并以新的、协同度更高的方式荼。但对大多数人而言，打破旧习惯显然不是易事。

总体而言，我希望看到人们对于 CSS 在设计过程中的认知和作用得到扭转，将瀑布式流程末尾的样式演示工具变成早期设计决策中的核心工具。如此一来，熟悉使用 CSS 进行原型设计和 Web 组件构建的设计师将更具价值。作为设计工程领域的自由职业者，我对这一点充满信心。

在 CSS Day 的演讲上，曾有人问现在的设计师到底要不要学 CSS。而专家 Heyton 给出的答案是：CSS 已经成为一种设计工具、一种达成目的的手段，一种可供探索和使用的素材。更重要的是，它成为一种可供思考和决策的工具，开始步入设计舞台的最中央。

“我是按设计工具来学习 CSS 的，这就是我对设计的理想。设计代表着一种思维过程……它非常抽象，反映的是我们尝试成就某事的路径。在路径当中，我们需要借助各种各样的工具。这种工具可能是 Figma，可能是 Photoshop，也可能是 CSS。”

这就是新 CSS，有史以来最强大的 Web 设计工具。只有用好 CSS，我们才能发挥平台上的现代功能；只有将 CSS 引入设计，我们才能建立起能灵活适应不同环境、不同内容类型的设计方案；也只有使用新 CSS，我们才能真正打造出优雅高效、简洁有力的真 Web 成果。正如 Heyton 所言：“我不知道到底该不该用 CSS，但它肯定值得一用。”

原文链接：

https://matthiasott.com/notes/the-new-css?utm_source=CSS-Weekly&utm_campaign=Issue-554&utm_medium=web

相关阅读：

一文吃透 CSS 样式中颜色与颜色值的应用 (https://xie.infoq.cn/article/ff08f11ef5199eac739bcd96d )

CSS 样式中颜色与颜色值的应用 (https://xie.infoq.cn/article/b43f7080697e3b13f8f1de01a)

CSS 选择器的一场革命，:has() 高级使用指南 (https://www.infoq.cn/article/9cUfR6WbcwTyXJzsFxMY )

css 过去及未来展望—分析 css 演进及排版布局的考量 (https://xie.infoq.cn/article/329a83f021eebaf46f1ffccf2 )

声明：本文为 InfoQ 翻译，未经许可禁止转载。

点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！