:has() – studia przypadków

Swetha Gopalakrishnan

Saurabh Rajpal

CSS często nie ma możliwości bezpośredniego wyboru elementu nadrzędnego na podstawie jego dzieci. Deweloperzy od wielu lat prosili o to. Selektor :has(), który jest obecnie obsługiwany przez wszystkie popularne przeglądarki, rozwiązuje ten problem. Przed :has(), często tworzy się łańcuchy długich selektorów lub dodaje klasy do hakowania stylizacji. Teraz możesz określić styl na podstawie relacji elementu z jego elementami podrzędnymi. Więcej informacji o selektorze :has() w Objęte CSS w 2023 r. oraz 5 fragmentów kodu CSS, które powinien znać każdy programista frontendu.

Chociaż ten selektor wydaje się mały, może zapewnić wiele zastosowań. W tym artykule omawiamy wybrane przypadki użycia dla firm e-commerce, które wykorzystują Selektor :has().

:has() jest częścią nowego modelu bazowego, który jest obecnie dostępny.

Obejrzyj całą serię, do której należy ten artykuł, z którego dowiesz się, jak firmy e-commerce ulepszyły swoje witryny za pomocą nowych funkcji CSS i UI.

Policybazaar

Dzięki selektorowi :has() udało nam się wyeliminować weryfikację opartą na języku JavaScript użytkownika i zastąpić ją skutecznym rozwiązaniem CSS z praktycznym doświadczeniem.Aman Soni, kierownik ds. technicznych, Policybazaar

Zespół ds. inwestycji firmy Policybazaar sprytnie zastosował selektor :has(), aby czytelny wskaźnik dla użytkowników, którzy porównują abonamenty. Następujący obraz pokazuje 2 typy abonamentów w interfejsie porównania (żółty i niebieski). Każdy abonament można porównywać tylko z jego własnym typem. Za pomocą funkcji :has(), gdy użytkownik wybierze jedną z opcji typ abonamentu, którego nie można wybrać.

Kod

:has() umożliwia dostęp do elementów nadrzędnych i ich elementów podrzędnych. ten kod sprawdza, czy kontener nadrzędny ma ustawioną klasę .disabled-group. Jeśli tak, karta będzie wyszarzona, a przycisk „Dodaj” jest zablokowany od w reakcji na kliknięcia przez ustawienie opcji pointer-events na 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);
}

Zespół Health Policybazaar wdrożył wdrożenie w nieco innym przypadku. Mają wbudowany quiz dla użytkownika, :has(), aby sprawdzić stan pola wyboru pytania i dowiedzieć się, czy zostało ono odpowiedział(a). Jeśli tak, zostanie zastosowana animacja w celu przejścia do następnego pytania.

Kod

W przykładowym porównaniu abonamentów użyto typu :has() do sprawdzenia obecności zajęcia. Możesz też sprawdzić stan elementu wejściowego, np. pola wyboru, za pomocą polecenia :has(input:checked) Na obrazku przedstawiającym quiz każde pytanie w fioletowy baner to pole wyboru. Policybazaar sprawdza, czy pytanie zostało odpowiedział za pomocą funkcji :has(input:checked), a jeśli tak, uruchom animację przy użyciu funkcji animation: quesSlideOut 0.3s 0.3s linear forwards, aby przejść do następnego elementu pytanie. Więcej informacji na ten temat znajdziesz w kodzie poniżej.

.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 użyła atrybutu :has() do utworzenia obrazu nad powierzchnią, jeśli miniatura produktu zawiera film. Jeśli miniatura produktu zawiera klasę .playIcon, plik CSS nakładka została dodana. W tym przypadku selektor :has() jest używany razem z funkcją & zagnieżdżania selektora w nadrzędnej klasie .thumbnailWrapper, która ma zastosowanie do wszystkich miniatur. Dzięki temu kod CSS jest bardziej modułowy i bardziej czytelny.

Kod

W poniższym kodzie użyto funkcji Selektory i kombinatory arkusza CSS (& i >) i zagnieżdżenie z ustawieniem :has(), aby określić styl miniatury. Nieobsługujące przeglądarek, jako kreacji zastępczej używana jest zwykła reguła dodatkowych klas CSS. Reguła @supports selector(:has(*)) służy też do sprawdzania obsługi przeglądarek. Dlatego ogólny interfejs jest taki sam we wszystkich wersjach przeglądarek.

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;
    }
  }
`;

Co warto wziąć pod uwagę podczas korzystania z :has()

Aby utworzyć bardziej złożony warunek, połącz pole :has() z innymi selektorami. Sprawdź znajdziesz kilka przykładów w has() w selektorze rodziny.

Zasoby:

• Podsumowanie usług porównywania cen w 2023 r.
• :has(): selektor rodziny
• Wersje demonstracyjne :has()
• Chcesz zgłosić błąd czy poprosić o dodanie nowej funkcji? Chcemy poznać Twoją opinię

Przeczytaj inne artykuły z tej serii o tym, jak e-commerce firm, które skorzystały z nowych funkcji CSS i UI, takich jak przewijanie animacje, przejścia widoków, okienka wyskakujące i zapytania dotyczące kontenerów.

• Dlaczego funkcje interfejsu internetowego są ważne w przypadku witryny e-commerce?
• Animacje oparte na przewijaniu – studia przypadków
• Zobacz studia przypadków dotyczące przenoszenia
• Popover – studia przypadków
• Przykłady zapytań o kontenery