コンテナクエリがテーマで機能することを確認するために簡単なテストを行いました。ただし、メディアクエリよりも理解するのがはるかに難しい点に注意してください。チームの数人が当初これを混乱していました。
これらは単なるコンテナのメディアクエリではなく、独自の要件セットがあります。最大の課題は次のとおりです。
サイズの包含は、要素がコンテンツからサイズ情報を取得する能力を無効にします。これは、無限ループを回避するためにコンテナクエリにとって重要です。
したがって、動的な幅を持つコンテナでコンテナクエリを使用することはできません。コンテナに固定幅を設定する必要があります。残念ながら、これにより、期待できることの範囲が大幅に制限されます。
機能することを示す、非常に奇妙な概念実証を次に示します
@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を超えるコンテナ：
