テーマでコンテナクエリ？

開発
1

プラグインやネイティブのDiscourseではこれらを見かけましたが、テーマでは見かけませんでした（例はありますか？）。テーマでは、.scssで@containerはサポートされていますか？

これは通過するようです。例：

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

image

:+1:

しかし、@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にする必要があるようです。

テーブルと、それ以外はほとんど同じであるdivの2つの同一のコンテナを作成したペンを作成しました。

コンテナクエリはテーブルでは失敗しますが、それ以外はほとんど同じであるdivでは成功します。

ここでの最終的な解決策は、コンテナをdivである#list-areaに移動したことです。これにより問題が解決しました！

これを見ていただき、本当に感謝しています。テーマでも（機能する範囲で）動作することを確認できたことで、非常に重要な後押しを得られました！

「いいね！」 1
5

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