CSSContainerRule

基线 2023

新发布

自 2023 年 2 月起，此功能在最新的设备和浏览器版本上均有效。此功能可能在旧设备或浏览器上无法正常运行。

CSSContainerRule 接口表示单个 CSS @container 规则。

此类型的对象可用于获取 @container 的查询条件，以及定义的容器名称（如果有）。请注意，容器名称和查询共同定义了“条件文本”，可以使用 CSSConditionRule.conditionText 获取。

实例属性

从其祖先 CSSConditionRule、CSSGroupingRule 和 CSSRule 继承属性。

CSSContainerRule.containerName 只读: 返回表示 @container 名称的字符串，或空字符串。
CSSContainerRule.containerQuery 只读: 返回表示用于确定是否应用关联 @container 中的样式的一组功能或“容器条件”的字符串。

实例方法

没有特定方法；从其祖先 CSSConditionRule、CSSGroupingRule 和 CSSRule 继承方法。

示例

无名容器规则

下面的示例定义了一个无名 @container 规则，并显示关联的 CSSContainerRule 的属性。CSS 与根据容器大小设置样式的 @container 示例中的相同。

代码的第一部分只是为记录容器规则属性创建一个列表，以及一个 JavaScript log() 方法来简化添加属性。

html

<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。

html

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

下面显示了示例的 CSS。如相应的 @container 示例中所述，容器元素的 CSS 指定了容器的类型。如果宽度小于 650px，则 @container 会将新的宽度、字体大小和背景颜色应用于卡片。

html

<style id="examplestyles">
  /* 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 中，我们获取添加到该 sheet 的 cssRules 集。由于我们在上面将 @container 添加为第二个规则，因此我们可以使用 cssRules 中的第二个条目（索引为“1”）访问关联的 CSSContainerRule。最后，我们记录 containerName、containerQuery 和 conditionText（继承）属性。

const exampleStylesheet = document.getElementById("examplestyles").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}"`);

注意：此示例的样式是在具有 ID 的内联 HTML style 元素中定义的，以便代码可以轻松找到正确的 sheet。您也可以通过索引针对文档长度（例如 document.styleSheets[document.styleSheets.length-1]）来找到每个示例的正确 sheet，但这会使每个示例的正确 sheet 变得更复杂。

示例输出如下所示。日志部分列出了 containerName，这是一个空字符串，因为没有定义任何名称。containerQuery 和 conditionText 字符串也被记录，并且具有相同的值，因为没有定义任何名称。卡片的背景应该改变，并且当页面的宽度通过 650px 过渡时，卡片的背景应该改变。

命名容器规则

下面的示例定义了一个命名 @container 规则，并显示关联的 CSSContainerRule 的属性。CSS 与创建命名容器上下文的 @container 示例中的非常相似。

<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（示例没有显示日志代码，因为这与前面的示例相同）。

html

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

如 @container 中所述，容器元素的 CSS 指定了容器的类型，并且还可以为容器指定一个名称。卡片具有默认的字体大小，如果最小宽度大于 700px，则会被命名为 sidebar 的 @container 覆盖。

html

<style id="examplestyles">
  .post {
    container-type: inline-size;
    container-name: sidebar;
  }

  /* Default heading styles for the card title */
  .card h2 {
    font-size: 1em;
  }

  @container sidebar (min-width: 700px) {
    .card {
      font-size: 2em;
    }
  }
</style>

获取 sheet 和规则的代码与前面的示例几乎相同。唯一的区别是，在这个示例中，我们有三个 CSS 规则，因此要获取关联的 CSSContainerRule，我们获取 cssRules 中的第三个条目。

const exampleStylesheet = document.getElementById("examplestyles").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 时，卡片部分中的标题应该加倍。

规范

规范
CSS Containment 模块级别 3 # the-csscontainerrule-interface

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

CSS container-name、container-type 和 container 简写属性
CSS 包含模块
容器查询
使用容器大小和样式查询