主题中的容器查询?

我刚做了一个快速测试,可以确认容器查询在主题中有效……我注意到的一点是,它们比媒体查询更难理解。我们团队中的几个人最初对此感到困惑。

它们不仅仅是容器上的媒体查询,而是有一套单独的要求。最大的问题是:

尺寸容器会关闭元素从其内容获取尺寸信息的能力,这对于容器查询避免无限循环很重要。

来自 container-type - CSS | MDN

因此,您不能将容器查询与具有动态宽度的容器一起使用。您必须为容器设置静态宽度。不幸的是,这极大地限制了您期望能够用它们实现的功能。

这是一个非常有趣的演示概念,展示了它们的工作原理
@media screen and (min-width: 500px) {
  .fk-d-button-tooltip {
    width: 300px;
    background: green;
    container-type: inline-size;
  }
}

@media screen and (min-width: 1000px) {
  .fk-d-button-tooltip {
    width: 500px;
    background: yellow;
    container-type: inline-size;
  }
}

@container (min-width: 400px) {
  #create-topic {
    background: blue !important;
  }
}

低于 400px 的容器:

高于 400px 的容器: