Case study :has()

Swetha Gopalakrishnan

Saurabh Rajpal

Notoriamente CSS non disponeva di un modo per selezionare direttamente un elemento principale in base e i relativi figli. Questa è da molti anni una delle richieste principali degli sviluppatori. La il selettore :has(), ora supportato da tutti i principali browser, risolve questo problema. Prima del giorno :has(), spesso ti capita di concatenare selettori lunghi o aggiungere classi per definire gli hook. Adesso che puoi definire in base alla relazione di un elemento con i relativi discendenti. Scopri di più sul selettore :has() in CSS Wrapped 2023 e 5 snippet CSS che ogni sviluppatore di frontend dovrebbe conoscere.

Sebbene questo selettore sembri piccolo, può consentire un numero enorme di casi d'uso. Questo articolo illustra alcuni casi d'uso che le aziende di e-commerce hanno sbloccato con Selettore :has().

:has() fa parte di Baseline Newly Available.

Consulta la serie completa di cui fa parte questo articolo, che illustra come le aziende di e-commerce hanno migliorato il proprio sito web utilizzando nuove funzionalità CSS e UI.

Bazar criteri

Con il selettore :has(), siamo stati in grado di eliminare la convalida basata su JavaScript della selezione dell'utente e sostituirla con una soluzione CSS che funzioni senza soluzione di continuità per noi, rimanendo la stessa esperienza di prima. Aman Soni, Tech Lead, Policybazaar

Il team per gli investimenti di Policybazaar ha abilmente applicato il selettore :has() per fornire una una chiara indicazione visiva per gli utenti che confrontano i piani. L'immagine seguente mostra due tipi di piani nell'interfaccia utente di confronto (giallo e blu). Ogni piano può essere confrontato solo con il suo tipo. Utilizzando :has(), quando un utente ne seleziona uno non è possibile selezionare l'altro tipo di piano.

Codice

:has() ti consente di accedere allo stile degli elementi principali e dei relativi elementi secondari. La Il seguente codice verifica se per un contenitore principale è impostata una classe .disabled-group. In questo caso, la scheda è in grigio e il pulsante "Aggiungi" viene impedito reazione ai clic impostando pointer-events su 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);
}

Il team per la salute di Policybazaar ha implementato un caso d'uso leggermente diverso. Hanno un quiz in linea per l'utente e usano :has() per selezionare lo stato della casella di controllo della domanda e vedere se è stata hanno risposto. In tal caso, viene applicata un'animazione per passare alla domanda successiva.

Codice

Nell'esempio di confronto dei piani, :has() è stato utilizzato per verificare la presenza di un . Puoi anche controllare lo stato di un elemento di input, ad esempio una casella di controllo, utilizzando :has(input:checked). Nel video che mostra il quiz, ogni domanda nel il banner viola è una casella di controllo. Policybazaar controlla se la domanda è stata ha risposto usando :has(input:checked) e, se lo ha fatto, attiva un'animazione utilizzando animation: quesSlideOut 0.3s 0.3s linear forwards per scorrere alla successiva domanda. Scopri come funziona nel seguente codice.

.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 ha utilizzato :has() per creare un'immagine overlay se la miniatura del prodotto contiene un video. Se la miniatura del prodotto contiene una classe .playIcon, un CSS viene aggiunto un overlay. In questo caso, il selettore :has() viene utilizzato insieme a & selettore di nidificazione all'interno della classe .thumbnailWrapper generale che si applica a tutte le miniature. Ciò crea CSS più modulari e leggibili.

Codice

Il seguente codice utilizza il parametro Selettori e combinatori CSS (& e >) e nidificazione con :has() per definire lo stile della miniatura. Per non di supporto dei browser, la regola della classe CSS aggiuntiva standard viene utilizzata come fallback. La La regola @supports selector(:has(*)) viene utilizzata anche per verificare il supporto dei browser. Di conseguenza, l'esperienza complessiva è la stessa per tutte le versioni del browser.

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

Aspetti da considerare quando si utilizza :has()

Combina :has() con altri selettori per creare una condizione più complessa. Controllo alcuni esempi in has() il selettore della famiglia.

Risorse:

• CSS Wrapped 2023
• :has(): il selettore della famiglia
• Demo :has()
• Vuoi segnalare un bug o richiedere una nuova funzionalità? Vogliamo conoscere la tua opinione.

Esplora gli altri articoli di questa serie che spiegano come l'e-commerce le aziende hanno tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI come le funzionalità di scorrimento animazioni, visualizzare transizioni, popover e query container.

• Perché le funzionalità dell'interfaccia utente web sono importanti per il tuo sito di e-commerce?
• Case study sulle animazioni basate sullo scorrimento
• Visualizza i case study sulle transizioni
• Case study Popover
• Case study di query sui container