如何 0 成本启动全员 AI 技能提升?戳> 了解详情
写点什么

我眼中的 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:153011

评论

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

智能体的奇幻漂流之“成都折叠”篇

脑极体

Greenplum 性能优化之路 --(一)分区表

腾讯云大数据

大数据

架构师训练营第三周作业

文智

极客大学架构师训练营

c++杂谈4

菜鸟小sailor 🐕

数字货币视域下的金融安全实现路径

CECBC

区块链 数字货币

致谢!华为全联接2020精彩回顾

华为云开发者联盟

华为 华为云 智能 hdc

LeetCode题解:641. 设计循环双端队列,使用双向链表,JavaScript,详细注释

Lee Chen

大前端 LeetCode

原创 | 使用JPA实现DDD持久化-O/R阻抗失配(2/2)

编程道与术

Java hibernate DDD JDBC jpa

区块链带来的技术创新和变革

CECBC

区块链技术 经济

为什么90%的“码农”做不了软件“架构师”?

Java架构师迁哥

Java 学习 架构师

原创 | 使用JPA实现DDD持久化-JPA vs MyBatis

编程道与术

Java hibernate 编程 mybatis jpa

腾讯云副总裁刘煜宏:大数据平台算力弹性资源池达500万核,国内最强

腾讯云大数据

大数据

腾讯云大数据发布最新产品矩阵,助力企业整合打通海量数据

腾讯云大数据

大数据

架构师训练营第三周学习总结

邓昀垚

极客大学架构师训练营

华为云推出全自研数据库,GaussDB(openGauss)能否撑起一片天?

华为云开发者联盟

数据库 数据 gauss db

jdk 源码系列之StringBuilder、StringBuffer

sinsy

Java jdk 源码解析

架构师第一期作业(第三周)

Cheer

作业

线段树(Segment Tree)

zayfen

算法 线段树 segment tree

原创 | 正确区分属性和字段

编程道与术

Java hibernate 编程 软件开发 jpa

原创 | 使用JPA实现DDD持久化-JPA,Hibernate与Spring Data JPA

编程道与术

Java hibernate Spring C Data jpa

手把手教你:将 ClickHouse 集群迁至云上

腾讯云大数据

大数据 Clickhouse

持续引领大数据行业发展,腾讯云发布全链路数据开发平台WeData

腾讯云大数据

大数据

打造一个全功能的浏览器

Daniel

你在开发过程中使用Git Rebase还是Git Merge?

华为云开发者联盟

git 华为 管理 代码

第二周-学习总结-框架设计原则

莫森

极客大学架构师训练营

原创视频 | 架构漫谈—如何创造复杂而有序的软件系统【含课件下载】

编程道与术

Java 编程 架构 软件开发 软件架构

第二周-命题作业

莫森

极客大学架构师训练营

揭开500亿“区块链”骗局

CECBC

法律 传销

用go语言实现快排

Sean

算法 快速排序 Go 语言

一次注定失败的裸面

escray

ruby 程序员 面试 面经

为什么推广ipv6以及网站ipv6改造基本步骤

MySQL从删库到跑路

Web IP 网络

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