CSS Style Queries：@container style 查询与组件变体

概述 Style Queries 允许在 `@container` 中基于容器的计算样式进行条件匹配，从而按主题或状态切换组件变体。目前为实验性，需检测支持并提供回退。 示例（概念化语法，以浏览器文档为准） ```css /* 当容器具有 data-theme=dark 或指定样式时启用变体 */ @container style(--theme: dark) { .card { background: #111; color: #eee } } ``` 工程建议 - 支持检测：仅在支持的浏览器启用；不支持时回退到类名或数据属性切换。 - 组合使用：与容器尺寸查询协作；减少全局主题样式污染。 - 维护性：保持变体清晰与最小化差异；避免复杂嵌套。 参考与验证 - Chrome 平台文档（Style Queries）：https://developer.chrome.com/docs/web-platform/style-queries/ - WICG 讨论与草案：https://github.com/w3c/csswg-drafts/issues/6260