CSS 容器查询 CSS Container Queries

CSS 容器查询的主要思想是将一个元素注册为“容器”，并在容器元素满足某些条件时将样式应用于其他元素。

容器查询通常被认为是响应式网页设计的一种现代方法，其中传统媒体查询长期以来一直是黄金标准 - 原因是我们可以创建由响应容器宽度而不是视口宽度的元素组成的布局。

.parent {
  container-name: hero-banner;
  container-type: inline-size;

  /* or container: hero-banner / inline-size; */
}

}

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

/* When the container is greater than 60 characters... */
@container hero-banner (width > 60ch) {
  /* Change the flex direction of the .child element. */
  .child { 
    flex-direction: row;
  }
}

将元素注册为容器

.cards {
  container-name: card-grid;
  container-type: inline-size;

  /* Shorthand */
  container: card-grid / inline-size;
}

此示例注册了一个名为的新容器card-grid，可以通过其 进行查询inline-size，这是在水平书写模式下表示其“宽度”的一种奇特方式。它是一个逻辑属性。否则，“inline”将指垂直书写模式下容器的“高度”。

• 该container-name属性用于将元素注册为容器，并根据容器的大小和样式将样式应用于其他元素。

• 该container-type属性用于将一个元素注册为一个容器，当满足某些条件时，可以将样式应用于其他元素。

• 属性是将和属性组合成单个声明container的简写。container-namecontainer-type

查询容器

@container my-container (width > 60ch) {
  article {
    flex-direction: row;
  }
}

• at @container-rule 属性通知浏览器我们正在使用容器查询，而不是媒体查询（即@media）。

• 其中的my-container部分指的是容器的名称，如容器的container-name属性中所声明的。

• 元素article代表容器中的项目，无论它是容器的直接子元素还是进一步的祖先元素。无论哪种方式，元素都必须位于容器中，并且当查询条件匹配时，它将获得应用于它的样式。

容器查询属性和值

container-name: none | <custom-ident>+;

• none： 元素没有容器名称。默认情况下，这是正确的，因此您可能永远不会使用此值，因为它的目的纯粹是设置属性的默认行为。
• <custom-ident>： 这是容器的名称，可以是任何名称，除了为其他功能保留的字词，包括 default、  none、  at、 no和 or。请注意，名称不包含在引号中。

container-type: normal | size | inline-size;

• normal： 这表示元素是一个容器，可以通过其样式而不是大小进行查询。 从技术上讲，所有元素默认都是容器，因此我们甚至不需要明确分配 container-type 来定义样式容器。
• size： 如果我们想根据大小查询容器，无论我们谈论的是内联方向还是块方向。
• inline-size： 这允许我们通过其内联大小来查询容器，这相当于 标准水平书写模式。这可能是最常用的值，因为我们可以根据元素大小而不是视口大小（如我们通常使用媒体查询width 时所做的那样）来建立响应式设计 。

container: <'container-name'> [ / <'container-type'> ]?

　　如果 <'container-type'> 省略，则将其重置为初始值， normal该值定义样式容器而不是大小容器。换句话说，所有元素默认都是样式容器，除非我们明确将属性 container-type 值设置为 size 或， inline-size 这允许我们查询容器的大小尺寸。

容器宽度和高度单位

容器逻辑方向

容器最小和最大长度

容器样式查询

size容器样式查询是 CSS 容器查询拼图的另一部分。我们不必通过或来查询容器inline-size，而是可以查询容器的 CSS 样式。当容器的样式满足查询条件时，我们可以将样式应用于其他元素。这是我们长期以来在网络上想要的那种“条件”样式：如果这些样式在这里匹配，那么就在那里应用这些其他样式。

在撰写本文时，CSS 容器样式查询仅作为现代 Web 浏览器中的一项实验性功能提供，即便如此，样式查询也只能评估 CSS 自定义属性（即变量）。

注册样式容器

article {
  container-name: card;
}

　　就是这样！实际上，除非我们需要专门针对它，否则我们甚至不需要该container-name属性。否则，我们可以完全跳过注册容器。

如果你想知道为什么没有container-type声明，那是因为所有元素都已被视为容器。这很像所有元素的position: relative默认情况；无需声明。我们声明的唯一原因container-type是我们想要 CSS 容器大小查询而不是 CSS 容器样式查询。

因此，实际上，没有必要注册容器样式查询，因为所有元素都已经是现成的样式容器！我们声明 的唯一原因container-name只是为了在编写样式查询时帮助按名称选择特定容器。

使用样式容器查询

@container style(--bg-color: #000) {
  p { color: #fff; }
}

　　在这个例子中，我们查询任何匹配的容器（因为默认情况下所有元素都是样式容器）。

注意到它的语法与传统的媒体查询非常相似吗？最大的区别是我们写的@container是 而不是@media。另一个区别是我们调用了一个style()保存匹配样式条件的函数。这样，​​样式查询与尺寸查询就区分开来了，尽管没有相应的size()函数。

在此例中，我们检查某个自定义属性是否--bg-color设置为黑色 ( #000)。如果变量的值符合该条件，则我们将段落 ( p) 文本设置color为白色 ( #fff)。

自定义属性和变量

.card-wrapper {
  --bg-color: #000;
}
.card {
  @container style(--bg-color: #000) {
    /* Custom CSS */
  }
}

嵌套样式查询

@container style(--featured: true) {
  article {
    grid-column: 1 / -1;
  }
  @container style(--theme: dark) {
    article {
      --bg-color: #000;
      --text: #fff;
    }
  }
}