：has（）リレーショナルプソイドクラスでアニメーション化されたクリック可能なカードを作成する

ChromeおよびSafariブラウザは、多くのブラウザで徐々に発売されている:has()擬似クラスのCSSを完全にサポートしています。多くの場合、「親セレクター」と呼ばれます。子の選択者を介して親要素のスタイルを選択して設定できますが、:has()はそれ以上に使用されます。用途の1つは、多くの人がよく使用するクリック可能なカードモードを再設計することです。

リンクカードで私たちを助ける方法:has()を探りますが、最初は...

擬似クラスとは何ですか？ :has()

の目的を説明する多くの優れた記事がありますが、それでも比較的新しいので、ここで簡単に紹介する必要があります。 :has()

は、W3Cセレクターレベル4作業ドラフトの一部であるリレーショナルプソイドクラスです。これは、ブラケットの目的です。特定の子要素に関連付けられた一致要素（より正確には、特定の子要素を含む）。 :has()

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

したがって、なぜ「親」セレクターと呼ぶのかを理解できます。ただし、他の機能的な擬似クラスと組み合わせて使用​​して、より具体的な一致を取得することもできます。記事をスタイリングしたいと仮定します

には画像が含まれていません。これを達成するために、の関係能力とのネガティブな能力を組み合わせることができます。 :has() :not()しかし、これはさまざまな機能を組み合わせて、

を使用してより多くの機能を実現する方法の始まりに過ぎません。クリック可能なカードパズルを具体的に解決する前に、

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

を使用せずにそれらに対処する方法のいくつかを見てみましょう。

:has()現在、クリック可能なカードをどのように扱っていますか:has()

今日、この擬似クラスの強力な機能を完全に理解するために、人々が完全にクリック可能なカードを作成するための3つの主な方法があります。

「ラッパーとしてのリンク」メソッド

この方法はよく使用されます。私はこの方法を決して使用しませんが、それを実証するためにクイックデモを作成しました：

ここには、特にアクセシビリティに関しては多くの問題があります。ユーザーが回転子機能を使用してWebサイトを閲覧すると、

要素 - タイトル、テキスト、リンク内の全文が聞こえます。一部の人々は、これらすべてを聞きたくないかもしれません。私たちはもっとうまくやることができます。 HTML5から始めて、要素の要素をブロックすることができます。しかし、これはいつも私には間違っていると感じています。特にこの理由で。

<a></a>長所：<a></a>

をすばやく実装します

セマンティック正しい

• 短所：

アクセシビリティの問題

テキストが選択できない

• デフォルトのリンクで使用されるスタイルをオーバーライドするのは非常に面倒です
javaScriptメソッド
JavaScriptを使用すると、タグに書き込む代わりに、カードにリンクを添付できます。 CostDevによるこの素晴らしいCodepenデモを見つけました。これは、プロセスでカードテキストをオプションにします。

この方法には多くの利点があります。私たちのリンクは、焦点を合わせたときにアクセス可能であり、テキストを選択することもできます。しかし、スタイルの観点からいくつかの欠点があります。たとえば、これらのカードをアニメーション化したい場合は、リンク自体の代わりに.cardメインラッパーに:hoverスタイルを追加する必要があります。また、リンクがキーボードタブキーを介して焦点を合わせている場合、アニメーションの恩恵もありません。

長所：

• 完全なアクセシビリティを実現できます
• 選択可能なテキスト

短所：

• javascriptが必要です
• 右クリックできません（いくつかの追加のスクリプトで修正できますが）
• カード自体で多くのスタイルを実行する必要がありますが、リンクに焦点を合わせるときは機能しません

::afterセレクターメソッド

この方法では、カードを相対的なポジショニングに設定し、リンクされた::afterpseudoセレクターに絶対的な位置を設定する必要があります。これにはJavaScriptを必要とせず、簡単に実装できます：

ここには、特にテキストの選択に関しては、いくつかの欠点があります。カード本体に高いZインデックスを提供しない限り、テキストを選択することはできませんが、テキストをクリックすることでリンクがアクティブになることに注意してください。選択可能なテキストが必要かどうかはあなた次第です。これはUXの問題かもしれませんが、ユースケースに依存します。テキストはまだスクリーンリーダーを介してアクセスできますが、このアプローチに関する私の主な問題は、アニメーションの可能性がないことです。

長所：

• 簡単に実装できます
• アクセス可能なリンク、冗長なテキスト
ホバリングと焦点を合わせるときに
• 影響を受けます

短所：

• テキストが選択できない
• これがホバリングする要素であるため、リンクのみをアニメーション化することができます。

新しい方法：::after:has()と組み合わせて

を使用します

クリック可能なカードの既存の方法を特定したので、これらの欠点のほとんどを解決するために:has()をミックスに追加する方法を示したいと思います。

実際、このアプローチは、リンク要素で::afterを使用して最後に表示したメソッドに基づいています。実際に:has()を使用して、メソッドのアニメーションの制限を克服できます。

マーカー：

から始めましょう

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

シンプルに保つために、クラスを使用する代わりに、要素をCSSに直接配置します。

このデモでは、矢印がポップアップしてリンクのテキスト色を変更して変更するために、カードに画像スケーリングとシャドウをカードに追加し、アニメーション化します。操作を簡素化するために、カードにスコープされたカスタムプロパティを追加します。これが基本的なスタイルです：

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

とても良い！初期スケーリング（）、カードタイトルの初期色（--img-scale: 1.001）、およびリンクから矢印をポップアップするために使用する追加のプロパティを追加しました。また、後でアニメーション化するように--title-color: black宣言の空の状態を設定します。これにより、今すぐ作成する必要があるクリック可能なカードの基礎が設定されているため、アニメーション化する要素にこれらのカスタムプロパティを追加して、リセットとスタイルを追加しましょう。 box-shadow

ユーザーフレンドリーで、リンクの後ろのスクリーンリーダーに隠されたクラスを追加しましょう：

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

私たちのカードは美しく見え始めています。魔法を追加する時が来ました。

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating Animated, Clickable Cards With the :has() Relational Pseudo Class "><div clas="article-body">
    <h2>Some Heading</h2>
    <p>Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.</p>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
      Read more
       <svg fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg></a>
  </div>

pseudoクラスを使用して、リンクがホバリングまたは焦点を合わせているかどうかを確認し、カスタムプロパティを更新して

を追加できます。この少量のCSSコードを使用すると、私たちのカードは本当に生き返ります：:has() box-shadow

上記のコンテンツを見ましたか？現在、カード内の

/* 卡片元素 */
article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;

  position: relative;
  border-radius: 16px;
  box-shadow: none;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
/* 链接的::after伪元素 */
article a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
}

の子要素がホバリングまたは焦点を合わせている場合は、更新されたスタイルを取得します。リンク要素が、クリック可能なカードメソッドにホバーまたはフォーカス状態を含むことができる唯一の要素である場合でも、親要素に一致して変換を適用するために使用できます。

それだけです。セレクターの別の強力なユースケース。他の要素をパラメーターとして宣言することで親要素を一致させるだけでなく、擬似クラスを使用して、親要素のスタイルに合わせて設定することもできます。 ::after

長所：

:has()

アクセス可能 アニメを設定できます

JavaScriptは必要ありません
• 正しい要素で使用してください
• 短所：
• :hover

テキストを選択するのは簡単ではありません。

ブラウザのサポートは、ChromeとSafariに限定されています（Firefoxでは、ロゴの背後にサポートされています）。

これは、この手法を使用したデモです。カードの周りに余分なラッパーに気付くかもしれませんが、これはコンテナクエリを使用するときに行った試みのほんの一部です。これは、すべての主要なブラウザで起動されている他の素晴らしい機能の1つです。
共有したい他の例はありますか？コメントセクションは、他のソリューションやアイデアを大いに歓迎します。

以上が：has（）リレーショナルプソイドクラスでアニメーション化されたクリック可能なカードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。