:has() 偽類如何消除 CSS 中 JavaScript Hack 的需要

還記得那些時候，當您需要根據子元素設定父元素的樣式時，您最終編寫了一堆 JavaScript 只是為了添加一個簡單的類別嗎？好吧，那些日子終於過去了！ CSS :has() 偽類可以拯救世界，為世界各地的前端開發者改變遊戲規則。

:has() 有什麼好大驚小怪的？

將 :has() 視為您的 CSS 水晶球 – 它可以讓您查看元素內部以檢查它們包含的內容。當 div 內部有圖像時，想要以不同的方式設定其樣式嗎？就像寫 div:has(> img) 一樣簡單。不需要 JavaScript！

大多數現代瀏覽器現在都支援 :has()，儘管 Internet Explorer 使用者（如果您仍然需要支援它們）將需要後備。但不要讓這阻止你－漸進增強是你的朋友！

舊方式與新潮流

讓我們來談談一些曾經讓我們抓狂的常見場景。還記得這些嗎？

表單欄位驗證之舞

舊方法：

新方式：

不再有事件偵聽器或類別切換 - 只有純粹的聲明性 CSS。是不是很漂亮？

下拉式選單改造

我們都經歷過這樣的情況－嘗試在選單開啟時設定下拉容器的樣式。以前，您需要 JavaScript 在 DOM 樹中上下切換類別。

舊的 JavaScript 方法：

新的 CSS 方法：

現實世界的魔術：has()

讓我們來看一些 :has() 真正發揮作用的實際例子：

1. 智慧圖庫

希望您的畫廊根據其包含的內容類型調整其佈局？簡單易行！

您可以將 Medium 文章的連結整合到您的新文章中，將其用作參考、引用或靈感來源。以下是如何有效地包含它：

互動式表單、下拉式選單和同級狀態管理只是 CSS 現在處於領先地位的幾個例子。正如這篇富有洞察力的 Medium 文章中所指出的，像 :has() 這樣的現代技術允許 CSS 直接管理這些任務，而無需依賴 JavaScript。

2. 表單欄位依賴關係

選取複選框時需要突出顯示整個部分？沒問題！

3. 空狀態處理

想要在容器為空時顯示訊息嗎？ :has() 為你提供支持：

性能取勝

使用 :has() 來取代 JavaScript 的好處是：這不僅僅是為了編寫更少的程式碼。您的頁面實際上會表現得更好，因為：

1. 瀏覽器的樣式引擎本地處理所有工作
2. 沒有 JavaScript 執行開銷
3. 不斷新增/刪除類別不會造成佈局抖動
4. 更少的事件偵聽器封鎖您的頁面

最佳實踐和陷阱

雖然 :has() 很棒，但有一些事情要記住：

1. 保持簡單
   不要過度使用複雜的選擇器。僅僅因為您可以編寫 div:has(> span:has(> img)):has( p) 並不意味著您應該這樣做！

2. 漸進增強
   對於不支援 :has():
   的瀏覽器，始終有一個明智的後備方案

1. 性能考慮因素 雖然 :has() 通常效能良好，但非常複雜的選擇器仍然會影響渲染。如果您廣泛使用 DevTools 效能面板，請密切注意它。

總結

:has() 偽類別不僅僅是一個新的 CSS 功能 - 它是我們在樣式表中處理父子關係的方式的範式轉移。它幫助我們編寫更多可維護的程式碼，提高效能，最重要的是，它讓 CSS 做 CSS 最擅長的事情：以聲明方式處理樣式。

因此，下次您使用 JavaScript 在父元素上切換類別時，請記住：使用 :has() 可能有一個更簡單、更優雅的解決方案。試試看 - 您的程式碼（和您的用戶）會感謝您！

請記住，雖然瀏覽器支援良好且越來越好，但請務必檢查 caniuse.com 以獲取最新的相容性資訊。並且不要害怕嘗試 - 這就是我們作為開發人員學習和成長的方式！

以上是:has() 偽類如何消除 CSS 中 JavaScript Hack 的需要的詳細內容。更多資訊請關注PHP中文網其他相關文章！