CSS :has() 疑似クラスは、多くのブラウザで展開されています クロム および Safari すでに完全にサポートしています。 これはよく「親セレクター」と呼ばれます — たとえば、子セレクターから親要素のスタイルを選択できます — しかし、それだけではありません。 :has() 私たちが解決するのを助けることができます。 それらの XNUMX つは、私たちの多くが時々使用するのが大好きなクリック可能なカード パターンを再発明することです。
方法を見ていきます :has() リンクされたカードを処理するのに役立ちますが、まず…
これは何ですか :has() 疑似クラス？
すでにあります 束 of 素晴らしい 投稿 浮かんでいる それは何を説明する素晴らしい仕事をします :has() であり、その用途ですが、まだ十分に新しいため、ここでも少し説明する必要があります。
:has() の一部であるリレーショナル疑似クラスです。 W3C セレクター レベル 4 ワーキング ドラフト. それが括弧のすべてです: 特定の子要素に関連する (より正確には、含まれる) 一致する要素です。
/* Matches an article element that contains an image element */
article:has(img) { }
/* Matches an article element with an image contained immediately within it */
article:has(> img) { }したがって、これを「親」セレクターと呼びたい理由がわかります。 しかし、それを他の機能的な疑似クラスと組み合わせて、より具体的にすることもできます。 記事のスタイルを設定したいとしましょう 画像が含まれています。 の関係力を組み合わせることができます :has() の否定力で :not() それを行うには：
/* Matches an article without images */
article:not(:has(img)) { }しかし、それは力を組み合わせてより多くのことを行う方法の始まりに過ぎません :has(). クリッカブル カードの難問の解決に具体的に目を向ける前に、現在、クリッカブル カードを使用せずにアプローチしているいくつかの方法を見てみましょう。 :has().
クリック可能なカードの現在の取り扱い方法
最近、人々が完全にクリック可能なカードを作成する方法には XNUMX つの主なアプローチがあり、この疑似クラスの力を完全に理解するために、少しまとめておくとよいでしょう。
「ラッパーとしてのリンク」アプローチ
このアプローチは、非常に頻繁に使用されるものです。 私はこのアプローチを使用したことはありませんが、デモ用に簡単なデモを作成しました。
特にアクセシビリティに関しては、ここには多くの懸念があります。 ユーザーが Web サイトをナビゲートするとき ローター機能、彼らはその中の全文を聞くでしょう 要素 — 見出し、テキスト、およびリンク。 誰かがそれをすべて座ろうとしないかもしれません。 もっとうまくやることができます。 HTML5 以降、ブロック要素を エレメント。 しかし、特にこの理由から、それは私には決して正しくありません。
長所：
- すばやく実装
- 意味的に正しい
短所：
- アクセシビリティの問題
- テキストは選択できません
- デフォルトのリンクで使用したスタイルを上書きする手間がかかる
JavaScriptメソッド
JavaScript を使用すると、マークアップに記述する代わりにカードにリンクを添付できます。 このすばらしい CodePen デモを見つけたのは、 コストデヴ また、その過程でカードのテキストを選択可能にしたのは誰ですか:
このアプローチには多くの利点があります。 リンクはフォーカス時にアクセスでき、テキストを選択することもできます. しかし、スタイリングに関してはいくつかの欠点があります。 たとえば、これらのカードをアニメーション化する場合は、追加する必要があります :hover メインのスタイル .card リンク自体の代わりにラッパー。 また、キーボードのタブ操作によってリンクがフォーカスされている場合、アニメーションのメリットもありません。
長所：
- 完全にアクセス可能にすることができます
- テキストを選択する機能
短所：
- JavaScript が必要です
- 右クリックはできません (ただし、追加のスクリプトで修正できます)
- カード自体に多くのスタイルを設定する必要があり、リンクをフォーカスするときに機能しません
::after セレクターアプローチ
この方法では、相対位置でカードを設定してから、リンクの絶対位置を設定する必要があります ::after リンクの疑似セレクタ。 これは JavaScript を必要とせず、非常に簡単に実装できます。
特にテキストの選択に関しては、いくつかの欠点があります。 カード本体に高い z-index を指定しない限り、テキストを選択することはできませんが、選択した場合、テキストをクリックしてもリンクがアクティブにならないことに注意してください。 選択可能なテキストが必要かどうかはあなた次第です。 UXの問題だと思いますが、ユースケースにもよります。 スクリーン リーダーは引き続きテキストにアクセスできますが、この方法に関する私の主な問題は、アニメーションの可能性がないことです。
長所：
- 実装が簡単
- 肥大化したテキストのないアクセシブルなリンク
- ホバーとフォーカスで動作
短所：
- テキストは選択できません
- これはホバリングしている要素であるため、リンクをアニメーション化することしかできません。
新しいアプローチ: ::after :has()
クリック可能なカードの既存のアプローチを確立したので、次にどのように導入するかを示したいと思います。 :has() ミックスすることで、これらの欠点のほとんどが解決されます。
実際、このアプローチは、最後に使用したものに基づいてみましょう ::after リンク要素で。 実際に使える :has() そのアプローチのアニメーションの制約を克服するためにそこにあります。
マークアップから始めましょう。
Some Heading
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.
クラスの代わりに CSS の要素をターゲットにすることで、物事をできるだけシンプルに保ちます。
このデモでは、ホバー時にカードに画像のズームと影を追加し、ポップアップする矢印でリンクをアニメーション化し、リンクのテキストの色を変更します。 これを簡単にするために、カードをスコープとするカスタム プロパティをいくつか追加します。 基本的なスタイリングは次のとおりです。
/* The card element */
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: #fff;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
}
/* The link's ::after pseudo */
article a::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
}すごい！ 画像の初期スケールを追加しました (--img-scale: 1.001)、カード見出しの初期色 (--title-color: black) およびいくつかの追加のプロパティを使用して、矢印をリンクから飛び出させます。 また、空の状態を設定しました box-shadow 後でアニメーション化するための宣言。 これでクリック可能なカードに今必要なものが設定されたので、アニメーション化する要素にカスタム プロパティを追加して、いくつかのリセットとスタイリングを追加しましょう。
article h2 {
margin: 0 0 18px 0;
font-family: "Bebas Neue", cursive;
font-size: 1.9rem;
letter-spacing: 0.06em;
color: var(--title-color);
transition: color 0.3s ease-out;
}
article figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(--img-scale));
transition: transform 0.4s ease-in-out;
}
article a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #28666e;
}
article a:focus {
outline: 1px dotted #28666e;
}
article a .icon {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(--link-icon-translate));
opacity: var(--link-icon-opacity);
transition: all 0.3s;
}
.article-body {
padding: 24px;
}人に優しくしよう スクリーン リーダー クラス リンクの後ろに隠されています：
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}私たちのカードはとても素敵に見え始めています。 それにちょっとした魔法を加える時が来ました。 とともに :has() 疑似クラスで、リンクがホバーまたはフォーカスされているかどうかを確認し、カスタム プロパティを更新して、 box-shadow. この CSS の小さなチャンクにより、カードが本当に生き生きとします。
/* Matches an article element that contains a hover or focus state */
article:has(:hover, :focus) {
--img-scale: 1.1;
--title-color: #28666e;
--link-icon-translate: 0;
--link-icon-opacity: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}そこにあるものを見ますか？ 次の場合、更新されたスタイルを取得します。 どれか カード内の子要素がホバーまたはフォーカスされています。 そして、ホバーまたはフォーカス状態を含むことができるのは link 要素だけですが、 ::after クリック可能なカード アプローチを使用すると、それを使用して親要素を一致させ、トランジションを適用できます。
そして、あなたはそれを持っています。 のもう XNUMX つの強力な使用例 :has() セレクタ。 他の要素を引数として宣言することで親要素を照合できるだけでなく、疑似を使用して親と照合し、スタイルを設定することもできます。
長所：
- アクセス可能な
- アニメート可能
- JavaScript は不要
- あなたが使用します
:hover正しい要素で
短所：
- テキストは簡単に選択できません。
- ブラウザーのサポートは、Chrome と Safari に限定されています (Firefox ではフラグでサポートされています)。
これは、この手法を使用したデモです。 カードの周りに余分なラッパーがあることに気付くかもしれませんが、それは私が遊んでいるだけです コンテナクエリ、これはすべての主要なブラウザーで展開されている他の素晴らしい機能の XNUMX つにすぎません。
いくつか得た 他の例 共有したいですか？ 他の解決策やアイデアは、コメント セクションで大歓迎です。
