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

コンテナクエリと :has() は、応答性に優れています。これら 2 つの機能は、Chromium 105 では一緒にリリースされる予定です。このリリースは、レスポンシブ インターフェースに関してご要望の多かった 2 つの機能を含む大きなリリースです。

コンテナクエリ: 概要

コンテナクエリを使用すると、デベロッパーは親セレクタにクエリしてサイズやスタイル設定に関する情報を取得でき、ウェブページのどこにあっても子要素がレスポンシブなスタイル設定のロジックを持つことができます。

利用可能なスペースなどのスタイル設定の入力をビューポートに依存する代わりに、デベロッパーはページ内要素のサイズもクエリできるようになりました。これは、コンポーネントが独自のレスポンシブなスタイル設定のロジックを持っていることを意味します。これにより、スタイル設定のロジックがページ内のどこに表示されるかに関係なく、コンポーネントの耐性がはるかに高まります。

コンテナクエリの使用

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

コンテナクエリを作成するには、カードコンテナに 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) は段落（p）セレクタを示し、内部に span があります。これを使用して、親段落自体のスタイルを設定したり、その中の段落のスタイルを設定したりできます。字幕を含む 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 の組み合わせを示していますが、同じ要素を複数の場所で使用しているのを見ると、コンテナクエリは真価を発揮します。スタイリングを加え、これらのカードをグリッド形式で並べて表示しましょう。

最新の CSS の機能を実際にご確認ください。ロジックの上にロジックを構築し、非常に堅牢なコンポーネントを作成する対象を絞ったスタイルを使用して明確なスタイルを記述できます。この 2 つの強力な機能が Chromium 105 で実装され、複数のブラウザ間でのサポートの勢いを増したことで、UI デベロッパーにとって今はエキサイティングな時期です。