【第3627期】从媒体查询到样式查询：Chrome 142 如何让 CSS 更懂“数值”

主要观点总结

文章介绍了CSS的新功能——样式查询的区间语法（Range Syntax），它可以让样式根据自定义属性的数值阈值自动响应，无需JavaScript。文章详细说明了区间语法的使用方法和实例，并提到了浏览器支持情况。

关键观点总结

关键观点1: 区间语法简介

Chrome 142推出的新功能，允许在样式查询中直接使用比较运算符（>、<、>=、<=），使样式能够根据数值阈值动态响应。

关键观点2: 区间语法的应用

可以通过比较自定义属性、字面值，甚至通过attr()从HTML属性中获取的值，来创建响应式样式。减少了重复代码，彻底告别了JavaScript依赖，使组件更灵活。

关键观点3: 类型匹配的要求

比较的值必须是同一种数值类型，如长度、纯数字、百分比、角度、时间、频率、分辨率等。类型不匹配会导致查询失效。

关键观点4: 实例展示

通过天气组件和商品卡片的示例，展示了区间语法在动态改变样式方面的实际应用。

关键观点5: 浏览器支持情况

区间语法目前仅在Chrome 142及以上版本可用，其他浏览器正在跟进。在生产环境中使用时需要准备回退方案。

关键观点6: 总结

区间语法是一种简单的渐进增强技术，适合在内部仪表盘、设计系统、组件库等场景中使用，可以大大提高开发的效率和用户体验。