CSS - @container

CSS 中的@container 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 - 命名包含上下文

可以使用container-name 属性以以下方式命名包含的上下文

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

如果您想使用container 的简写形式来表示container: <name> / <type>，请按照以下语法进行操作

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

CSS @container - container-name 的命名限制

以下条件适用于定义<container-name>

任何有效的<custom-ident> 都可以在名称中使用。
它不应等于default。
定义的名称不应放在引号中。
标识符中指定作者名称的短划线标识符（例如--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;
   }

   /* make the two grid items a containment context */
   .first,
   .second{
      container-type: inline-size;
   }

   /* the card is placed as a child of the two grid items, displaying as one or two columns  */
   @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="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="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	设置元素框的宽度。

打印页面