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

Question

我正在寻找如何container-type: inline-size;通过查询修改元素（不在子元素中）的CSS中的属性的解决方案@container。

考虑 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;
  }
}

如何修改上面的示例以background-color在.card不更改 HTML 标记的情况下进行更改？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 容器查询示例
• 这里有一些更好的例子