:has() 擬似クラスにより CSS での JavaScript ハックの必要性がなくなる方法-CSSチュートリアル-php.cn

:has() 擬似クラスにより CSS での JavaScript ハックの必要性がなくなる方法

Mary-Kate Olsen

リリース： 2024-11-30 03:50:09

オリジナル

899 人が閲覧しました

How :has() Pseudo-Class Eliminates the Need for JavaScript Hacks in CSS

子に基づいて親要素のスタイルを設定する必要があり、単純なクラスを追加するためだけに大量の JavaScript を作成することになったときのことを覚えていますか?さて、そんな時代もついに終わりました！ CSS :has() 擬似クラスは窮地を救うためにここにあり、あらゆる場所のフロントエンド開発者の状況を変えます。

:has() についての大騒ぎは何ですか?

:has() を CSS の水晶玉と考えてください。これを使用すると、要素の内部を見て、そこに何が含まれているかを確認できます。画像が含まれている div のスタイルを変更したいですか? div:has(> img) と書くのと同じくらい簡単です。 JavaScript は必要ありません!

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

ログイン後にコピー

最新のブラウザのほとんどは :has() をサポートしていますが、Internet Explorer ユーザー (まだサポートする必要がある場合) はフォールバックが必要です。しかし、それで立ち止まらないでください。ここではプログレッシブエンハンスメントがあなたの友達です!

古いやり方 vs. 新しい魅力

かつて私たちを夢中にさせた、いくつかの一般的なシナリオについて話しましょう。これらを覚えていますか?

フォームフィールド検証ダンス

古い方法:

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

ログイン後にコピー

新しい方法:

.form-group:has(input:invalid) {
  border-color: red;
  background: #fff8f8;
}

ログイン後にコピー

イベントリスナーやクラスの切り替えは不要です。純粋な宣言型 CSS だけが必要です。素敵ですね?

ドロップダウンメニューの変身

誰もが、メニューが開いているときにドロップダウンコンテナーのスタイルを設定しようとしたことがあります。以前は、DOM ツリー内でクラスを上下に切り替えるには JavaScript が必要でした。

古い JavaScript アプローチ:

const dropdown = document.querySelector('.dropdown');
const menu = dropdown.querySelector('.menu');

menu.addEventListener('click', () => {
  dropdown.classList.toggle('is-open');
});

ログイン後にコピー

新しい CSS アプローチ:

.dropdown:has(.menu:focus-within) {
  background: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

ログイン後にコピー

:has() を使用した現実世界の手品

:has() が本当に優れている実用的な例をいくつか見てみましょう:

1. スマート画像ギャラリー

ギャラリーに含まれるコンテンツの種類に基づいてレイアウトを調整したいですか?簡単簡単!

.gallery:has(img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery:has(video) {
  display: flex;
  flex-direction: column;
}

ログイン後にコピー

Medium 記事へのリンクを、参照、引用、またはインスピレーション源として使用することで、新しい記事に組み込むことができます。これを効果的に組み込む方法は次のとおりです:

インタラクティブなフォーム、ドロップダウンメニュー、兄弟状態の管理は、現在 CSS が主導権を握っている例のほんの一例にすぎません。この洞察力に富んだ Medium の記事で述べたように、:has() のような最新の手法を使用すると、JavaScript に依存せずに CSS でこれらのタスクを直接管理できます。

2. フォームフィールドの依存関係

チェックボックスがオンになっているときにセクション全体を強調表示する必要がありますか?問題ありません!

.section:has(input[type="checkbox"]:checked) {
  background: #e8f4ff;
  padding: 1rem;
  border-radius: 4px;
}

ログイン後にコピー

3. 空状態の処理

コンテナが空のときにメッセージを表示したいですか? :has() があなたの味方です:

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

ログイン後にコピー

パフォーマンスの勝利

JavaScript の代わりに :has() を使用することについては次のとおりです。これは単にコードの記述量が減るだけではありません。実際にページのパフォーマンスが向上する理由は次のとおりです。

ブラウザのスタイルエンジンはすべての作業をネイティブに処理します
JavaScript 実行のオーバーヘッドなし
一定のクラスの追加/削除によるレイアウトのスラッシングはありません
ページを詰まらせるイベントリスナーが減少します

ベストプラクティスと注意点

:has() は素晴らしいものですが、留意すべき点がいくつかあります:

シンプルにしてください
複雑なセレクターを使いすぎないでください。 div:has(>span:has(>img)):has( p) と書けたからといって、そうすべきというわけではありません!
プログレッシブエンハンスメント
:has():
をサポートしていないブラウザに対しては、常に賢明なフォールバックを用意してください。

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

ログイン後にコピー

パフォーマンスに関する考慮事項 :has() は一般にパフォーマンスが高いですが、非常に複雑なセレクターは依然としてレンダリングに影響を与える可能性があります。 DevTools を頻繁に使用している場合は、パフォーマンスパネルに注目してください。

まとめ

:has() 疑似クラスは単なる新しい CSS 機能ではなく、スタイルシートでの親子関係の処理方法におけるパラダイムシフトです。これは、より保守しやすいコードを作成し、パフォーマンスを向上させるのに役立ちます。そして最も重要なことに、CSS が最も得意とすること、つまりスタイルを宣言的に処理できるようになります。

次に JavaScript で親要素のクラスを切り替えるときは、:has() を使用すると、よりシンプルで洗練された解決策がある可能性があることを思い出してください。試してみてください – あなたのコード (そしてあなたのユーザー) はあなたに感謝するでしょう!

ブラウザのサポートは良好であり、さらに改善されていますが、最新の互換性情報については常に caniuse.com をチェックしてください。実験することを恐れないでください。そうすることで、私たち全員が開発者として学び、成長することができます!

以上が:has() 擬似クラスにより CSS での JavaScript ハックの必要性がなくなる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。