AI 摘要：本文介绍了 CSS 新增的范围语法（range syntax）在容器样式查询（container style queries）与 if() 函数中的应用。通过 Chrome 142 起的支持，开发者可以比较数值、CSS 自定义属性（custom properties）或从 HTML 属性中取值（attr() 函数），从而在纯 CSS 内实现条件逻辑。作者展示了使用自定义属性控制背景亮度、通过 attr() 动态生成通知徽章，以及比较单位值（如 em 与 px）的实例，并分析了 container queries 与 if() 在作用域和灵活性上的差异。

1. 范围语法基础与 Chrome 142 支持
• 范围语法此前已用于媒体查询（media queries）与容器尺寸查询（container size queries），现在扩展至容器样式查询（container style queries）与 if() 函数。
• Chrome 142 起支持这一功能，可比较字面值、自定义属性或 attr() 提取的数值。

2. 使用自定义属性的容器样式查询示例
• 定义自定义属性 --lightness 控制背景亮度。
• 使用 @container style(--lightness < 50%) 及相关条件设置文字颜色。
• 说明容器查询作用方向是“向上”级联，只能查找父级容器定义的属性。
• if() 函数的条件判断也能在相同选择器块内使用。
• 对比 container queries 与 if() 的应用场景：前者适合作用域可控、命名容器（container-name），后者适合快速内联逻辑。

3. 配合 attr() 函数的范围语法
• 使用 HTML 自定义属性 data-notifs 展示动态通知数值。
• 应用 @container style(attr(data-notifs type(<number>)) <= 99) 设置徽章内容和形状。
• 当通知数值超过 99 时，通过另一查询输出“99+”，并调整内边距。
• 强调必须为 attr() 指定类型（如 <number> 或 <integer>）以支持数值比较。
• 列举范围语法支持的数据类型：<length>、<number>、<percentage>、<angle>、<time>、<frequency>、<resolution>。

4. 以字面值进行范围比较
• 演示在 h1 和 span 中比较 1em 与 32px 的场景。
• 使用 if() 根据字体大小动态调整字重（font-weight）以优化可读性。
• 说明 CSS 能跨单位比较相同数据类型值，增强设计灵活性。

5. CSS 条件逻辑的演进与延伸阅读
• 范围语法扩展至 container style queries 与 if() 函数，是 CSS 条件逻辑的重要迭代。
• 可与媒体查询、功能查询（feature queries）及容器尺寸查询组合使用。
• 推荐阅读：Media queries、Container queries、Feature queries。

CSS-Tricks

The Range Syntax Has Come to Container Style Queries and if() | CSS-Tricks

Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.