@container

基线 2023

新发布

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

@container CSS at-规则是一个条件组规则，它将样式应用于包含上下文。样式声明通过条件进行筛选，如果条件为真，则应用于容器。当容器大小或 <style-feature> 值发生变化时，会评估条件。

该 container-name 属性指定一个查询容器名称列表。这些名称可以由 @container 规则使用，以筛选要定位的查询容器。可选的、区分大小写的 <container-name> 筛选由查询定位的查询容器。

一旦为元素选择了符合条件的查询容器，<container-condition> 中的每个容器功能都会针对该查询容器进行评估。

语法

@container at-规则具有以下语法

@container <container-condition> {
  <stylesheet>
}

例如

css

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}
/* with an optional <container-name> */
@container tall (height > 30rem) {
  h2 {
    line-height: 1.6;
  }
}

值

<container-condition>

可选的 <container-name> 和一个 <container-query>。如果条件为真，则应用在 <stylesheet> 中定义的样式。

<container-name>: 可选。容器的名称，当查询结果为真时，样式将应用于该容器，指定为一个 <ident>。
<container-query>: 一组功能，当容器的大小发生变化时，会针对查询容器进行评估。

<stylesheet>

一组 CSS 声明。

容器查询中的逻辑关键字

逻辑关键字可用于定义容器条件

and 组合两个或多个条件。
or 组合两个或多个条件。
not 否定条件。每个容器查询只允许一个 'not' 条件，并且不能与 and 或 or 关键字一起使用。

css

@container (width > 400px) and (height > 400px) {
  /* <stylesheet> */
}

@container (width > 400px) or (height > 400px) {
  /* <stylesheet> */
}

@container not (width < 400px) {
  /* <stylesheet> */
}

命名的包含上下文

可以使用 container-name 属性为包含上下文命名。

css

.post {
  container-name: sidebar;
  container-type: inline-size;
}

此处的简写语法是使用 container，形式为 container: <name> / <type>，例如

css

.post {
  container: sidebar / inline-size;
}

在容器查询中，container-name 属性用于筛选容器集，使其仅包含具有匹配的查询容器名称的容器。

css

@container sidebar (width > 400px) {
  /* <stylesheet> */
}

有关使用和命名限制的详细信息，请参阅 container-name 页面。

描述符

以下描述符可以在容器条件内使用

aspect-ratio: 容器的 aspect-ratio，计算为容器的宽度与高度之比，表示为 <ratio> 值。
block-size: 容器的 block-size，表示为 <length> 值。
height: 容器的高度，表示为 <length> 值。
inline-size: 容器的 inline-size，表示为 <length> 值。
方向: 容器的方向，可以是 landscape 或 portrait。
width: 容器的宽度，表示为 <length> 值。

示例

根据容器的大小设置样式

考虑以下示例，其中一个卡片组件包含标题和一些文本

html

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

可以使用 container-type 属性创建容器上下文，在本例中，使用 .post 类上的 inline-size 值。然后，可以使用 @container 规则为宽度小于 650px 的容器中 .card 类的元素应用样式。

const post = document.querySelector(".post");
const span = document.createElement("span");
span.textContent = ".post width: " + post.clientWidth + "px";
post.parentNode.insertBefore(span, post.nextSibling);
// update on resize
window.addEventListener("resize", () => {
  span.textContent = ".post width: " + post.clientWidth + "px";
});

span {
  display: block;
  text-align: center;
}
.card {
  margin: 10px;
  border: 2px dotted;
  font-size: 1.5em;
}
.post {
  border: 2px solid;
}

css

/* 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;
  }
}

创建命名容器上下文

以下 HTML 示例是一个带有标题和文本的卡片组件

html

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

首先，使用 container-type 和 container-name 属性创建容器上下文。此声明的简写语法在 container 页面中描述。

css

.post {
  container-type: inline-size;
  container-name: summary;
}

接下来，通过在容器查询中添加名称来定位该容器

css

@container summary (min-width: 400px) {
  .card {
    font-size: 1.5em;
  }
}

嵌套容器查询

无法在单个容器查询中定位多个容器。可以嵌套容器查询，这具有相同的效果。

以下查询如果名为 summary 的容器宽度大于 400px 并且具有宽度大于 800px 的祖先容器，则将评估为 true 并应用声明的样式。

css

@container summary (min-width: 400px) {
  @container (min-width: 800px) {
    /* <stylesheet> */
  }
}

容器样式查询

实验性： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

容器查询还可以评估容器元素的计算样式。容器样式查询 是一个使用一个或多个 style() 函数符号的 @container 查询。布尔语法和将样式功能组合到样式查询中的逻辑与 CSS 特性查询相同。

css

@container style(<style-feature>),
    not style(<style-feature>),
    style(<style-feature>) and style(<style-feature>),
    style(<style-feature>) or style(<style-feature>) {
  /* <stylesheet> */
}

每个 style() 的参数都是一个 <style-feature>。<style-feature> 是一个有效的 CSS 声明、CSS 属性或 <custom-property-name>。

css

@container style(--themeBackground),
    not style(background-color: red),
    style(color: green) and style(background-color: transparent),
    style(--themeColor: blue) or style(--themeColor: purple) {
  /* <stylesheet> */
}

如果没有值的样式功能，如果计算值不同于给定属性的初始值，则评估为 true。

如果作为 style() 函数参数传递的 <style-feature> 是一个声明，则如果声明的值与正在查询的容器该属性的计算值相同，则样式查询将评估为 true。否则，它将解析为 false。

以下容器查询检查容器元素的 --accent-color 的 computed_value 是否为 blue

css

@container style(--accent-color: blue) {
  /* <stylesheet> */
}

注意： 如果自定义属性的值为 blue，则等效的十六进制代码 #0000ff 将不匹配，除非该属性已使用 @property 定义为颜色，以便浏览器可以正确比较计算值。

查询简写属性的样式功能如果其所有长写属性的计算值匹配，则为 true，否则为 false。例如，@container style(border: 2px solid red) 如果组成该简写的所有 12 个长写属性（border-bottom-style 等）为 true，则将解析为 true。

全局 revert 和 revert-layer 在 <style-feature> 中作为值无效，会导致容器样式查询为 false。

规范

规范
CSS Containment 模块级别 3 # container-rule

浏览器兼容性

BCD 表格仅在浏览器中加载