导读:强大的内联条件逻辑首次应用于CSS样式表。以下是它的工作原理以及对开发者的意义。
各位伙伴们好消息,级联式条件处理即将出现在 CSS 中。
那些感觉受到Web通用样式表声明性质束缚的人即将享受到更多的自由来混合用它!
很多年来,开发人员和设计师们一直在Stack Overflow等技术社区询问CSS 是否支持条件逻辑,但最终发现只有变通的方案。现在,样式标准背后的技术委员会批准了样式表的一项新功能:if(),这为前端或设计师们开辟了一个全新的选择世界!
科技金融公司富达投资 (Fidelity Investments) 首席用户体验设计师马克·阿德金斯 (Mark Adkins) 在本周早些时候于北卡罗来纳州罗利举行的AllThingsOpen 2025会议上谈到CSS的一些最新发展时表示说:
“据我所知,这是第一次可以内联执行此逻辑,而无需在文件底部设置专门的代码块。”
CSS 由万维网联盟(W3C)管理,是指定网页呈现、样式和布局的标准化方式,与 HTML 一起用于页面布局,与JavaScript 一起用于页面逻辑。
CSS 是一项相对成熟的技术,因此更新频率不如以往。W3C 每年都会发布一次快照,汇总该规范各个部分的最新进展(2025 版已于上个月发布)。之后,这些规范的实施将由浏览器制造商负责。
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.
else
A keyword representing an <if-condition> that always evaluates to true.
<value>
A property value.
Return value
MDN 还提供了如何使用if()的示例:下面你会发现,根据所选的主题(“冰”或“火”),可以在网页上部署两个背景图像之一:
div {
background-image: if(
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() 函数的支持。
Google Web UI DevRel Lead Una Kravets在一篇博客中描述了新条件的使用方式,其中写道:“ if()的添加为 CSS 开发人员提供了新的架构机会。”
Kravets 建议前端开发者们,该功能可用于创建内联媒体查询。
例如,网站可以根据用户对亮色或暗色模式的偏好来更改设计。它还可以用于执行内联支持查询,检查硬件是否支持设计,如果不支持,则切换到其他设计。
它还可以方便地可视化正在运行的进程状态,用不同的图像指示任务是否已经完成~
作者:行动的大雄
本篇文章为 @ 场长 创作并授权 21CTO 发布,未经许可,请勿转载。
内容授权事宜请您联系 webmaster@21cto.com或关注 21CTO 公众号。
该文观点仅代表作者本人,21CTO 平台仅提供信息存储空间服务。
请扫描二维码,使用微信支付哦。