コンテナクエリは現時点でまだ使えない（caniuse）が、Googleからポリフィルが公開されたのでメモ。
ポリフィルだとFOUCと呼ばれる現象が起こるため、実用上はまだ使わないほうがいいという段階らしい。
正式な公開を待つ感じ。
ソース
以下のHTMLに対してCSSを定義する。
サンプルではdl直下にdivを置いてdt,ddを括っており、あれ？と思ったけど調べてみたら現在はこれはありとのこと（一部バリデーターによってはエラーを返す場合もあるらしい）なので、自分としてはたぶんこういうソースは書かないけど、サンプルの構造をそのまま流用。
<div class="parent-container">
<dl class="child-container">
<div>
<dt>タイトル１</dt>
<dd>
値1
</dd>
</div>
<div>
<dt>タイトル２</dt>
<dd>
値2
</dd>
</div>
</dl>
</div>.parent-containerを親として横幅300pxで切り替えを行う
/* 切り替えの基準とする親コンテナを定義 */
.parent-container {
container-type: inline-size;
container-name: parent-wrapper;
/* ショートハンド */
/* container: inline-size / parent-wrapper;*/
}
/* 子コンテナを定義 */
.child-container {
display: flex;
}
/* .parent-containerを親として横幅300pxで切り替えを行う */
@container parent-wrapper size(max-width: 300px) {
/* 上記条件下では以下のスタイルを適用 */
.child-container {
flex-direction: column;
}
}
/* 見やすくするためのスタイル 実装には不要 */
dt {
margin: 1px;
padding: 5px;
background-color: grey;
color: white;
text-align: center;
}
dd {
margin: 1px;
padding: 5px;
background-color: lightgrey;
text-align: center;
}ポリフィル
const supportsContainerQueries = "container" in document.documentElement.style;
if (!supportsContainerQueries) {
import("https://cdn.skypack.dev/container-query-polyfill");
}