Agentic AI、具身智能、强化学习框架、端侧大模型……来QCon上海站,感受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:152996

评论

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

百TB级TiDB集群在线更换NVME磁盘优化实践

TiDB 社区干货传送门

性能调优 管理与运维 应用适配 6.x 实践 大数据场景实践

Kubernetes:Flomesh 服务网格与多集群通信

Flomesh

服务网格 K8s 多集群管理

版本更新 | Towify V1.23.1 有哪些实用新功能?汇总来了!

Towify

微信小程序 无代码平台

guitar pro2023下载官方版app

茶色酒

Guitar Pro guitar pro2023

骨灰级精品,京东百万架构师亲码的MySQL内部笔记太硬核了

小小怪下士

Java MySQL 程序员

自研分布式高性能RPC框架及服务注册中心ApiRegistry

车江毅

Java Eureka 注册中心 服务治理 服务中心

如何删除数据并刷新列表

Towify

微信小程序 无代码 触发器

银斯微与大敦科技签署MOU,推动UI开发工具在中国的落地应用

科技热闻

openGemini v0.2.0版本正式发布:5大特性全面增强

华为云开发者联盟

数据库 后端 华为云 12 月 PK 榜

Lightning checksum failed 报错实践案例

TiDB 社区干货传送门

NineData:强大的ClickHouse图形客户端工具

NineData

数据库 云计算 开发者 Clickhouse 数据管理

Kerberos 身份验证在 ChunJun 中的落地实践

袋鼠云数栈

数据集成 kerberos 大数据 开源

介绍四大并发集合类并结合单例模式下的队列来说明线程安全和非安全的场景及补充性能调优问题。

C++后台开发

多线程 并发 后端开发 异步 linux开发

聚焦技术,锐意创新,GaussDB给世界一个更优选择

华为云开发者联盟

数据库 后端 华为云 12 月 PK 榜

哪篇论文宣布了 HTAP 数据库的诞生?解读《A Common Database Approach for OLTP and OLAP Using an In-Memory Column DataBase》

StoneDB

MySQL HTAP 数据库· StoneDB 12 月 PK 榜

TiDB Operator数据导入

TiDB 社区干货传送门

迁移 集群管理 管理与运维 备份 & 恢复

玩转OpenHarmony PID:教你打造两轮平衡车

OpenHarmony开发者

OpenHarmony

手把手系列:如何将小程序游戏引入自有APP?(iOS篇)

FinClip

如何制作一个实时在线显示评论?

Towify

微信小程序 无代码

直播 | 数据智能大咖在线研讨,带你找到适合自己的企业级方法论!

StarRocks

数据库 物流

什么是制造业数字化转型?制造业数字化转型的核心与意义

优秀

数字化转型 制造业

TiCDC 源码解读(1)-- TiCDC 的架构概览

TiDB 社区干货传送门

公司刚来的京东架构师:看完我写的spring笔记,甩给了我一份文档

钟奕礼

Java 程序员 Java 面试 java编程

spring高级源码笔记:深入理解阿里spring源码核心思想及框架应用

钟奕礼

Java 程序员 java面试 java编程

FinClip 手把手教学:如何将小程序游戏引入自有APP?(Android篇)

FinClip

系统的混乱并非业务本身之复杂,我们并不擅长处理『简单』

阿里技术

软件工程 复杂度

cdr2023断网离线激活下载教程

茶色酒

cdr2023

有一说一!项目中引进这玩意,排查日志又快又准

程序员小毕

程序员 面试 微服务 后端 框架

20000节点云数仓在大型商业银行的“实践之路”

酷克数据HashData

金融科技 云数据仓库 数据库·

数据库原理及MySQL应用 | 多表查询

TiAmo

MySQL 数据库 12月月更

马斯克都不懂的 GraphQL,API 网关又能对其如何理解?

API7.ai 技术团队

api 网关 graphql APISIX

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