• CSS对页面布局带来的深远影响
  • 发布于 2个月前
  • 199 热度
    0 评论
变化
我从 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,但它肯定值得一用。”
用户评论