+8613426109659
webmaster@21cto.com

CSS 通过新的 if() 函数实现了内联条件逻辑

前端 0 18 1天前
图片

导读:强大的内联条件逻辑首次应用于CSS样式表。以下是它的工作原理以及对开发者的意义。

各位伙伴们好消息,级联式条件处理即将出现在 CSS 中。

那些感觉受到Web通用样式表声明性质束缚的人即将享受到更多的自由来混合用它!

很多年来,开发人员和设计师们一直Stack Overflow等技术社区询问CSS 是否支持条件逻辑,但最终发现只有变通的方案。现在,样式标准背后的技术委员会批准了样式表的一项新功能:if(),这为前端或设计师们开辟了一个全新的选择世界!

科技金融公司富达投资 (Fidelity Investments) 首席用户体验设计师马克·阿德金斯 (Mark Adkins) 在本周早些时候于北卡罗来纳州罗利举行的AllThingsOpen 2025会议上谈到CSS的一些最新发展时表示说:

“据我所知,这是第一次可以内联执行此逻辑,而无需在文件底部设置专门的代码块。”

图片

CSS 由万维网联盟(W3C)管理,是指定网页呈现、样式和布局的标准化方式,与 HTML 一起用于页面布局,与JavaScript 一起用于页面逻辑

CSS 是一项相对成熟的技术,因此更新频率不如以往。W3C 每年都会发布一次快照,汇总该规范各个部分的最新进展(2025 版已于上个月发布)。之后,这些规范的实施将由浏览器制造商负责

CSS的 if()函数是什么?


2025 快照中推出的新功能对于 CSS 来说是前所未有的。

虽然 CSS 的大部分内容涉及阴影、颜色和其他各种呈现细节,但该规范在逻辑处理方面并没有提供太多内容。

Adkins 表示, If()是基于之前的工作构建的,允许开发者指定变量,或者说“自定义属性”。这些属性定义在浏览器的文档对象模型 ( DOM ) 中,之后可以通过 JavaScript 进行修改。

新功能将逻辑属性扩展到内联代码本身。

在编程世界中,if()函数本身并不是什么新鲜事物——大多数命令式编程语言都有该函数的版本。if ()函数基于 JavaScript 的if ... else函数,并为程序员提供了一种根据条件测试结果设置属性不同值的方法。例如,如果a则为x,如果b则为y,等等。

如果没有任何条件满足,还提供了else语句。

对于 CSS,test可以基于样式查询、媒体查询或功能查询。

CSS 中的 if() 函数是如何工作的

根据规范,语句由有序的分号分隔的语句列表组成,每个语句指定一个条件和一个值,并用冒号分隔。

该函数的语法,如 Mozilla 开发Web文档所示:

<if-condition>An <if-test> or the else keyword.<if-test>A style query, media query, or feature query.elseA keyword representing an <if-condition> that always evaluates to true.<value>A property value.Return value

MDN 还提供了如何使用if()的示例:下面你会发现,根据所选的主题(“冰”或“火”),可以在网页上部署两个背景图像之一:

div {  background-imageif(    style(--scheme: ice): linear-gradient(#caf0f8, white, #caf0f8);    style(--scheme: fire): linear-gradient(#ffc971, white, #ffc971);    else: none;  );}

该函数可以内置于类(Class)的任何属性中,也可以作为选择器的一部分。

当前浏览器的采用和支持


目前,if()函数仅部分受浏览器支持。如下图所示:

测试结果

截至 2025 年 10 月,浏览器对 CSS if() 函数的支持情况。

Chrome 和 Edge 浏览器支持该功能,Safari 和 Firefox 浏览器则落后不少。移动端开发则更为落后,目前只有 Android 版 Chrome 浏览器和 Android 浏览器支持该声明。

测试结果

截至 2025 年 10 月,移动浏览器对 CSS if() 函数的支持。

CSS 条件语句的新可能性

Google Web UI DevRel Lead Una Kravets一篇博客中描述了新条件的使用方式,其中写道:“ if()的添加为 CSS 开发人员提供了新的架构机会。”

Kravets 建议前端开发者们,该功能可用于创建内联媒体查询。

例如,网站可以根据用户对亮色或暗色模式的偏好来更改设计。它还可以用于执行内联支持查询,检查硬件是否支持设计,如果不支持,则切换到其他设计。

它还可以方便地可视化正在运行的进程状态,用不同的图像指示任务是否已经完成~

作者:行动的大雄

评论

我要赞赏作者

请扫描二维码,使用微信支付哦。