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 遏制模块
- 容器查询
- 使用容器大小和样式查询