container query

今後media queryの代わりになる。

親の先祖要素の変化に応じて子要素を変化させる機能。

mediaQueryだけだと、画面幅だけ見る形になるので、２カラムや３カラムなど画面の作りによって画面幅は大きいが表示幅が狭い領域に何かデザインを適用する場合にデザインが崩れるなどの問題が発生した。

それを解決してくれる。

container-type

親要素に指定するプロパティ、基本的には横方向なので「inline-size」を指定する。（縦方向ならsizeだがあまり使わない。）

container-name

複数入れ子になっていた場合に、どのコンテナーを基準とするか指定できる。

注意点

幅指定するが、borderやpaddingを除いたコンテンツ領域が対象となる。（box-sizing:border-boxが最近は基本で、この指定をした場合の話）

cqw

新しい単位。コンテナを100とした基準値。