主题中的容器查询？

开发
1

我在插件和原生 Discourse 中见过这些，但在主题中没有（有示例吗？）。它们是否受支持？

在主题中，.scss 是否支持 @container？

这似乎可以通过，例如：

.side-by-side {
  container-type: inline-size;
  container-name: side-by-side;
}

image

但 @container 不行——尽管满足容器查询条件，但其中的 CSS 似乎消失了。

@container side-by-side (min-width: 500px) {
  .side-by-side {
     tbody {
2 个赞
2

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

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

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

来自 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 的容器：

image
image816×177 12.3 KB

高于 400px 的容器：

image
image1002×185 13.4 KB

3 个赞
3

谢谢你关注此事！也谢谢你的确认，

哦！

确实如此！:cry:

2 个赞
4

我发现问题所在了：容器不能是表格，看起来它们必须是 div。

我创建了一个 pen，其中包含两个完全相同的容器，只是其中一个是表格。

容器查询在表格上失败，但在几乎相同的 div 上却成功了。

最终的解决方案是将容器移到 #list-area，这是一个 div，这就解决了我的问题！

非常感谢您对此的关注，因为确认它（在一定程度上）应该能在主题中正常工作，给了我那至关重要的额外动力！

1 个赞
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.