container-typeとcontainer-name

コンテナクエリを使うと、ビューポートではなく親コンテナのサイズに基づいてCSSでスタイルを適用できます。これにより、コンポーネントが配置された場所に応じて適応する、真にコンポーネントベースのレスポンシブデザインを実現できます。

メディアクエリを使用する場合、幅300pxのサイドバー内にあるカードコンポーネントは、自分が狭い場所にいることを認識できません。認識できるのはビューポートが広いということだけです。コンテナクエリを使えば、コンポーネントは全体のビューポートではなく、自身のコンテナのサイズに反応できます。

コンテナをクエリするには、まずcontainer-typeを使ってクエリコンテナとして宣言します。

使用できる値は次のとおりです。

• inline-size — コンテナのインライン方向の寸法に対するクエリを有効にします（横書きでは幅）
• size — インライン方向とブロック方向の両方の寸法に対するクエリを有効にします（幅と高さ）
• normal — デフォルト値です。サイズクエリは使用できませんが、スタイルクエリは引き続き使用できます

クエリで参照できるように、コンテナに名前を付けます。ネストしたコンテナが存在し、特定の祖先をクエリしたい場合に必要です。

containerの短縮構文では、名前とタイプの両方を設定できます。

名前のないコンテナもクエリできます。@containerルールは、デフォルトで最も近いコンテナの祖先を対象にします。名前が必要なのは、特定の祖先までスキップして対象にしたい場合だけです。

container-typeを設定したすべての要素には、独自のレイアウトの包含が適用されます。つまり、コンテナ内のサイズ変更が祖先要素に影響しないため、パフォーマンス上の利点があります。コンテナが変化しても、ブラウザーはページ全体を再計算する必要がありません。

container-type: inline-sizeを設定すると、要素に対して暗黙的にcontain: inline-size layout styleが設定されます。これにより、コンテナのサイズが自身のレイアウトに影響しなくなります。これはサイズクエリを機能させるために必要です。

コンテナクエリの完全な設定例です。

コンテナを使用する対象: コンポーネント単位の適応、異なるレイアウトコンテキストで再利用するコンポーネント、配置場所が分からないカードやウィジェット。メディアクエリを使用する対象: 全体的なレイアウト変更、タイポグラフィの拡大縮小、大きなセクションの表示と非表示。

@containerルールで要素の幅をクエリできるようにするプロパティ値はどれですか。

container-type: inline-sizeは、要素を幅に対するクエリコンテナとして定義します。container-nameを使うと、対象を選択できるようにコンテナへ名前を付けられます。containerの短縮構文では、両方を設定できます。コンテナクエリは、ビューポートのメディアクエリでは処理できない、未知のコンテキストに配置されたコンポーネントの問題を解決します。