写点什么

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

作者 | CSS社区

  • 2023-07-24
    北京
  • 本文字数:1981 字

    阅读完需:约 6 分钟

我眼中的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 样式中颜色与颜色值的应用

CSS 样式中颜色与颜色值的应用

CSS 选择器的一场革命,:has() 高级使用指南

css 过去及未来展望—分析 css 演进及排版布局的考量

2023-07-24 11:152753

评论

发布
暂无评论
发现更多内容

gRPC 简介实践

yuexin_tech

gRPC

超级群、群组、聊天室,IM 产品的场景化「特异功能」

融云 RongCloud

即时通讯 IM

论CTO的作用

hongfei

项目管理 个人提升 工程管理

量子时代已来,与时代接轨,从这本书开始!

博文视点Broadview

好书推荐 ——《噪声:人类判断的缺陷》

天择

好书推荐 认知偏差 噪声 3月月更

商品库存管理和秒杀系统设计(19/100)

hackstoic

技术方案 互联网应用技术方案

Java最最基础入门知识总结回顾

逆锋起笔

Java java面试 javase 3月月更

天翼云SD-WAN斩获首批“SD-WAN 2.0 SASE”权威认证

天翼云开发者社区

SD-WAN

诚邀参与 | OpenHarmony校园极客秀征文活动

OpenHarmony开发者

极客 OpenHarmony 征文活动

使用 Docker 一键启动环境安装 ModStart

ModStart开源

上手测试GaussDB(for Redis) 和开源 Redis,只为推荐质优价廉的Redis

华为云开发者联盟

数据库 redis 开源 GaussDB(for Redis) 开源Redis

使用AppleScript批量删除Mac中的信息

CRMEB

Discuz! ML远程代码执行(CVE-2019-13956)

喀拉峻

网络安全

Python 学习路线(2022)

AlwaysBeta

Python django 编程语言 学习路线 编程入门

Committer 蔡正昕专访:勇敢迈出第一步,做开源没有那么难

Apache Pulsar

架构 云原生 中间件 Apache Pulsar 开源社区

模块九

撿破爛ぃ

架构训练营

Python从ECS内网拉取OSS数据

梦想橡皮擦

3月月更

华云数据加入龙蜥社区,推动开源产业快速有序成长

OpenAnolis小助手

云计算 Linux 开源 操作系统 国产

工作以后流的泪,就是当初校招时脑子进的水

IC男奋斗史

职业规划 芯片行业思考

AI提取图片里包含的文字信息-解决文字无法复制的痛点

DS小龙哥

3月月更

浅析人脸识别算法及其应用

得物技术

机器学习 算法 人脸识别 视觉 人脸

Apsara Stack 技术百科|云+应用一体化混合云全景智能化监控平台

科技互联网 企业数字化转型 混合云技术 混合云架构

基于区块链技术的超级账本(Hyperledger) - 从理论到实战

汪子熙

区块链 智能合约 云平台 Go 语言 2月月更

融云通信周边能力上新啦!一键 Get 美颜、CDN 服务

融云 RongCloud

CDN 人脸识别

猿桌派第 2 季回归,报名赢现场录制机会!

融云 RongCloud

程序员

我要跳槽了!

IC男奋斗史

职业规划 芯片行业思考

面试突击29:说一下线程池7个参数的含义?

王磊

Java 面试 java面试

模块 9 作业(毕业设计)

miliving

设计模式:今天你设计了吗?

SFLYQ

设计模式 服务器端开发 后端技术

搭建 Restful Web 服务

码语者

REST API

15张图呈现数据库事务背后的并发原理

华为云开发者联盟

数据库 事务 并发 隔离

我眼中的CSS革命:新特性潜力无限_编程语言_InfoQ精选文章