:has() 個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

CSS 缺少直接選取 父項元素的方法 所有子項。多年來，一直以來都是開發人員不斷提出的要求。 但現在所有主要瀏覽器都支援 :has() 選取器，可以解決這個問題。之前 :has()，您通常會鏈結長的選取器或新增樣式掛鉤類別。現在 就能根據元素與子系的關係設定樣式閱讀完整內容 關於 :has() 選取器的 2023 年納入 CSS 供應商和 每一位前端開發人員都應知道的 5 個 CSS 程式碼片段。

這個選取器似乎很小，但也能用於大量用途。 本文將說明電子商務公司能夠使用 :has() 選取器。

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

瀏覽器支援

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

資料來源

請參閱本文的完整系列文章，其中會說明 電子商務公司利用全新的 CSS 和 UI 功能提升網站品質。

政策台

透過 :has() 選取器，我們得以消除 JavaScript 式驗證 並替換成有效的 CSS 解決方案 帶來更順暢的體驗。—Aman Policybazaar 技術主管 Soni

Policybazaar 投資團隊巧妙運用「:has()」選取器，提供 清楚指出正在比較方案的使用者。下方圖片 比較 UI 中顯示兩種方案 (黃色和藍色)。每個方案 只能與本身的類型比較。在使用者選取某項產品時，使用 :has() 無法選取其他企劃書類型。

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

程式碼

:has() 可讓您存取父項元素及其子項的樣式。 下列程式碼會檢查父項容器是否已設定 .disabled-group 類別。 如果存在，卡片會顯示為灰色，「新增」該按鈕是 將 pointer-events 設為 none，藉此回應點擊。

.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 類別， 已新增疊加層。在這個範例中，:has() 選取器會與 & 搭配使用 巢狀 .thumbnailWrapper 類別內的巢狀選取器 所有縮圖。這將建立更多模組化且更容易理解的 CSS。

Tokopedia 使用 include 選取器前後的頁面螢幕截圖。
使用 :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 功能 (例如捲動式介面) 時獲得良好成效 動畫、檢視轉場效果、彈出式視窗和容器查詢。