如何通过@container查询修改容器类型为inline size的元素的CSS属性

Question

我正在寻找如何通过@container查询修改具有container-type: inline-size;(而不是子元素(的元素在css中的属性的解决方案。

考虑HTML

<div class="card card--1">
<h2 class="card__title">
card 1 title
</h2>
<p class="card__body">
lorem ipsum
</p>
</div>
<div class="card card--2">
<h2 class="card__title">
card 2 title
</h2>
<p class="card__body">
lorem ipsum
</p>
</div>

和CSS

.card {
container-type: inline-size;
background-color: antiquewhite;
}
.card--1 {
width: 200px;
}
.card--2 {
width: 300px;
}
@container (min-width: 250px) {
.card {
/* do not work */
background-color: aqua;
}
.card__title {
/* works fine */
color: red;
}
}

如何在不更改HTML标记的情况下修改上述示例以更改.card中的background-color？codesandbox中的工作示例。

Answer 1

容器查询仍然是一个实验性特性，尚未广泛实现。

使用容器查询，您无法更改容器元素本身的样式。你只能改变孩子们的风格。

使用css容器查询，我们可以将元素定义为容器。我们将以一种"；媒体查询"；。因此，您只能在"；媒体查询"；。

我希望可以对容器本身进行样式设置。这对于web组件来说将是非常棒的。

仍然可以实现您想要的，但是您需要添加一些额外的标记。您需要添加一个额外的"；包装器"；在你的集装箱里。

因此，在已经有你的样式的元素周围，添加一个新的div(例如<div class="card-container">，它实际上只能作为你的卡的容器。然后你可以在css中使包装器div成为你的容器，然后相应地为你的卡设置样式。

类似于：

<div class="card-container">
<div class="card card--1">
<h2 class="card__title">
card 1 title
</h2>
<p class="card__body">
lorem ipsum
</p>
</div>
</div>

并且在您的css中：

.card-container {
container-type: inline-size;
}
@container (min-width: 250px) {
.card {
...
}
}

您可以在此处查看浏览器支持情况：https://caniuse.com/css-container-queries

这里有一些关于它的好信息：

• MDN上的容器查询
• dev.top上的CSS容器查询示例
• 这里还有一些好例子

Answer 2

为此使用伪元素：

.card {
container-type: inline-size;
background-color: antiquewhite;
z-index: 0;
position: relative;
}
.card--1 {
width: 200px;
}
.card--2 {
width: 300px;
}
@container (min-width: 250px) {
.card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: aqua;
}
.card__title {
/* works fine */
color: red;
}
}

<div class="card card--1">
<h2 class="card__title">
card 1 title
</h2>
<p class="card__body">
lorem ipsum
</p>
</div>
<div class="card card--2">
<h2 class="card__title">
card 2 title
</h2>
<p class="card__body">
lorem ipsum
</p>
</div>