State of CSS 2022 を眺めていて知らなかったことのうち、@container
について調べた
@container
@containerはコンテナクエリといい、@media(メディアクエリ)と似た使い方になるが@mediaと異なる点は、ビューポートサイズではなく親コンポーネントサイズに基づいてスタイルを定義するということ
例えば、コンテンツの横幅が800px以上ならヒーローコンテンツに
600px以上なら横サムネイル型に
そうでない場合は縦カード型にするというような使い方ができる
これはめちゃくちゃ便利だと思った
FireFox以外のモダンブラウザでは使えるようなので注目したい