Web

Container queries と :has() は a match made in responsive heaven である

投稿日:2022年9月8日 更新日:

Chrome 105 の新機能についての記事 New in Chrome 105 – Chrome Developers に、Container queries:has() が「a match made in responsive heaven」であると紹介されています。

a match made in heaven」という表現は、直訳すると「天国で作られた組み合わせ」であり、「相性抜群の二人」とか「最高のコンビネーション」といった意味になるのですが、この表現の「heaven」が「responsive heaven」に変えられています。

つまり「レスポンシブデザインにとって、Container queries と :has() は最高の組み合わせ!」といったところでしょうか。

Container queries と :has() は、どちらも Chrome 105 から使えるようになった新機能です。

Container queries は、「コンテナ」として指定した要素のサイズ別に、その子孫となる要素のスタイルを指定することができます。:has() は、親要素が特定の要素を持っている(または持っていない)場合に、その親要素自身(とその子孫要素)のスタイルを指定することができます。

この2つの機能によって、例えば「(親要素(コンテナ)が特定のサイズになった場合)且つ(その子孫要素が特定の構成だった場合)→ その子孫要素のスタイルを変更する」が可能になります。このように今までできなかった、より複雑なレスポンシブスタイルを実現することができるよ、というのが「match made in responsive heaven」に込められた意味であると理解しました。

ちなみに、New in Chrome 105 – Chrome Developers に載っている Container queries と :has() の話は、@container and :has(): two powerful new responsive APIs landing in Chromium 105 – Chrome Developers が元ネタになっているようで、こちらでも同じ表現が使われています。同記事には、Container queries と :has() とを組み合わせて利用する具体例も載っています。

今回は、Webの機能というよりは、英語の表現が面白かったので取り上げてみました。

ついでに言うと、Chrome 104 から メディアクエリーやコンテナの幅の条件を指定するところで、min-width や max-width 以外に不等号を使うことができます。不等号の方が圧倒的に分かりやすいので、今後はこちらが主流になるでしょう。
🔗 2.4.3. Evaluating Media Features in a Range Context | Media Queries Level 4

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web

HTML文書の文字エンコーディングに UTF-8 を使うことが公式に明文化されました

HTML文書は文字エンコーディングUTF-8でなければなりません – 水底の血 という記事で知ったのですが、「HTML文書の文字エンコーディングは UTF-8 でなければならない」という意 …

Firefox

Firefox のコンテンツブロッキング (Enhanced Tracking Protection)

Firefox の コンテンツブロッキング 機能について説明します。

Web Programming

Import maps の使い方

Import maps の使い方について説明します。

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。

Google

【Google】アカウント無効化管理ツールの設定

Google の「アカウント無効化管理ツール」について説明します。