【第3640期】用 Range 语法让样式查询更灵活

主要观点总结

文章介绍了Chrome 142对样式查询（Style Queries）的新升级，支持范围语法（Range Syntax）。现在可以使用比较运算符如 >、<、>=、<= 来比较数值，实现更智能的响应式样式。新功能不仅限于@container规则，还可以在CSS的if()函数中使用。

关键观点总结

关键观点1: Chrome 142对样式查询进行升级，引入范围语法。

现在可以在样式查询和CSS的if()函数中使用比较运算符，如 > 、< 、>= 、<= 。这为实现响应式和状态感知组件提供了新的可能性。

关键观点2: 新的范围语法使@container style()查询功能更加强大。

现在可以比较自定义属性、字面值，甚至是函数（如attr()）返回的值。两个值必须解析为相同的数值类型，才能进行有效的比较。

关键观点3: 范围语法在实际场景中的应用。

例如，在天气卡片示例中，根据降雨概率设置特定的背景渐变。此外，范围语法还可以用于网格布局、样式切换、动画效果等场景。