ネストされたコンテナクエリ — コンテナの中のコンテナ

ネストされたコンテナクエリ

実際のUIには、ダッシュボード内のサイドバー、ページ内のグリッド内のカードなど、コンテナの中にコンテナがあることがよくあります。名前付きコンテナにより、ネストされたクエリが予測可能で保守しやすくなります。

パターン

.dashboard {
  container: dashboard / inline-size;
}

.panel {
  container: panel / inline-size;
}

/* ダッシュボードレベルのレイアウト変更 */
@container dashboard (min-width: 1024px) {
  .dashboard-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
  }
}

/* パネルレベルのコンポーネント変更 */
@container panel (min-width: 400px) {
  .panel-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

解決の仕組み

子要素に@containerクエリがある場合：

1. ブラウザはDOMツリーを上方に走査し、一致するcontainer-nameを持つ祖先を探します。
2. 名前なしの場合、いずれかの包含を持つ最も近い祖先にマッチします。
3. 名前付きの場合、その名前を持たない祖先をスキップします。

独立性

パネルコンポーネントはダッシュボードの幅を気にしません。自身のコンテナの幅にのみ応答します。

よくある間違い

/* 名前なしだと、両方とも最も近い祖先にマッチ */
@container (min-width: 400px) { /* 常に.panelにマッチ */ }
@container (min-width: 1024px) { /* これも.panelにマッチ、.dashboardではない！ */ }

コンテナをネストする際は、曖昧さを避けるために常にcontainer-nameを使用してください。