Container Queries

概要

メディアクエリはビューポート幅を基準とするため、同じコンポーネントをサイドバーとメインカラムの両方で使う場合に対応できなかった。Container Queries はコンポーネント自身の親サイズを基準にできる。

対応ブラウザ

基本構文

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

実務での使いどころ

• 再利用可能なカードコンポーネント

  サイドバーでは縦積み、メインエリアでは横並びと、置かれた場所に応じてレイアウトが変わる真の意味での再利用可能コンポーネント。

• ウィジェットの自律的なレスポンシブ

  ダッシュボードのウィジェットが自分のコンテナ幅に応じてレイアウトを切り替える。

注意点

フォールバック戦略

@supports not (container-type: inline-size) {
  @media (min-width: 400px) {
    .card { display: flex; }
  }
}

アクセシビリティ

• レイアウト変更によって読み上げ順が変わらないよう、HTML の DOM 順序はそのままに CSS で視覚的な並びを制御する。

参考リンク

• MDN Web Docs — Container queries
• Can I use — CSS Container Queries