:has() 個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

CSS 無法根據其子項直接選取父項元素，這項功能多年以來一直是開發人員的首要要求。:has() 選取器現已獲得所有主要瀏覽器的支援，可解決這個問題。在 :has() 之前，您通常會連結長選取器或新增類別，以便設定樣式鉤子。您現在可以根據元素與其子項的關係設定樣式。如要進一步瞭解 CSS Wrapped 2023 中的 :has() 選取器，以及每位前端開發人員都應瞭解的 5 個 CSS 程式碼片段，請參閱相關文章。

雖然這個選取器看似不起眼，但可支援大量用途。本文將說明電子商務公司使用 :has() 選取器後，可發揮的幾種用途。

:has() 是新推出的基準的一部分。

瀏覽器支援

  • Chrome：105。
  • Edge：105。
  • Firefox：121。
  • Safari：15.4。

資料來源

請查看本文所屬的完整系列文章，其中探討電子商務公司如何使用新的 CSS 和 UI 功能提升網站品質。

政策台

有了 :has() 選取器，我們就能消除使用者選取項目的 JavaScript 驗證，並以 CSS 解決方案取而代之，這項解決方案可提供與先前相同的體驗，並能無縫運作。—Aman Soni，Policybazaar 技術主管

Policybazaar 的投資團隊巧妙地套用 :has() 選取器，為比較方案的使用者提供清楚的視覺指標。下圖顯示比較 UI 中的兩種方案 (黃色和藍色)。每個企劃書只能與其類型進行比較。使用 :has() 時，當使用者選取其中一種方案類型時，無法選取另一種方案。

實作 :has() 來設定父項元素及其子項的樣式，建立類別範圍選取功能。

程式碼

:has() 可讓您存取樣式父項元素及其子項。以下程式碼會檢查上層容器是否已設定 .disabled-group 類別。如果是這樣，系統會將資訊卡設為灰色，並將 pointer-events 設為 none，以免「Add」按鈕對點擊事件做出反應。

.plan-group-container:has(.disabled-group) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.plan-group-container:has(.disabled-section) .button {
  pointer-events: none;
  border-color: #B5B5B5;
  color: var(--text-primary-38-color);
  background: var(--input-border-color);
}

Policybazaar 的健康狀態團隊實作了略有不同的用途。他們為使用者提供內嵌測驗，並使用 :has() 檢查問題核取方塊的狀態，查看是否已回答問題。如果是，系統會套用動畫，以便轉換至下一題。

health.policybazaar.com/

程式碼

在方案比較範例中，:has() 用於檢查類別是否存在。您也可以使用 :has(input:checked) 檢查核取方塊等輸入元素的狀態。在顯示測驗的圖像中，紫色橫幅中的每個問題都是核取方塊。Policybazaar 會使用 :has(input:checked) 檢查問題是否已回答，如果已回答，就會使用 animation: quesSlideOut 0.3s 0.3s linear forwards 觸發動畫，滑動至下一題。請參閱下列程式碼，瞭解這項功能的運作方式。

.segment_banner__wrap__questions {
 position: relative;
 animation: quesSlideIn 0.3s linear forwards;
}

.segment_banner__wrap__questions:has(input:checked) {
 animation: quesSlideOut 0.3s 0.3s linear forwards;
}


@keyframes quesSlideIn {
 from {
   transform: translateX(50px);
   opacity: 0;
 }
 to {
   transform: translateX(0px);
   opacity: 1;
 }
}

@keyframes quesSlideOut {
 from {
   transform: translateX(0px);
   opacity: 1;
 }
 to {
   transform: translateX(-50px);
   opacity: 0;
 }
}

Tokopedia

如果產品縮圖包含影片，Tokopedia 會使用 :has() 建立疊加圖片。如果產品縮圖包含 .playIcon 類別，系統會加入 CSS 疊加層。在此，:has() 選擇器與 & 巢狀選擇器一併用於主 .thumbnailWrapper 類別中，適用於所有縮圖。這樣一來，您就能建立更具模組化且易於閱讀的 CSS。

使用 has 選取器前後的 Tokopedia 網頁螢幕截圖。
使用 :has() 前後的對照圖。

程式碼

下列程式碼使用 CSS 選取器和合併器 (& 和 >)，並以 :has() 建立巢狀結構來設定縮圖樣式。對於不支援的瀏覽器，系統會使用一般額外的 CSS 類別規則做為備用。@supports selector(:has(*)) 規則也可用於檢查瀏覽器支援情形。因此不同瀏覽器版本的瀏覽體驗也一樣。

export const thumbnailWrapper = css`
  padding: 0;
  margin-right: 7px;
  border: none;
  outline: none;
  background: transparent;

  > div {
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
    border-color: ;
    position: relative;
    border: 2px solid ${NN0};
    border-radius: 8px;
    transition: border-color 0.25s;

    &.active {
      border-color: ${GN500};
    }

    @supports selector(:has(*)) {
      &:has(.playIcon) {
        &::after {
          content: '';
          display: block;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    & > .playIcon {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      text-align: center;
      z-index: 1;
    }
  }
`;

使用 :has() 時的注意事項

結合 :has() 與其他選取器，即可建立更複雜的條件。請參閱 has() 家庭選取器中的部分範例。

資源：

請參閱本系列的其他文章，瞭解電子商務公司如何透過使用新的 CSS 和 UI 功能 (例如捲動驅動動畫、檢視畫面轉場、彈出式視窗和容器查詢) 獲益。