Inline-size containment

概要

要素のインライン方向（通常は幅）のサイズ計算がコンテンツに依存しないことをブラウザに伝え、レイアウトの再計算範囲を限定します。コンテナクエリ（@container）の前提条件としても重要で、インラインサイズコンテインメントが設定された要素はコンテナクエリのターゲットとして使用できます。パフォーマンス最適化の重要な機能です。

対応ブラウザ

基本構文

.container {
  contain: inline-size;
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

実務での使いどころ

• コンテナクエリの有効化

  contain: inline-size を設定することで、コンテナクエリが使用可能になり、親要素のサイズに応じたレスポンシブコンポーネントを作成できます。

注意点

アクセシビリティ

• コンテインメントはパフォーマンス最適化とレイアウト制御のための機能であり、アクセシビリティに直接影響しません。

参考リンク

• MDN Web Docs — Inline-size containment