早期的容器样式查询

对于容器查询，我们仍处于 suuuuuper 的早期阶段。 广泛的浏览器支持还为时过早，但 Chromium 已经支持它，Safari 从版本 16 开始支持它，而 Firefox 大概是 不落后.

大多数早期围绕容器查询的对话通常将语法与媒体查询进行比较。

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

这两个都在查询 min-width: 600. 不同之处在于媒体查询正在查看视口的宽度以触发这些样式更改，而容器查询正在查看计算出的宽度 .posts 元素。 甜的！

但是听完之后 CSS 播客第 59 集, Una 和 Adam 探讨了容器查询的未来： 样式查询！ CSS Containment Module Level 3 规范的当前工作草案 定义容器样式查询:

A 容器样式查询 允许查询 计算值 的 查询容器. 它是个体的布尔组合 风格特征 () 表示每个查询查询容器的单个特定属性。

但是目前还没有关于语法的例子——只有一个简短的描述：

的语法  与 a 相同 声明, 如果查询容器上给定属性的计算值与给定值匹配（这也是相对于查询容器计算的），则它的查询为真，如果属性或其值无效或不受支持，则为未知，否则为假. 布尔语法和逻辑结合 风格特征 成 样式查询 是一样的 CSS 特征查询。 （见 @支持.)

所以，是的，给定时间我们应该期望完成这样的事情：

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

这是一个非常愚蠢的例子。 需要注意的一件事是， container-type 不再基于容器的 inline-size 但是 style. 我们可以这样处理：

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…但 所有容器查询都是 style 默认查询. 出色地。 至少现在是这样。 Miriam Suzanne 有一个不错的 可能出现的问题概述 接着就，随即。

查询容器的样式在哪里可以派上用场？ 我还不知道！ 但我的想法转到了几个地方：

• 自定义属性值： 我们已经看到了像状态指示器这样使用的自定义属性，例如 DRY-switching 方法 Ana 不久前介绍过. 值会发生变化，样式也会发生变化。
• 备用暗模式方法： 与其完全基于重新分配自定义属性值的主体类更改，也许我们可以更改整个调色板，例如，如果主体背景改变颜色。
• 更复杂的查询条件： 比如说，我们想在 size 和 style 满足容器的条件。

Una 在 CSS Podcast 中还提到容器样式查询可以帮助防止一些尴尬的样式情况，例如如果我们碰巧在已经斜体的文本中有斜体文本 blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}