CSS - @container

CSS 中的 @container at 规则是一种条件组规则，可用于将样式应用于容器中的内容。

概述

当指定的条件为 true 时，将应用为包含上下文定义的样式。
当容器的大小发生变化时，将对条件进行评估。
可以提供 container-name 来过滤查询容器集，以查找匹配的查询容器名称。它区分大小写且可选。
找到有效的查询容器后，将针对该查询容器评估 <container-condition> 中的每个容器功能。

语法


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

可能的值

@container规则可以具有以下值：

<container-condition>：列出一组特征，随着容器大小的变化，这些特征将针对查询容器进行评估。
<stylesheet>：包含一组 CSS 声明。

CSS @container - 容器查询中的逻辑关键字

可以使用以下逻辑关键字来定义容器条件：

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

请参阅示例示例以进行更多理解。


@container (width > 200px) and (height > 200px) {
	 	/* <stylesheet> */
}
	 	
@container (width > 200px) or (height > 200px) {
	 	/* <stylesheet> */
}
	 	
@container not (width < 200px) {
	 	/* <stylesheet> */
}

CSS @container - 命名包含上下文

可以使用 container-name 属性按以下方式命名包含的上下文：


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

如果要使用容器的简写容器：<name> / <type>，请遵循如下语法：


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

CSS @container - container-name 的命名限制

定义 <container-name> 应用以下条件：

可以在名称中使用任何有效的 <custom-ident>。
它不应等于默认值。
定义的名称不应放在引号中。
允许使用虚线标识在标识符中指定作者姓名，例如 --container-name。
允许使用空格分隔多个名称。

例

下面是 @container at 规则的示例。


<html>
<head>
<style>
	 	* {
	 	 	 box-sizing: border-box;
	 	}
	 	img {
	 	 	 max-width: 500px;
	 	 	 height: 400px;
	 	 	 display: block;
	 	}

	 	body {
	 	 	 font-size: 1.5em;
	 	}

	 	.wrapper {
	 	 	 display: grid;
	 	 	 grid-template-columns: 2fr 1fr;
	 	 	 gap: 30px;
	 	}

	 	.card {
	 	 	 background: black;
	 	 	 color: white;
	 	 	 border-radius: 40px;
	 	 	 display: grid;
	 	 	 max-width:400px;
	 	}

	 	.card .image {
	 	 	 border-radius: 40px;
	 	}

	 	.card .content {
	 	 	 padding: 10px;
	 	}

	 	.card h2 {
	 	 	 margin: 0;
	 	 	 padding: 10px;
	 	}

	 	/* make the two grid items a containment context */
	 	.first,
	 	.second{
	 	 	 container-type: inline-size;
	 	}

	 	/* the card is placed as a child of the two grid items, displaying as one or two columns 	*/
	 	@container (min-width: 500px) {
	 	 	 .card {
	 	 	 	 	grid-template-columns: 1fr 2fr;
	 	 	 	 	grid-template-rows: auto 1fr;
	 	 	 	 	align-items: start;
	 	 	 	 	column-gap: 20px;
	 	 	 	 	max-width:80%;
	 	 	 }
	 	
	 	 	 .card h2 {
	 	 	 	 	padding: 0;
	 	 	 	 	margin: .5em 0 0 0;
	 	 	 }

	 	 	 .card header {
	 	 	 	 	grid-row: 1;
	 	 	 	 	grid-column: 2;
	 	 	 }

	 	 	 .card .image {
	 	 	 	 	grid-row: 1 /3;
	 	 	 	 	grid-column: 1;
	 	 	 	 	height:100%;
	 	 	 }

	 	 	 .card .content {
	 	 	 	 	grid-column: 2;
	 	 	 	 	grid-row: 2;
	 	 	 	 	padding: 0 20px 20px 0;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="wrapper">
	 	<div class="second">
	 	 	 <article class="card">
	 	 	 <header>
	 	 	 	 	<h2>@container</h2>
	 	 	 </header>

	 	 	 <div class="image"><img src="images/red-flower.jpg"></div>

	 	 	 <div class="content">
	 	 	 	 	<p>@container rule applied on the card which makes it responsive when size of the container is changed</p>
	 	 	 </div>
	 	 	 </article>
	 	</div>
	 	<div class="first">
	 	<article class="card">
	 	 	 <header>
	 	 	 	 	<h2>@container</h2>
	 	 	 </header>

	 	 	 <div class="image"><img src="images/red-flower.jpg"></div>

	 	 	 <div class="content">
	 	 	 	 	<p>@container rule applied on the card which makes it responsive when size of the container is changed</p>
	 	 	 </div>

	 	</article>
	 	</div>
	 	</div>
</body>
</html>

在上面的例子中：

container-type 属性设置为 inline-size，因为包含应发生在 inline 轴上。
container-type 属性是在名为 .first class 的类上设置的，该类使容器元素成为可查询的容器。
.card 包含在 <article> 元素中，在其上应用 @container at-rule，因此每当包含元素的大小发生变化时，卡片就会发生变化。
断点的最小宽度为 500px，因此当容器的最小宽度为 500px 时，卡片将如示例中所示。
随着条件的变化，卡片的显示方式将有所不同。

容器查询让我们可以创建更强大且可重用的组件，这些组件几乎可以适应任何布局和容器，从而使网页的响应速度更快。

描述符或相关属性

下表列出了与@container 相关的所有描述符：

描述符/属性	描述
aspect-ratio	定义元素框的所需宽高比。
block-size	定义元素块的水平或垂直大小，具体取决于其写入模式。与元素的宽度有关。
height	设置元素框的高度。
inline-size	定义元素块的水平或垂直大小，具体取决于其写入模式。与元素的高度有关。
orientation	定义视区的方向。
width	设置元素框的宽度。

打印本页