QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

评论

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

从0开始的支付业务架构演进之路

誰敢得罪我

I'm Back

小天同学

思考 个人感悟 4月日更

聪明人的训练(一)

Changing Lin

4月日更

酷家乐 x StarRocks:家居SaaS独角兽如何实现数据分析全面升级,大幅降低平台成本

StarRocks

大数据 数据分析 presto 营销数字化 StarRocks

今天是个开心的日子

return

根据码龄来爬取CSDN博客粉丝

空城机

Python 爬虫 python 爬虫 4月日更 粉丝数据

Spark查询优化之谓词下推

小舰

4月日更

百度智能云发布云智一体的AI开发全栈模式

百度大脑

百度智能云

Python基础之:Python中的类

程序那些事

Python Python3 程序那些事

2021年Android工作或更难找,原理+实战+视频+源码

欢喜学安卓

android 程序员 面试 移动开发

StarRocks致工程师们的一封信

StarRocks

大数据 程序员 数据分析 工程师 StarRocks

飞桨与龙芯完成兼容性认证

百度大脑

飞桨

一文学完所有的Hive Sql(两万字最全详解)

五分钟学大数据

大数据 hive 4月日更

【leetcode题目】2. 两数相加

程序员架构进阶

LeetCode 28天写作 算法解析 4月日更

ElasticSearch读写模型&数据复制模型

yhh

elasticsearch 数据复制模型

Python OpenCV 之图像乘除与像素的逻辑运算,图像处理取经之旅第 17 天

梦想橡皮擦

Python OpenCV 4月日更

【LeetCode】直方图的水量Java题解

Albert

算法 LeetCode 4月日更

五种不同类型的领导模式

石云升

领导力 28天写作 职场经验 管理经验 4月日更

Hi Array!~~~你所经常遇见的TA!

Chalk

JavaScript 大前端 数组 array 4月日更

Rust:范型使用trait限定的一点总结

Microwood

rust Trait 范型 范型约束Output Add

可能是最糟糕的愚人节玩笑:科技史上的美式疯狂

脑极体

模块1作业

Geek_2e7dd7

架构实战营

Laravel 服务容器实例教程--深入理解控制反转(IoC)和依赖注入(DI)

一个大红包

4月日更

后端开发必须要懂的Redis,Redis的数据结构

Linux服务器开发

redis 分布式 后端 web服务器 Linux服务器开发

Redis为什么变慢了?一文讲透如何排查Redis性能问题 | 万字长文

Java redis 程序员 架构 计算机

智能取色-为多元化的产品场景选择完美的色彩组合

百度贴吧技术团队

智能取色 个性化 视觉策略 沉浸感

2021年金三银四全新版互联网大厂面试题,分类80份PDF,累计4700页

Java 编程 程序员 架构 面试

Python OpenCV 之图像的叠加,图像处理取经之旅第 16 天

梦想橡皮擦

Python OpenCV 4月日更

Flink中的无界数据流与有界数据流

大数据技术指南

flink 4月日更

uni-app对接金山文档在线预览服务

薛定喵君

CMS前世今生

叫练

CMS JVM 垃圾收集

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