CSSContainerRule
Baseline 廣泛可用 *
CSSContainerRule 介面代表一個單獨的 CSS @container 規則。
此型別的物件可用於獲取 @container 的查詢條件，以及已定義的容器名稱（如果存在）。請注意，容器名稱和查詢一起定義了“條件文字”，可以使用 CSSConditionRule.conditionText 獲取。
例項屬性
繼承其祖先 CSSConditionRule、CSSGroupingRule 和 CSSRule 的屬性。
CSSContainerRule.containerName只讀-
返回一個字串，表示
@container的名稱，如果未定義名稱則返回空字串。 CSSContainerRule.containerQuery只讀-
返回一個字串，表示用於確定是否應用相關
@container中樣式的特徵集或“容器條件”。
例項方法
無特定方法；繼承其祖先 CSSConditionRule、CSSGroupingRule 和 CSSRule 的方法。
示例
未命名容器規則
下面的示例定義了一個未命名的 @container 規則，並顯示了相關 CSSContainerRule 的屬性。CSS 與 @container 示例 根據容器大小設定樣式 中的相同。
程式碼的第一部分僅建立一個列表來記錄容器規則的屬性，以及一個 JavaScript log() 方法以簡化屬性的新增。
<div id="log">
<h2>Log</h2>
<ul></ul>
<hr />
</div>
// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
const listItem = document.createElement("li");
listItem.textContent = result;
logList.appendChild(listItem);
}
然後，我們定義了一個包含在 post 中的 card（<div>）的 HTML。
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
示例的 CSS 如下所示。如對應的 @container 示例中所述，容器元素的 CSS 指定了容器的型別。@container 然後在 card 的寬度小於 650px 時，為其應用新的寬度、字型大小和背景顏色。
<style id="example-styles">
/* A container context based on inline size */
.post {
container-type: inline-size;
}
/* Apply styles if the container is narrower than 650px */
@container (width < 650px) {
.card {
width: 50%;
background-color: gray;
font-size: 1em;
}
}
</style>
下面的程式碼透過 ID 獲取與示例相關的 HTMLStyleElement，然後使用其 sheet 屬性獲取 StyleSheet。從 StyleSheet 中，我們獲取新增到該樣式表中的 cssRules 集合。由於我們將 @container 新增為上面的第二條規則，因此我們可以透過 cssRules 中索引為“1”的第二項來訪問相關的 CSSContainerRule。最後，我們記錄 containerName、containerQuery 和 conditionText（繼承的）屬性。
const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
注意：本例的樣式定義在一個內聯 HTML style 元素中，並帶有 ID，以便程式碼能夠輕鬆找到正確的樣式表。您也可以透過索引（例如 document.styleSheets[document.styleSheets.length-1]）來從文件中定位每個示例的正確樣式表，但這會使每個示例的正確樣式表的工作變得更加複雜。
下面顯示了示例輸出。日誌部分列出了 containerName，由於未定義名稱，因此為空字串。containerQuery 和 conditionText 字串也會被記錄，並且因為未定義名稱而具有相同的值。當頁面寬度在 650px 處過渡時，card 的背景應該會發生變化。
命名容器規則
下面的示例定義了一個命名的 @container 規則，並顯示了相關 CSSContainerRule 的屬性。CSS 與 @container 示例 建立命名容器上下文 中的非常相似。
首先，我們定義了一個包含在 post 中的 card（<div>）的 HTML（示例未顯示日誌記錄程式碼，因為這與上一個示例相同）。
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
如 @container 中所述，容器元素的 CSS 指定了容器的型別，並且還可以為容器指定一個名稱。card 有一個預設的字型大小，如果最小寬度大於 700px，則對於名為 sidebar 的 @container 會覆蓋該字型大小。
<style id="example-styles">
.post {
container-type: inline-size;
container-name: sidebar;
}
/* Default heading styles for the card title */
.card h2 {
font-size: 1em;
}
@container sidebar (width >= 700px) {
.card {
font-size: 2em;
}
}
</style>
獲取樣式表和規則的程式碼與上一個示例幾乎相同。唯一不同的是，在本例中我們有三條 CSS 規則，因此要獲取相關的 CSSContainerRule，我們獲取 cssRules 中的第三項。
const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
下面顯示了示例輸出。日誌部分列出了 containerName 和 containerQuery 字串。conditionText 也會被記錄，並顯示了這兩個字串的組合。當頁面寬度超過 700px 時，card 部分的標題應該會翻倍。
規範
| 規範 |
|---|
| CSS 條件規則模組第五版 # the-csscontainerrule-interface |
瀏覽器相容性
載入中…
另見
- CSS
container-name、container-type和container簡寫屬性 - CSS 遏制模組
- 容器查詢
- 使用容器大小和樣式查詢