CSSContainerRule: containerName 属性

基线 2023

新可用

2023 年 2 月起,此功能在最新的设备和浏览器版本中均可使用。此功能可能无法在较旧的设备或浏览器中使用。

只读的 containerName 属性是 CSSContainerRule 接口的属性,它表示与关联的 CSS @container at-rule 关联的容器名称。

例如,以下 @containercontainerName 值为 sidebar

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

包含 container-name 的字符串,该字符串与此 CSSContainerRule 关联的 @container 相关。如果 @container 没有 命名,则该函数将返回空字符串 ("")。

示例

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

首先,我们定义一个包含在 post 中的 card (<div>) 的 HTML。

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

容器元素的 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>

以下代码使用其 id 获取与示例关联的 HTMLStyleElement,然后使用其 sheet 属性获取 StyleSheet。从 StyleSheet 中,我们获取添加到该表中的 cssRules 集合。由于我们上面将 @container 添加为第三条规则,因此我们可以使用 cssRules 中的第三项(索引“2”)访问关联的 CSSContainerRule。最后,我们记录容器名称和查询属性(不显示执行日志记录的代码)。

js
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}"`);

示例输出如下所示。日志部分列出了容器名称字符串。卡部分的标题应该在页面宽度超过 700px 时加倍。

规范

规范
CSS 包含模块级别 3
# dom-csscontainerrule-containername

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅