查询定义

为可复用条件命名一次，即可用于原生 CSS 或类后缀。媒体名称描述视口或设备条件；容器名称描述在使用处选定容器上检查的条件。定义必须位于顶层且不带条件。

条件定义类后缀语法，命名条件列出所有预设条件，响应式设计说明如何选择布局边界。

定义保存条件。使用处提供容器名称 card。展开 --dense 同时保留宽度与样式检查。

文字说明

1. --md 定义宽度条件 (width >= 28rem)。--dense 结合该引用与 style(--density: compact)。
2. 使用处 @container card (--dense) 选择名为 card 的容器。
3. 展开产生 @container card (width >= 28rem) and style(--density: compact)。容器名称不变，也不成为定义的一部分。
4. 相同条件可搭配其他容器名称或最近的合格容器复用。图示呈现编译时替换，并非 DOM 树。

@custom-media

依照 CSS Media Queries 规范定义命名媒体查询：

@custom-media --wide (width >= 60rem);@custom-media --reading (--wide), print;@custom-media --outside not (--reading);@custom-media --enabled true;@custom-media --disabled false;@media (--reading) {  .article {    max-width: 70ch;  }}

名称以 -- 开头。CSS 引用使用 (--name)，标记使用 @name，本地命名块则用 @media (--name)。原生 CSS、工具类和混入定义以及标记查询共用同一注册表。

定义支持查询列表、前向引用、true、false、嵌套布尔表达式、否定和媒体类型。展开遵循逻辑：列表保留其或关系，否定应用于完整的被引用表达式。列表中每个查询形成独立分支，类上各条件的分支数相乘；展开超过 4,096 条分支的类不生成规则，例如重复十二次 @reading 的类。编译器输出常规媒体查询；单个查询无法表达混合媒体类型时使用嵌套块。不需要浏览器 custom-media API 或 JavaScript 运行时注册。

未定义、循环或无效引用会导致编译错误。同名定义以较后者为准。媒体与混入名称相互独立：@name 选择媒体，@apply(--name) 调用混入。--starting-style 为保留名称，因为 @starting-style 已内置。预设没有 --breakpoint-* 令牌。项目中具有此前缀的自定义属性仍为常规 CSS，绝不会隐式声明媒体条件。宽度上限请用原生长度或独立命名的布局令牌。保留外部 URL 的导入不能包含未解析的 custom-media 查询；降低语法前先解析这些样式表导入，或在导入上使用常规原生查询。

@custom-media --card (width >= 40rem); .card { @media (--card) { display: grid; } }

.card {  @media (width >= 40rem) {    display: grid;  }}

@custom-container

Master CSS 在编译时展开 @custom-container 定义；浏览器接收常规 @container 规则。定义仅保存条件，测量哪个容器则在使用条件的位置决定。

@custom-container --md (width >=28rem);@custom-container --max-md not (--md);@custom-container --compact style(--density: compact);@custom-container --dense (--md) and (--compact);@container card (--md) {  .title {    font-size: 1.25rem;  }}

名称以 -- 开头。CSS 引用在可选容器名称后使用 (--name)，例如 @container card not (--md)。标记在容器查询内使用相同引用：@container(--md) 测量最近的容器，@container(card|--md) 测量命名容器。原生 CSS、工具类和混入定义以及标记共用同一注册表。

定义可以是任意容器条件：尺寸与样式查询、not、and、or，以及对其他自定义容器的引用，包括前向引用。展开时替换被引用条件；除非原本已是一个组或完整条件，否则添加括号，因此 @container card (--dense) 输出 @container card (width >= 28rem) and style(--density: compact)。容器条件始终适合单个规则前置部分，展开绝不增加分支。编译器输出常规容器查询，并将各展开条件存入 manifest 的 customContainers。

未定义、循环和空引用都会导致编译错误，以容器名称开头的定义也一样。同名定义以较后者为准，引用该名称的定义使用最终版本。容器名称与自定义媒体、混入相互独立：裸 @md 始终选择自定义媒体，绝不选择容器条件。--container-* 令牌用于设置元素尺寸，绝不提供容器断点。

@custom-container --roomy (width >= 40rem); .card { @container (--roomy) { display: grid; } }

.card {  @container (width >= 40rem) {    display: grid;  }}