集装箱风格查询的初期

>容器查询仍处于起步阶段，缺乏广泛的浏览器支持。 尽管Chromium已经支持他们，但Safari的支持始于16版，而Firefox的实施很快就会。 早期讨论通常会在容器查询和媒体查询语法之间引起相似之处。 考虑以下示例：

两个示例目标

<code>/* 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;
  }
}</code>

。 但是，介质查询对视口宽度有反应，而容器查询响应

<code>/* 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;
  }
}</code>

>元素的计算宽度。

。 在此基础上，CSS封装模块3级规格介绍了min-width: 600px.posts容器样式查询

，允许查询容器的计算样式。 该规格将它们描述为单个样式特征的布尔组合，每个特征都查询特定属性。 语法，镜像CSS声明，如果计算属性值匹配指定值（也相对于容器计算），则评估为true，未知是否无效或不支持，否则为false。 布尔逻辑类似于CSS特征查询（

）。> 一个假设的例子：@supports

请注意，

（或它的缺席）是暗示的；所有容器查询默认情况下（当前）成为样式查询。 Miriam Suzanne的作品通过这种方法强调了潜在的挑战。

<code>.posts {
  container-name: posts;
}

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

查询容器样式的实际应用仍在出现，但潜在用途包括：

container-type: style

自定义属性值：

对用作状态指标的自定义属性的更改做出反应。

• 暗模式实现：基于身体背景的切换调色板更改。
• 复杂的查询条件：结合尺寸和样式条件。
• >容器样式查询还可以解决样式复杂性，例如在斜体化块中覆盖斜体文本：>

以上是集装箱风格查询的初期的详细内容。更多信息请关注PHP中文网其他相关文章！