CSS 条件规则模块 第5级

1. 介绍

当前这是第 5 级中新内容的早期草案。 第 3 级和第 4 级的特性仍然定义在 [css-conditional-3] 和 [css-conditional-4] 中，尚未被复制到此处。

CSS Conditional Level 5 扩展了 @supports 规则和 supports 查询 语法， 允许检测自定义支持条件，以及受支持的 at-规则 和字体技术。

它还增加了 @when 规则， 泛化了条件规则的概念。 任何可以通过现有条件规则表达的内容， 都可以通过在 @when 中包裹合适的函数来声明条件类型来表达。 这允许作者轻松组合多种类型的查询， 例如媒体查询和 supports 查询， 用一个布尔表达式实现。 如果没有这个， 作者必须依赖嵌套不同的条件规则， 这样读写都更困难， 并且预设这些条件仅能用“and”布尔关系联结（不易表达其他关系）， 同时在所提议的 条件规则链中也会受限。

它还新增了 @else 规则， 紧跟在其他条件规则之后， 并自动将其条件视为紧邻前一规则条件的反向， 从而在 条件规则链 中仅应用第一个匹配的规则。

它还新增了容器查询（Container Queries）。 它们在概念上类似于媒体查询， 但允许检测文档中元素的属性（如盒子尺寸或计算样式）， 而不是针对整个文档。

2. 对 @supports 规则的扩展

本级规范扩展了 <supports-feature> 语法如下：

<supports-feature> = <supports-selector-fn>
                   | <supports-font-tech-fn> | <supports-font-format-fn>
                   | <supports-at-rule-fn>
           | <supports-decl>
<supports-decl> = ( [ <declaration> | <supports-condition-name> ] )
<supports-font-tech-fn> = font-tech( <font-tech> )
<supports-font-format-fn> = font-format( <font-format> )
<supports-at-rule-fn> = at-rule( <at-keyword-token> )

<supports-condition-name>

如果 UA 支持该命名条件，结果为 true。 如果名称无法识别，结果为 false。

<supports-font-tech-fn>

如果 UA 支持作为参数提供的字体技术，结果为 true。

<supports-font-format-fn>

如果 UA 支持作为参数提供的字体格式，结果为 true。

<supports-at-rule-fn>

如果 UA 支持作为参数提供的 at-规则，结果为 true。

2.1. 支持定义的扩展

2.1.1. 字体技术和格式

当 CSS 处理器能够在布局和渲染中利用指定的 CSS Fonts 4 § 11.1 Font tech 时，被认为支持某字体技术。

当 CSS 处理器能够在布局和渲染中利用指定的 CSS Fonts 4 § 11.2 Font formats，且该格式未被指定为 <string> 时，被认为 支持某字体格式。

2.1.2. At-规则

如果 CSS 处理器会在任何上下文中接受以指定 at-keyword 开头的 at-规则，则被认为 支持该 at-规则。

注意：由于 @charset 并不是一个有效的 at-规则， 因此在此定义下不被认为是受支持的。

2.1.3. 命名条件

当相关的 命名 supports 条件 返回 true 时，CSS 处理器被认为 支持某命名条件。

3. 通用条件规则：@when 规则

@when at-规则是一个 条件分组规则，它将诸如 @media 和 @supports 等各自的 条件分组规则进行了泛化。 其定义如下：

@when <boolean-condition> {
  <rule-list>
}

其中，<boolean-condition> 是类似 Media Queries 4 § 3 语法 的布尔代数， 但以 media() 和 supports() 函数作为叶子。

在 Conditional 中以通用方式定义“布尔代数，以 X 为叶子”， 这样所有条件规则都可以直接引用它，而无需各自重新定义布尔代数。

media() 和 supports() 函数定义如下：

media() = media( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
supports() = supports( <declaration> )

media() 或 supports() 函数与其所包含条件关联的布尔结果相对应。

4. 级联条件：@else 规则

通常，条件分组规则是相互独立的； 每个规则都有单独的条件， 在不直接参考任何其他规则的情况下进行评估， 并仅基于其自身条件决定是否应用其包含的规则。

这对简单条件来说没问题， 但当需要编写一组彼此互斥的条件时就会变得困难： 作者必须非常谨慎地构造条件， 以避免在其他规则应生效时被激活， 并确保这组条件不会意外地全部排除某种情况， 使其未被样式化。

@else 规则是一个 条件分组规则，用于形成 条件规则链， 它将多个 条件分组规则 关联起来， 并保证只有第一个匹配的规则 会将其条件评估为 true。 其定义如下：

@else <boolean-condition>? {
  <rule-list>
}

@else 的解释与 @when 相同。 如果省略其 <boolean-condition>， 则将其视为始终为真的条件。

条件规则链 是 一系列连续的 条件分组规则， 以某个非 @else 的 条件分组规则 开始， 后跟零个或多个 @else 规则。 在连续的 条件分组规则 之间不能有除空白和/或注释之外的任何内容； 其他任何标记都会“中断”该链。

我们是否应要求链中只有最后一个 @else 可以省略条件？ 在调试代码时，通过将其中一个条件设为 “true” 来短路 if-else 链并不少见； 我认为在 CSS 中也同样有用？ 如果不小心省略了条件，仍然很容易看出哪里出了问题。

在一个 条件规则链 中， 会按顺序评估每个 条件分组规则 的条件。 如果其中某个条件为真， 则链中所有后续 条件分组规则 的条件 都评估为假， 无论其声明的条件为何。

不属于 @else 规则链的 条件规则链 中的 @else 规则无效，必须被忽略。

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

@media (width >= 400px) and (pointer: fine) {
  @supports (display: flex) {
  /* A */
  }
  @supports not (display: flex) {
  @supports (caret-color: pink) and (background: double-rainbow()) {
    /* B */
  }
  @supports not ((caret-color: pink) and (background: double-rainbow())) {
    /* C */
  }
  }
}
@media not ((width >= 400px) and (pointer: fine)) {
  @supports (caret-color: pink) and (background: double-rainbow()) {
  /* B */
  }
  @supports not ((caret-color: pink) and (background: double-rainbow())) {
  /* C */
  }
}

@when font-tech(color-COLRv1) and font-tech(variations) {
  @font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
}
@else font-tech(color-SVG) {
  @font-face { font-family: icons; src: url(icons-gradient.woff2); }
}
@else font-tech(color-COLRv0) {
  @font-face { font-family: icons; src: url(icons-flat.woff2); }
}
@else {
  @font-face { font-family: icons; src: url(icons-fallback.woff2); }
}

@font-face { font-family: icons; src: url(icons-fallback.woff2);
@supports font-tech(color-COLRv1) {
  @font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
}

5. 容器查询

虽然 媒体查询提供了查询文档显示所处用户代理或设备环境方面的方法 （如视口尺寸或用户偏好）， 但 容器查询 允许检测文档内元素的某些方面（如盒子尺寸或计算样式）。

默认情况下，所有元素都是用于 容器样式查询 的 查询容器， 并且可以通过使用 container-type 属性 （或 container 简写）指定附加的查询类型， 将其建立为用于 容器尺寸查询 和 容器滚动状态查询 的 查询容器。 应用于 查询容器的 扁平树 后代的样式规则， 可以通过针对该容器进行查询来进行条件化， 使用 @container 条件分组规则。

main, aside {
  container: my-layout / inline-size;
}

.media-object {
  display: grid;
  grid-template: 'img' auto 'content' auto / 100%;
}

@container my-layout (inline-size > 45em) {
  .media-object {
  grid-template: 'img content' auto / auto 1fr;
  }
}

对于表示 DOM 树中真实元素的 ::part() 和 ::slotted() 伪元素 选择器， 可由这些元素的 扁平树 祖先建立 查询容器。 对于其他 伪元素， 查询容器 可以由其 起始元素 的包含性 扁平树 祖先建立。

<style>
  #container {
  width: 100px;
  container-type: inline-size;
  }
  @container (inline-size < 150px) {
  #inner::before {
    content: "BEFORE";
  }
  }
</style>
<div id=container>
  <span id=inner></span>
</div>

<div id=host style="width:200px">
  <template shadowroot=open>
  <style>
    #container {
    width: 100px;
    container-type: inline-size;
    }
    @container (inline-size < 150px) {
    ::slotted(span) {
      color: green;
    }
    }
  </style>
  <div id=container>
    <slot />
  </div>
  </template>
  <span id=slotted>Green</span>
</div>

5.1. 创建查询容器：container-type 属性

container-type 属性将元素建立为某些类型查询的 查询容器。 对于需要特定包含类型的尺寸类 容器查询， 元素通过此属性被显式设为 查询容器。 对于其他类型的 查询容器， 任何元素都可以是 查询容器， 如用于 容器样式查询。

各值含义如下：

size

为 查询容器 建立对 容器尺寸查询 的支持，涵盖 行内轴 和 块轴。 对 主框 应用 样式包含 和 尺寸包含， 并建立一个 独立格式化上下文。

inline-size

为容器自身的 行内轴 上的 容器尺寸查询 建立 查询容器。 对 主框 应用 样式包含 和 行内尺寸包含， 并建立一个 独立格式化上下文。

scroll-state

为 查询容器 建立 容器滚动状态查询

normal

该元素不是任何 容器尺寸查询 或 容器滚动状态查询 的 查询容器， 但仍是用于 容器样式查询 的 查询容器。

aside, main {
  container-type: inline-size;
}

h2 { font-size: 1.2em; }

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

@container style(--cards: small) {
  article {
  border: thin solid silver;
  border-radius: 0.5em;
  padding: 1em;
  }
}

#sticky {
  container-type: scroll-state;
  position: sticky;
}
@container scroll-state(stuck: top) {
  #sticky-child {
  background-color: lime;
  }
}

5.2. 命名查询容器：container-name 属性

container-name 属性 指定一组 查询容器名称。 这些名称可被 @container 规则使用， 以筛选要作用的 查询容器。 容器名称不是 树作用域名称。

none

该 查询容器 没有 查询容器名称。

<custom-ident>

将 查询容器名称 指定为 标识符。 关键字 none、and、 not 和 or 被排除在该 <custom-ident> 之外。

main {
  container-type: size;
  container-name: my-page-layout;
}

.my-component {
  container-type: inline-size;
  container-name: my-component-library;
}

@container my-page-layout (block-size > 12em) {
  .card { margin-block: 2em; }
}

@container my-component-library (inline-size > 30em) {
  .card { margin-inline: 2em; }
}

@container my-page-layout {
  .card { padding: 1em; }
}

5.3. 创建命名容器：container 简写

container 简写属性 可在同一声明中同时设置 container-type 和 container-name。 如果省略 <'container-type'>， 则其值会被重置为初始值。

main {
  container: my-layout / size;
}

.grid-item {
  container: my-component / inline-size;
}

5.4. 容器查询：@container 规则

@container 规则 是一种 条件分组规则，其条件包含 一个 容器查询， 即 容器尺寸查询 和/或 容器样式查询 的布尔组合。 <block-contents> 块内的样式声明， 只会在其条件为真、且元素的 容器查询 成立时， 通过 过滤 生效。

@container 规则的语法如下：

@container <container-condition># {
  <block-contents>
}

其中：

<container-condition> = [ <container-name>? <container-query>? ]!
<container-name> = <custom-ident>
<container-query> = not <query-in-parens>
          | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]
<query-in-parens> = ( <container-query> )
          | ( <size-feature> )
          | style( <style-query> )
          | scroll-state( <scroll-state-query> )
          | <general-enclosed>

<style-query>     = not <style-in-parens>
          | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]
          | <style-feature>
<style-in-parens> = ( <style-query> )
          | ( <style-feature> )
          | <general-enclosed>
<style-feature> = <style-feature-plain> | <style-feature-boolean> | <style-range>
<style-feature-plain> = <style-feature-name> : <style-feature-value>
<style-feature-boolean> = <style-feature-name>
<style-range> = <style-range-value> <mf-comparison> <style-range-value>
    | <style-range-value> <mf-lt> <style-range-value> <mf-lt> <style-range-value>
    | <style-range-value> <mf-gt> <style-range-value> <mf-gt> <style-range-value>
<style-range-value> = <custom-property-name> | <style-feature-value>

<scroll-state-query>     = not <scroll-state-in-parens>
             | <scroll-state-in-parens> [ [ and <scroll-state-in-parens> ]* | [ or <scroll-state-in-parens> ]* ]
             | <scroll-state-feature>
<scroll-state-in-parens> = ( <scroll-state-query> )
             | ( <scroll-state-feature> )
             | <general-enclosed>

关键字 none、and、not 和 or 被排除在上述 <custom-ident> 之外。

对于每个元素， 要查询的 查询容器 从该元素的祖先 查询容器 中选取， 它们需要是所有 容器特性 在 <container-query> 内的有效 查询容器。 如果 <container-query> 包含 未知或不支持的 容器特性， 那么该 <container-condition> 将不会选中任何 查询容器。 <container-name> 会将被考虑的 查询容器 集合限制为名称匹配的那些。

一旦为元素选定了合格的 查询容器， <container-query> 内的每个 容器特性 都会针对该 查询容器 进行评估。 如果没有祖先是合格的 查询容器， 则该元素的 容器查询 为 unknown。 如同媒体查询，<general-enclosed> 的结果也是 unknown。 如果省略 <container-query>， 只要 <container-name> 匹配，该 查询容器 就是合格的。

如果一个 容器查询 包含多个 <container-condition>， 每个条件都会选择自己的 查询容器 并独立评估。 容器查询 若任一组成 <container-condition> 为 true，则整体为 true； 仅当所有组成 <container-condition> 都为 false 时才为 false。

@container card (inline-size > 30em) and style(--responsive: true) {
  /* styles */
}

@container card (inline-size > 30em), style(--large: true) {
  /* styles */
}

定义在多个嵌套 容器查询 内的元素上的样式规则， 仅当所有包裹的 容器查询 对该元素均为真时才会应用。

注意： 嵌套的 容器查询 可针对不同容器进行评估， 因此并不总能将各个 <container-condition> 合并为一个查询。

@container card (inline-size > 30em), style(--responsive: true) {
  /* styles */
}

@container card (inline-size > 30em) {
  @container style(--responsive: true) {
  /* styles */
  }
}

全局的、定义名称的 at-规则，如 @keyframes、@font-face 或 @layer， 如果定义在 容器查询 内，并不受 容器查询 条件的限制。

5.5. 动画容器

对 容器查询 的评估发生变化时， 必须作为 样式变更事件 的一部分处理， 即便该变化是由 动画效果 引起的。

main {
  display: flex;
  width: 300px;
}

#container {
  container-type: inline-size;
  flex: 1;
}

/* Resolved width is initially 200px, but changes as the transition
   on #sibling progresses. */
#inner {
  transition: 1s background-color;
  background-color: tomato;
}

/* When this container query starts (or stops) applying, a transition
   must start on background-color on #inner. */
@container (width <= 150px) {
  #inner {
  background-color: skyblue;
  }
}

<main>
  <div id=container>
  <div id=inner>Inner</div>
  </div>
  <div id=sibling>Sibling</div>
</main>

由 计算值 引起的 容器查询长度 单位的变化， 也必须作为 样式变更事件 的一部分处理。

6. 容器特性

容器特性 用于查询查询容器的某个具体方面。

容器特性在评估时遵循与 媒体特性相同的规则， 当它们处于布尔上下文时。

6.1. 尺寸容器特性

容器尺寸查询允许查询 查询容器的主框的尺寸。 它是由多个单独尺寸特性 （<size-feature>）的布尔组合，每个尺寸特性都查询 查询容器的某一具体维度特性。 <size-feature> 的语法与 媒体特性相同： 即特性名、比较符和数值。[mediaqueries-5] 组合 尺寸特性为 尺寸查询的布尔语法和逻辑 与CSS 特性查询相同。 （参见@supports。[css-conditional-3]）

如果查询容器 没有主框， 或主框不是布局包含盒， 或查询容器不支持相关轴上的 容器尺寸查询， 那么对尺寸特性的评估结果为 unknown（未知）。

相对长度单位 （包括容器查询长度单位） 以及自定义属性在容器查询条件中 的计算基于查询容器的计算值。

树计数函数（CSS Values 5 § 9 树计数函数：sibling-count() 和 sibling-index() 表示法）在容器元素上计算。

注意： 这与媒体查询中相对单位的处理方式不同。

注意： 如果自定义属性替换后导致 尺寸特性的值无效，则按其他无效特性值处理， 尺寸特性的结果为 unknown。

aside, main {
  container-type: inline-size;
}

aside { font-size: 16px; }
main { font-size: 24px; }

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

aside, main {
  container-type: inline-size;
}

aside { --query: 300px; }
main { --query: 500px; }

@container (width > var(--query)) {
  h2 { font-size: 1.5em; }
}

6.1.1. 宽度：width 特性

width 容器特性查询查询容器的内容区的宽度。

6.1.2. 高度：height 特性

height 容器特性查询查询容器的内容区的高度。

6.1.3. 行内尺寸：inline-size 特性

inline-size 容器特性查询查询容器的内容区在 查询容器的行内轴上的尺寸。

6.1.4. 块级尺寸：block-size 特性

block-size 容器特性查询查询容器的内容区在 查询容器的块轴上的尺寸。

6.1.5. 宽高比：aspect-ratio 特性

aspect-ratio 容器特性被定义为 width 容器特性 的值与 height 容器特性的值之比。

6.1.6. 方向：orientation 特性

portrait

当orientation 容器特性的 height 容器特性的值大于等于 width 容器特性的值时，为 portrait。

landscape

否则orientation为 landscape。

6.2. 样式容器特性

容器样式查询 允许查询查询容器的计算值。 它是多个单独样式特性（<style-feature>）的布尔组合， 每个样式特性都查询 查询容器的单一、具体属性。 <style-feature> 的语法可以是 合法的声明、<style-feature-name> 或合法的样式范围 （<style-range>）。 <style-feature-name> 可以是 支持的 CSS 属性或 合法的<custom-property-name>。 <style-feature-value> 产生式匹配任何 合法的<declaration-value>， 只要不包含<mf-lt>、<mf-gt> 和<mf-eq> 记号。

<style-feature-plain> 在 查询容器上给定属性的计算值 等于给定值时为 true （此值也基于 查询容器 计算），否则为 false。

没有值的样式特性 （<style-feature-boolean>）在 计算值 与该属性的初始值不同则为 true。

将样式特性组合为 样式查询的布尔语法和逻辑 与CSS 特性查询相同。 （参见@supports。[css-conditional-3]）

查询样式特性 的简写属性，当所有长属性的 计算值均匹配时为真，否则为假。

依赖级联的关键字，如revert 与 revert-layer， 在样式特性中作为值无效， 会导致容器样式查询为 false。

注意： 其余非级联依赖的 CSS-wide 关键字会相对于查询容器计算， 与其它值一致。

6.3. 滚动状态容器特性

容器滚动状态查询 允许针对依赖滚动位置的状态对容器进行查询。它是由多个 单独的滚动状态特性（<scroll-state-feature>）的布尔组合组成，每个特性 都查询查询容器的单一特性。<scroll-state-feature> 的语法与 媒体特性相同：特性名、比较符和值。

滚动状态特性 既可以匹配滚动器自身的状态，也可以匹配受祖先 滚动容器 的滚动视口滚动位置影响的元素状态。前者的例子是 scrollable 特性，后者是 snapped。

6.3.1. 滚动状态的更新

滚动状态可能会引发布局循环，因为被查询的滚动状态可能导致样式变化， 而样式变化又可能在布局之后引起滚动状态变化。

为避免此类布局循环，scroll-state 查询容器会在 运行快照布局后状态步骤时更新其当前状态，该步骤只会在 HTML 事件循环处理模型的特定时机运行。

当被要求运行快照布局后状态步骤时，需更新每个 scroll-state 查询容器的当前状态。该快照状态将在下次再次运行这些步骤之前， 用于所有样式与布局更新。

6.3.2. 粘性定位：stuck 特性

stuck 容器特性用于查询某个粘性定位的容器是否为保持在指定边缘的 粘性视图矩形内而发生了可见的偏移。逻辑边会基于 查询容器的方向与写字模式映射到物理边。 如果查询容器不是粘性定位，则任何值都不匹配。

来自相互垂直的两个轴的值可能会同时匹配， 但同一轴上的对立边不会同时匹配。

@container scroll-state((stuck: top) and (stuck: left)) { ... }

@container scroll-state((stuck: left) and (stuck: right)) { ... }

none

粘性容器未在任何方向发生偏移。

top

粘性容器为保持在顶部边缘而发生了偏移。

right

粘性容器为保持在右侧边缘而发生了偏移。

bottom

粘性容器为保持在底部边缘而发生了偏移。

left

粘性容器为保持在左侧边缘而发生了偏移。

block-start

粘性容器为保持在block-start 边缘而发生了偏移。

inline-start

粘性容器为保持在inline-start 边缘而发生了偏移。

block-end

粘性容器为保持在block-end 边缘而发生了偏移。

inline-end

粘性容器为保持在inline-end 边缘而发生了偏移。

6.3.3. 滚动吸附：snapped 特性

snapped 容器特性用于查询某个吸附目标 是否已经或将要在给定轴上吸附到其滚动吸附容器。也就是说， 它匹配任何会触发 scrollsnapchanging 事件的吸附目标。

none

查询容器 不是吸附目标。

x

当snapped 容器特性匹配 x 时，表示查询容器是其滚动容器的 水平吸附目标。

y

当snapped 容器特性匹配 y 时，表示查询容器是其滚动容器的 垂直吸附目标。

block

当snapped 容器特性匹配 block 时，表示查询容器是其吸附目标，且位于滚动吸附容器的块方向上。

inline

当snapped 容器特性匹配 inline 时，表示查询容器是其吸附目标，且位于滚动吸附容器的行内方向上。

both

当snapped 容器特性匹配 both 时，表示查询容器是其吸附目标，且位于滚动吸附容器的两个方向上。

6.3.4. 可滚动：scrollable 特性

scrollable 容器特性用于查询某个滚动容器在给定方向上是否具有 通过用户发起滚动即可到达的、已裁剪的可滚动溢出矩形内容。 换言之，scrollable 不会匹配 hidden 容器，也不会匹配 negative scrollable overflow region。

这些逻辑值会基于查询容器 的方向与写字模式映射为物理方向。若该容器不是滚动容器， 则任何值都不匹配。

none

滚动容器在任何方向上都没有可滚动溢出。

top

滚动容器在顶部边缘之外有可滚动溢出。

right

滚动容器在右侧边缘之外有可滚动溢出。

bottom

滚动容器在底部边缘之外有可滚动溢出。

left

滚动容器在左侧边缘之外有可滚动溢出。

block-start

滚动容器在block-start 边缘之外有可滚动溢出。

inline-start

滚动容器在inline-start 边缘之外有可滚动溢出。

block-end

滚动容器在block-end 边缘之外有可滚动溢出。

inline-end

滚动容器在inline-end 边缘之外有可滚动溢出。

x

滚动容器在水平方向上存在可滚动溢出。

y

滚动容器在垂直方向上存在可滚动溢出。

block

滚动容器在其块方向上存在可滚动溢出。

inline

滚动容器在其行内方向上存在可滚动溢出。

6.3.5. 已滚动：scrolled 特性

对于一个查询容器， 若其是滚动容器， 则scrolled 容器特性用于查询其最近一次相对滚动的方向。 这些逻辑值会基于查询容器的方向与写字模式映射为物理方向。 若该容器不是滚动容器，则任何值都不匹配。

none

查询容器 尚未发生过相对滚动。

top

最近一次相对滚动方向为向上。

right

最近一次相对滚动方向为向右。

bottom

最近一次相对滚动方向为向下。

left

最近一次相对滚动方向为向左。

block-start

最近一次相对滚动方向指向block-start。

inline-start

最近一次相对滚动方向指向inline-start。

block-end

最近一次相对滚动方向指向block-end。

inline-end

最近一次相对滚动方向指向inline-end。

x

最近一次相对滚动发生在水平方向。

y

最近一次相对滚动发生在垂直方向。

block

最近一次相对滚动发生在块方向。

inline

最近一次相对滚动发生在行内方向。

7. 容器相对长度：cqw、cqh、cqi、cqb、cqmin、cqmax 单位

容器查询长度单位 指定一个相对于查询容器尺寸的长度。 使用容器查询长度单位的样式表可以更方便地将组件从一个查询容器迁移到另一个容器。

容器查询长度单位包括：

对于每个元素，容器查询长度单位的计算 作为对应轴（或多轴）上的容器尺寸查询进行。 每个轴的查询容器 是最近的祖先中在该轴上支持容器尺寸查询的容器。 如果在某个轴上没有可用的查询容器，则使用该轴的小视口尺寸。

注意： 某些情况下，同一元素上的cqi 和 cqb单位 可能是针对不同的查询容器进行计算。 同样，cqmin 和 cqmax 单位 分别代表 cqi 和 cqb 的较大或较小值， 即便这两个尺寸来自不同的查询容器。

子元素不会继承父元素指定的相对值； 它们继承的是计算值。

/* 回退值不依赖于容器性 */
h2 { font-size: 1.2em; }

@container (inline-size >= 0px) {
  /* 仅在有 inline-size 容器可用时生效 */
  h2 { font-size: calc(1.2em + 1cqi); }
}

8. 定义自定义支持查询：@supports-condition 规则

@supports-condition at-规则 是一种条件分组规则，允许作者定义并命名一个supports 查询以便后续复用， 创建一个命名支持条件。 这样可以用名称引用复杂或常用的特性查询，提高可维护性和可读性。

@supports-condition <supports-condition-name> {
  <block-contents>
}

其中 <supports-condition-name> 是定义 supports 查询名称的<extension-name>。

块内的所有内容都将被评估以测试用户代理是否支持相关特性。 这些内容不会影响文档的实际渲染。

一旦定义，命名支持条件即可在后续的@supports 或 @when 条件中使用。

如果定义了多个同名的@supports-condition规则， 则以文档顺序最后一个为准，之前的都被忽略。

@supports-condition --thicker-underlines {
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em;
}

/* 等价于 (text-decoration-thickness: 0.2em) and (text-underline-offset: 0.3em) */
@supports (--thicker-underlines) {
  a {
    text-decoration: underline;
    text-decoration-thickness: 0.2em;
    text-underline-offset: 0.3em;
  }
}

@supports-condition 规则允许出现在 @import 和 @namespace 规则之前（若有 @charset 规则，则应在其后）。

@supports-condition --nesting {
  & { }
}

@import url("nested-styles.css") supports(--nesting);

@supports-condition --stuck-container-feature {
  @container scroll-state(stuck: top) { }
}

@supports (--stuck-container-feature) {
  div { border-color: navy; }
}

at-规则名称尚在讨论中。 备选方案包括 @supports-query、@supports-test 和 @custom-supports。 名称应与自定义媒体查询保持一致。

9. API

9.1. CSSContainerRule 接口

CSSContainerRule 接口表示一个@container 规则。

[Exposed=Window]
interface CSSContainerRule : CSSConditionRule {
  readonly attribute CSSOMString containerName;
  readonly attribute CSSOMString containerQuery;
};

conditionText 类型为 CSSOMString （CSSContainerRule 对 CSSConditionRule 上属性的专属定义）

conditionText 属性（定义于父类 CSSConditionRule）的取值如下：

若@container 规则有关联的 <container-name>

返回 containerName 和 containerQuery 属性的值，用空格拼接。

否则

返回 containerQuery 属性值。

containerName 类型为 CSSOMString

containerName 属性取值如下：

若@container 规则有关联的 <container-name>

返回序列化后的 <container-name>。

否则

返回空字符串。

containerQuery 类型为 CSSOMString

containerQuery 属性的返回值为 指定的 <container-query>， 不做任何逻辑简化， 保证返回的查询在任何符合规范的实现中 （包括实现本规范允许的未来扩展的实现，例如 <general-enclosed> 扩展机制）都能得到相同的结果。 换言之， 可以做 token 流简化（如多空格合并为一个空格、在可选空格处省略）， 但不得做逻辑简化（如去掉多余括号或基于结果做简化）。

容器查询应有 matchContainer 方法。 该方法将以 matchMedia() 和 MediaQueryList 接口为模型， 但应用于 Element 而不是 Window。 在测量布局尺寸时，其行为类似 resizeObserver， 但还提供额外的容器查询语法和特性。[Issue #6205]

9.2. CSSSupportsConditionRule 接口

CSSSupportsConditionRule 接口表示一个@supports-condition 规则。

[Exposed=Window]
interface CSSSupportsConditionRule : CSSGroupingRule {
  readonly attribute CSSOMString name;
};

name 类型为 CSSOMString

该属性为命名支持条件的名称。

安全性说明

目前没有针对本文件提出安全性问题。

隐私说明

font-tech() 和 font-format() 函数 可能会泄露用户软件的信息，比如其版本、 以及是否启用了或禁用了某些功能的非默认设置。

这些信息也可以通过其他 API 获得。 但本规范中的特性是信息在 Web 上披露的方式之一。

这些信息也可能被聚合后用于提升对用户指纹识别的准确性。

变更记录

自2024年11月5日工作草案以来的变更

• 明确了文档中最后一个 @supports-condition 规则优先生效 (#12973)
• 扩展supports 查询以通过at-rule()表达at-规则能力 (#2463, #6966, #11116, #11117)
• 新增@supports-condition at-规则及相关 CSSSupportsConditionRule 接口。 (#12622)
• 明确 container-name 不是树作用域 (#12090)
• 为 scroll-state() 查询定义 direction 特性 (#6400)
• 明确 0 和 0px 在条件中等价 (#12236)
• 为样式容器查询定义了范围语法 (#8376)
• 明确允许树计数函数 (#10982)
• 尺寸查询容器不再应用布局包含 (#10544)
• 为 snapped 查询添加 "both" 值 (#11181)
• 为 overflowing 添加轴关键字 (#11183)
• 将 overflowing 重命名为 scrollable (#11182)
• 使 <container-query> 可选 (#9192)

自2024年7月23日工作草案以来的变更

• 为 scroll-state() 特性添加了 none 关键字 (#10874)
• 添加 container-type:scroll-state 和 stuck、snapped、scrollable 特性的 scroll-state() 查询 (#6402, #10784, #10796)
• 修正示例（不存在 container-type:style）
• 规定容器查询使用 flat tree (#5984)

自2021年12月21日首个公开工作草案以来的变更

• 将容器查询从 CSS Contain 3 移到本规范（#10433）
• 引用 CSS Fonts 4 中 <font-format> 和 <font-tech> 的定义，而不是在本规范中重复定义（#8110）
• 更新为使用新的解析算法名称和块产生式名称
• 修正了 <font-format> 语法中的拼写错误
• 修正了 font-tech 和 font-format 产生式中的多余空格（#7369）

Level 4 以来的新增内容

• 新增 @when 和 @else。
• 扩展supports 查询以通过font-tech() 和 font-format() 表达字体能力
• 扩展supports 查询以通过at-rule()表达 at-规则能力
• 将容器查询从[CSS-CONTAIN-3] 移入本规范。 （详见 CSS Containment 3 § A 变更，了解本特性的演进）
• 新增@supports-condition at-规则及相关 CSSSupportsConditionRule 接口。

致谢

@when 和 @else 规则 基于 Tab Atkins 的提案。

感谢 Adam Argyle、 Amelia Bellamy-Royds、 Anders Hartvoll Ruud、 Brian Kardell、 Chris Coyier、 Christopher Kirk-Nielsen、 David Herron、 Eric Portis、 Ethan Marcotte、 Florian Rivoal、 Geoff Graham、 Gregory Wild-Smith、 Ian Kilpatrick、 Jen Simmons、 Kenneth Rohde Christiansen、 Lea Verou、 Martin Auswöger、 Martine Dowden、 Mike Riethmuller、 Morten Stenshorne、 Nicole Sullivan、 Rune Lillesveen、 Scott Jehl、 Scott Kellum、 Stacy Kvernmo、 Theresa O’Connor、 Una Kravets 以及许多其他人为本规范做出的评论和贡献。