@container と :has(): 2 つの強力な新しいレスポンシブ API を Chromium 105 でリリース

Una Kravets

コンテナクエリと :has() はレスポンシブな環境に最適です。幸い、これらの機能はどちらも Chromium 105 に統合されています。これは、ご要望の多かった、レスポンシブ インターフェースのための 2 つの機能を含む大規模なリリースです。

コンテナクエリ: 概要

コンテナクエリを使用すると、親セレクタにサイズとスタイルの情報をクエリできるため、ウェブページ上の場所に関係なく、子要素にレスポンシブ スタイリング ロジックを持たせることができます。

デベロッパーは、入力のスタイル設定（利用可能なスペースなど）をビューポートに依存する代わりに、ページ内要素のサイズもクエリできるようになりました。このケーパビリティは、コンポーネントがレスポンシブ スタイリングのロジックを所有していることを意味します。これにより、ページ上の表示場所に関係なく、スタイル設定ロジックがコンポーネントに適用されるため、コンポーネントの復元力が大幅に向上します。

コンテナクエリの使用

コンテナクエリを使用してビルドするには、まず親要素に包含を設定する必要があります。これを行うには、親コンテナで container-type を設定します。次のような画像とテキスト コンテンツを含むカードがあるとします。

2 列のカードが 1 枚。

コンテナクエリを作成するには、カードコンテナで container-type を設定します。

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

container-type を inline-size に設定すると、親のインライン方向のサイズがクエリされます。英語などのラテン文字では、テキストが左から右にインラインで表示されるため、これはカードの幅になります。

これで、そのコンテナで @container を使用して、その子のいずれかにスタイルを適用できます。

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

:has() 親セレクタ

CSS :has() 疑似クラスを使用すると、特定のパラメータを持つ子が親要素に含まれているかどうかを確認できます。

たとえば、p:has(span) は、内部に span を持つ段落（p）セレクタを示します。親段落自体のスタイルを設定したり、段落内の要素のスタイルを設定したりできます。たとえば、字幕を含む figure 要素のスタイルを設定する figure:has(figcaption) があります。:has() について詳しくは、Jhey Tompkins によるこちらの記事をご覧ください。

コンテナクエリと :has()

:has() の親の選択機能とコンテナクエリの親クエリの機能を使用して、非常に動的な組み込みスタイルを作成できます。

最初のロケットカードの例を詳しく見てみましょう。画像のないカードがある場合はどうなるでしょうか。たとえば、タイトルのサイズを大きくして、グリッドのレイアウトを 1 列に調整することで、画像がなくてもより意図したレイアウトに見えるようにします。

カード上の大きなテキスト。画像なしで、列に表示されます。

この例では、画像を含むカードには 2 列のグリッド テンプレートがありますが、画像のないカードは 1 列のレイアウトです。また、画像のないカードの見出しが大きくなっています。:has() を使用してこれを記述するには、次の CSS を使用します。

.card:has(.visual) {
  grid-template-columns: 1fr 1fr;
}

上記の 2 列スタイルを適用する visual クラスの要素を探しています。もう 1 つの優れた CSS 関数に :not() があります。これは :has() と同じ仕様の一部ですが、より古くから存在しており、ブラウザ サポートも優れています。次のように、:has() と :not() を組み合わせることもできます。

.card:not(:has(.visual)) h1 {
  font-size: 4rem;
}

上記のコードでは、visual クラスを含まないカード内の h1 をスタイル設定するセレクタを記述しています。これにより、フォントサイズを非常に鮮明に調整できます。

すべてを組み合わせる

上記のデモでは、:has()、:not()、@container の組み合わせを示していますが、同じ要素が複数の場所で使用されているのがコンテナクエリです。スタイルに少し加え、これらのカードをグリッドで並べて表示しましょう。

Codepen の web-dot-dev による Pen XWEZrje をご覧ください。

これで最新の CSS の威力を体感できます。ロジックを基にロジックを構築し、非常に堅牢なコンポーネントを作成するターゲット スタイルを使用して、明確なスタイルを記述できます。Chromium 105 には、これら 2 つの優れた機能が加わり、ブラウザをまたいだサポートが増加しているため、UI 開発者にとって非常にエキサイティングな時期を迎えています。