ビューポートではなくコンテナに対してコンポーネントをレスポンシブにし、ネイティブなネスティングでスタイルシートを構造化しましょう。
このレッスンを Kodokon で開くメディアクエリはビューポートを測ります。狭いサイドバーとメインのグリッドの両方に表示されるカードは、メディアクエリでは正しく適応できません。同じ画面幅が2つの異なるコンテキストに対応するからです。コンテナクエリはこの分離を解決します。コンポーネントが自分のコンテナのサイズを問い合わせるのです。前提条件として、container-typeでコンテナを明示的に指定します（水平軸だけを測るinline-sizeが一般的なケース）。任意でcontainer-nameによって名前を付けられます。
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (min-width: 400px) {
.widget {
display: grid;
grid-template-columns: 80px 1fr;
gap: 12px;
}
}コンテナ単位が絵を完成させます。1cqiは問い合わせ先のコンテナのインラインサイズの1%に等しくなります（cqw、cqh、cqb、cqmin、cqmaxも存在します）。clamp()と組み合わせると、コンポーネントごとの流動的なタイポグラフィが生まれます。同じカードでも、どこに置かれても自分の列に見合った大きさのタイトルを得られます。
.card-slot {
container-type: inline-size;
}
.card h2 {
font-size: clamp(1rem, 5cqi, 1.75rem);
}
@container (max-width: 300px) {
.card .meta {
display: none;
}
}ネイティブなネスティングはついにプリプロセッサなしのネスティングをもたらします。&セレクタは親のコンテキストを参照し、メディアクエリと@containerはルールの中に直接ネストできます。Sassとの重要な違いは、ネストされた親が:is()で包まれたかのように扱われることです。帰結は2つあります。親がリストである場合、その詳細度は最も強いセレクタのものになります。そして& .childは文字列の連結を行いません。つまり、BEMの名前を生成するSassの&__elementパターンはネイティブには存在しません。
.menu {
display: flex;
gap: 8px;
& > li {
list-style: none;
&:hover {
background: #f3f4f6;
}
}
@media (min-width: 768px) {
gap: 16px;
}
}5cqiは何に相当しますか？