自定义媒体查询的终结 (#注释)
原文英文，约300词，阅读约需2分钟。
📝
内容提要
本文介绍了使用自定义媒体查询和容器查询解决媒体查询中无法重用自定义属性的问题。作者提到CSS的发展仍在继续，出现了一些新的CSS特性。作者还介绍了使用自定义属性形式化媒体/容器查询中的变量的方法，并给出了示例。最后，作者认为自定义属性的样式查询可以作为自定义媒体查询的替代方案。
🔎
延伸解读
自定义媒体查询的现状
自定义媒体查询（@custom-media）允许定义可重用的媒体查询，但文章指出它从未在任何浏览器中实现。因此，开发者无法依赖此特性来复用自定义属性。尽管CSS不断发展，但这一具体方案仍停留在设想阶段，需要寻找替代方案。
容器查询与样式查询的兴起
容器查询和自定义属性样式查询逐渐得到支持。MDN兼容性数据显示，主流浏览器已支持自定义属性的样式查询。这为在媒体/容器查询中形式化变量提供了新途径，使得基于视口宽度切换自定义属性成为可能。
样式查询作为替代方案
通过结合媒体查询和容器样式查询，可以模拟自定义媒体查询的功能。例如，在媒体查询中设置自定义属性，然后在容器样式查询中根据该属性应用样式。这种方法虽然与自定义媒体查询不同，但能实现相同的效果，且已有浏览器支持。
❓
Q&A
自定义媒体查询的主要问题是什么？
自定义属性在媒体查询中无法重用。
作者提出了什么解决方案来应对自定义属性的问题？
作者提出了自定义媒体查询作为解决方案，但尚未实现。
CSS有哪些新特性被提到？
提到的新特性包括:has()、原生CSS嵌套和容器查询。
容器查询如何影响自定义属性的使用？
容器查询使得自定义属性样式查询逐渐成为可能。
样式查询与自定义媒体查询有什么不同？
样式查询的方法与自定义媒体查询有所不同，但能够实现相同的功能。
如果浏览器支持自定义属性的样式查询，会有什么好处？
可以替代自定义媒体查询，允许根据视口宽度切换和重用自定义属性。
🏷️
