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

子に基づいて親要素のスタイルを設定する必要があり、単純なクラスを追加するためだけに大量の 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() を使用することについては次のとおりです。これは単にコードの記述量が減るだけではありません。実際にページのパフォーマンスが向上する理由は次のとおりです。

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

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

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

1. シンプルにしてください
   複雑なセレクターを使いすぎないでください。 div:has(>span:has(>img)):has( p) と書けたからといって、そうすべきというわけではありません!

2. プログレッシブエンハンスメント
   :has():
   をサポートしていないブラウザに対しては、常に賢明なフォールバックを用意してください。

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

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

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

まとめ

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

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

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

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