CSSデモ1件

Container style queries

@container style()で祖先要素のカスタムプロパティの値を条件にスタイルを切り替えるCSSの仕組みです。テーマやコンテキストごとのスタイル分岐を子要素側で完結できます。

Container style queriesで親のテーマに追従するカード

ラジオで親の--csq-themeを切り替えると、途中のラッパーが値を上書きしていても名指しした親の値でカードの配色が変わる様子を確認できます。

親の--csq-themeを切り替えると、子の.csq-cardのスタイルが@container style()で追従します。途中のラッパーは--csq-theme: lightに固定していますが、container-nameで対象を親に固定しているので、深い子孫のカードも親の値で判定されます。

親の--csq-themeの値

lightdarksepia

親 (--csq-theme: light)

直近の子のカード

親の値に応じて色が変わります。

途中のラッパーは--csq-theme: lightに固定

深い子孫のカード

途中で上書きされていても、container-nameで親に固定しているので親の値で判定されます。