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

---

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

keywords:

• Style Queries
• @container style
• 组件变体
• 实验性
• 兼容

description: "介绍基于样式的容器查询（Style Queries）的理念与用法示例，按容器的计算样式切换组件变体，说明实验性支持与回退策略。"

categories:

• 文章资讯
• 编程技术

---

概述

Style Queries 允许在 @container 中基于容器的计算样式进行条件匹配，从而按主题或状态切换组件变体。目前为实验性，需检测支持并提供回退。

示例（概念化语法，以浏览器文档为准）

/* 当容器具有 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