CSSContainerRule: containerName 属性
只读的 containerName
属性是 CSSContainerRule
接口的属性,它表示与关联的 CSS @container
at-rule 关联的容器名称。
例如,以下 @container
的 containerName
值为 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 表仅在浏览器中加载
另请参阅
- CSS
container
简写属性 - CSS 包含模块
- 容器查询
- 使用容器大小和样式查询