2022年04月12日(火)
なにこれ、すごい便利！ CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。
簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。
下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
シンプル、高速、セキュアなオープンソースのパスワードマネージャー・「ManageMyPasswords」
NEXT ›
セルフホスト可能でGDPRやCCPA、PECRにも準拠の軽量Web解析ツール・「66Analytics」
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『なにこれ、すごい便利！ CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる』についてまとめています。
この記事は特にSEO・UX・Google・Chrome・twitter・Mac・safari・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
0
121
171
110
Ads
