写点什么

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

评论

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

XLD音频无损解码器:X Lossless Decoder中文激活版

真大的脸盆

Mac Mac 软件 音频解码 音频处理工具 音频管理

Python Dev Day@北京站,我们来啦!

PyChina

国际版语音房聊天APP,视频语音平台开发搭建经验及后台项目简要说明

山东布谷科技胡月

语音聊天系统 语音直播app开发 国际版语音直播APP 国际版语音系统源码 语音聊天房系统搭建

软件测试/测试开发丨iOS自动化真机测试验证环境过程中常见问题

测试人

软件测试 自动化测试 测试开发 ios测试

软件测试/测试开发丨iOS自动化测试之基于模拟器的自动化测试

测试人

ios 软件测试 自动化测试 测试开发

双非渣硕,开发一年,苦刷算法三个月,四面字节成功斩获offer

Java 数据结构 面试 算法

2023年好用的谷歌浏览器插件推荐(Chrome必备扩展程序) 安装教程

互联网搬砖工作者

小程序营销模板的发展现状及前景分析

没有用户名丶

小程序

用 JavaScript 写出一个彩票系统?

泰罗凹凸曼

JavaScript 前端

Spring为什么需要三个级别的缓存来解决循环依赖

Java spring 面试 循环依赖 三级缓存

2023年实用性好的堡垒机推荐

行云管家

网络安全 堡垒机

融合低代码与GPT,微软的又一个神奇颠覆

ToB行业头条

自动化回归测试平台 AREX 0.2.7 版本正式发布!

AREX 中文社区

开源 自动化测试 接口测试 回归测试

Pushing to Git returning Error Code 403

刿刀

AI 未来已至,向量数据库站在新的节点上

Zilliz

英伟达 非结构化数据 Milvus 向量数据库

软件测试/测试开发丨app自动化测试之Appium 源码分析

测试人

软件测试 自动化测试 测试开发 appium

一文详解Java中的ThreadLocal

Java 多线程 线程池 ThreadLocal

在 Kubernetes 中部署应用交付服务(第 1 部分)

NGINX开源社区

火山引擎VeDI零售行业解决方案 聚焦精准营销场景提升品牌转化

字节跳动数据平台

大数据 云服务 数据平台 企业号 3 月 PK 榜

ONES 入选北大光华 MBA 整合实践项目,推动校企合作

万事ONES

bitget合约一键跟单社区交易平台开发功能以及模式分析

开发微hkkf5566

太厉害了!GitHub上标星80K的微服务实战笔记,看完跪了

Java 微服务 Spring Cloud Spring Cloud Aliababa

扫一扫,原来这么简单

HarmonyOS SDK

HMS Core

文档智能分析产业实践,基于PP-StructureV2和OpenVINO实现训练部署开发全流程

飞桨PaddlePaddle

宝塔SSH ROOT账号无法登录

源字节1号

开源 软件开发 小程序开发

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