CSSContainerRule: containerQuery 属性
CSSContainerRule
接口的只读 containerQuery
属性返回一个字符串,表示当容器大小发生变化时评估的容器条件,以确定是否应用与关联的 @container
相关的样式。
例如,以下 @container
的 containerQuery
值为 (min-width: 700px)
css
@container sidebar (min-width: 700px) {
.card {
font-size: 2em;
}
}
值
包含容器查询的字符串。
请注意,该值可能与原始字符串不完全相同,因为可能发生规范化操作,例如删除空格。
示例
以下示例定义了一个未命名的 @container
规则,并显示了关联的 CSSContainerRule
的属性。CSS 与 @container
示例 @container
示例 中的相同 根据容器大小设置样式。
首先,我们为包含在 post
中的 card
(<div>
) 定义 HTML。
html
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
容器元素的 CSS 指定了容器的类型。然后,@container
在宽度小于 650 像素时,将新的宽度、字体大小和背景颜色应用于包含的元素“card”。
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
。最后,我们记录容器名称和查询属性。
js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
示例输出显示如下。日志部分列出了查询字符串。卡的背景应发生变化,并且当页面的宽度在 650 像素处过渡时,卡的背景应发生变化。
规范
规范 |
---|
CSS 包含模块级别 3 # dom-csscontainerrule-containerquery |
浏览器兼容性
BCD 表仅在启用了 JavaScript 的浏览器中加载。