主要观点:Chrome 137 引入了对新 CSS if 函数的支持,首次将条件逻辑直接引入原生样式表,可在属性值中编写声明性条件样式,减少对预处理器或基于 JavaScript 的回退的需求。
关键信息:if()函数是 CSS Values and Units Module Level 5 规范的一部分,目前仅在 Chrome 137 及更高版本中可用,支持三种内联条件类型(style()、media()、supports()),能根据自定义属性、媒体查询或特性支持动态应用样式,语法可通过条件后跟值及可选的 else 子句来实现,如通过配对自定义属性和 HTML 元素的 data-status 属性来分配不同背景颜色。
重要细节:熟悉 Sass 或 PostCSS 的开发者觉得该函数有用,此版本在开发者社区引发了不同反应,一些人批评语法混乱,像三元运算符,且存在局限性,仅在 Chrome 137+支持,与 Firefox 或 Safari 兼容性有限,社区担心兼容性和缺乏统一标准,类似微软的“包容、扩展和消灭”策略,而另一些人对该变化持积极态度,Theo Browne 在视频中强调其对大规模样式系统的优势,可降低风险,Chrome 137 于 2025 年 5 月在稳定通道可用,开发者可在支持环境中使用 if()并通过 W3C 的 CSS Values and Units Module Level 5 跟踪规范进展。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。