CSS @Rules

@container CSS 中的 at-rule 是一个条件组规则，可用于将样式应用于容器中的内容。

概述

  • 当指定的条件为真时，将应用为包含上下文定义的样式。

  • 当容器的大小发生变化时，将进行条件的评估。

  • 可以提供container-name来过滤查询容器集以查找匹配的查询容器名称。它区分大小写且可选。

  • 找到有效的查询容器后，将针对该查询容器评估 <container-condition> 中的每个容器功能。

语法

@container <container-condition> {
    <stylesheet> 
}

可能的值

@container at-rule 可以具有以下值:

  • <container-condition>:列出随着容器大小变化而针对查询容器进行评估的一组特性。

  • <stylesheet>:包含一组CSS的声明。

CSS @container 容器查询中的逻辑关键字

以下逻辑关键字可用于定义容器条件:

  • and:用于组合两个或多个条件。

  • or:用于组合两个或多个条件。

  • not:用于否定条件。每个容器查询只允许一个条件，并且不能与 and 或 or 关键字一起使用。

请参阅示例以获取更多理解。

@container (width > 200px) and (height > 200px) {
   /* <stylesheet> */
}
   
@container (width > 200px) or (height > 200px) {
   /* <stylesheet> */
}
   
@container not (width < 200px) { /* <stylesheet> */ }

CSS @container 命名容器上下文

可以使用容器名称属性来命名包含的上下文，具体方式如下:

.test-container {
   container-name: sidebar; 
   container-type: inline-size;
}

如果您想使用容器的简写容器:<name> / <type>，遵循如下语法:

.test-container {
   container: sidebar / inline-size; 
}

CSS @container 容器名称的命名限制

应用以下条件来定义 <container-name> :

  • 名称中可以使用任何有效的 <custom-ident>。

  • 它不应该等于默认值。

  • 定义的名称不应放在引号中。

  • 虚线标识指定作者姓名允许使用标识符，例如 --container-name。

  • 允许使用空格分隔多个名称。

示例

这是 @container at-rule 的示例。

<html>
<head>
<style>
   * {
      box-sizing: border-box;
   }
   img {
      max-width: 500px;
      height: 400px;
      display: block;
   }

   body {
      font-size: 1.5em;
   }

   .wrapper {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 30px;
   }

   .card {
      background: black;
      color: white;
      border-radius: 40px;
      display: grid;
      max-width:400px;
   }

   .card .image {
      border-radius: 40px;
   }

   .card .content {
      padding: 10px;
   }

   .card h2 {
      margin: 0;
      padding: 10px;
   }

   /* 使两个网格项成为包含上下文 */
   .first,
   .second{
      container-type: inline-size;
   }

   /* 该卡片被放置为两个网格项的子项，显示为一列或两列  */
   @container (min-width: 500px) {
      .card {
         grid-template-columns: 1fr 2fr;
         grid-template-rows: auto 1fr;
         align-items: start;
         column-gap: 20px;
         max-width:80%;
      }
   
      .card h2 {
         padding: 0;
         margin: .5em 0 0 0;
      }

      .card header {
         grid-row: 1;
         grid-column: 2;
      }

      .card .image {
         grid-row: 1 /3;
         grid-column: 1;
         height:100%;
      }

      .card .content {
         grid-column: 2;
         grid-row: 2;
         padding: 0 20px 20px 0;
      }
   }
</style>
</head>
<body>
   <div class="wrapper">
   <div class="second">
      <article class="card">
      <header>
         <h2>@container</h2>
      </header>

      <div class="image"><img src="/css/images/red-flower.jpg"></div>

      <div class="content">
         <p>@container rule applied on the card which makes it responsive when size of the container is changed</p>
      </div>
      </article>
   </div>
   <div class="first">
   <article class="card">
      <header>
         <h2>@container</h2>
      </header>

      <div class="image"><img src="/css/images/red-flower.jpg"></div>

      <div class="content">
         <p>@container rule applied on the card which makes it responsive when size of the container is changed</p>
      </div>

   </article>
   </div>
   </div>
</body>
</html>

在上面的示例中:

  • container-type 属性设置为 inline-size，因为包含应该发生在内联轴上。

  • container-type 属性设置在一个名为.first 类，它使容器元素成为可查询容器。

  • .card 包含在 <article> 元素中，在该元素上应用 @container at-rule，因此每当包含元素的大小发生变化，卡片也会发生变化。

  • 在 min-width 为 500px 处创建断点，因此当容器的 min-width 为 500px 时，卡片看起来像如示例中所示。

  • 随着条件的变化，卡片的显示方式也会有所不同。

容器查询让我们可以创建更强大和可重用的组件，可以适应几乎任何布局和容器，使网页响应更快。

描述符或相关属性

下表列出了与以下内容相关的所有描述符@container:

描述符/属性描述
aspect-ratio定义元素框所需的宽高比。
block-size定义元素块的水平或垂直尺寸，具体取决于其写入模式。与元素的宽度有关。
height设置元素的高度
inline-size定义框的水平或垂直尺寸元素的块，取决于其写入模式。与元素的高度相关。
orientation定义视口的方向.
width设置元素框的宽度。