なんだか最近、いや結構前から知らないCSSを見かけるな…トレンドを置いてかれていると感じたため、学習用に最新のモダンCSSをまとめてみます。
コンテナクエリ
メディアクエリはデバイス画面幅でスタイルを適用するものですが、コンテナクエリは要素のコンテナ幅等に応じてスタイルを適用できます。
適用したい要素にcontainer-typeプロパティを追加し、size、inline-size、normalのいずれかの値を指定します。
値の種類
size
横軸・縦軸とも対象
inline-size
横軸が対象
normal
デフォルト値。コンテナサイズクエリのクエリコンテナではなく、コンテナスタイルクエリのクエリコンテナとして残る。
See the Pen Untitled by 山﨑恵 (@moco2-design) on CodePen.
.containerの横幅を基準として、
３００px以上のコンテナサイズの時に画像を表示、文字は横並び(display:flex)のレイアウト、
それ以下の場合は画像は非表示、文字は縦並びになるように切り分けが出来ました。
コンテナクエリでは、メディアクエリよりも柔軟なレイアウト調整が可能なのかな？という感想です。
補足
コンテナクエリはcontainer-typeプロパティを指定した要素の子要素に効きます。
基準となる親要素（今回の場合.container）のみに値を指定しても効かないので、この点注意です。