コンテナクエリと :has() はレスポンシブな環境に最適です。幸い、これらの機能はどちらも 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)
は、内部に 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
の組み合わせを示していますが、同じ要素が複数の場所で使用されているのがコンテナクエリです。スタイルに少し加え、これらのカードをグリッドで並べて表示しましょう。
これで最新の CSS の威力を体感できます。ロジックを基にロジックを構築し、非常に堅牢なコンポーネントを作成するターゲット スタイルを使用して、明確なスタイルを記述できます。これら 2 つの優れた機能が Chromium 105 で提供され、ブラウザをまたいだサポートが勢いを増すなか、UI デベロッパーの業務はとてもエキサイティングです。