1. Web
  2. CSS
  3. container

container

Baseline 已廣泛支援

此特性已經非常成熟，可以在許多裝置和瀏覽器版本上使用。自 2023 年 2 月起，所有主流瀏覽器均已支援。

container 簡寫 CSS 屬性將元素設定為查詢容器，並指定在容器查詢中使用的包含上下文的名稱和型別。

構成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

css
/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

/* Global Values */
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;

值

<container-name>

包含上下文的名稱（區分大小寫）。有關語法的更多詳細資訊，請參見 container-name 屬性頁面。

<container-type>

包含上下文的型別。有關語法的更多詳細資訊，請參見 container-type 屬性頁面。

正式定義

初始值作為簡寫中的每個屬性
應用於所有元素
繼承性否
百分比作為簡寫中的每個屬性
計算值作為簡寫中的每個屬性
動畫型別作為簡寫中的每個屬性

正式語法

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

<container-name> = 
  none             |
  <custom-ident>+  

<container-type> = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]

示例

建立行內尺寸包含

給定以下 HTML 示例，它是一個包含影像、標題和一些文字的卡片元件

html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

建立容器上下文的顯式方法是宣告一個 container-type，帶有一個可選的 container-name

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

container 簡寫旨在使這更容易在一個宣告中定義

css
.post {
  container: sidebar / inline-size;
}

然後，您可以使用 @container 規則按名稱定位該容器

css
@container sidebar (width >= 400px) {
  /* <stylesheet> */
}

規範

規範
CSS 條件規則模組第五版
# 容器簡寫

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面由 MDN 貢獻者 最後修改於 。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題
© . Content available under a Creative Commons license.