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	設定元素框的寬度。

列印頁面