:heeft() casestudy's

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Het is bekend dat CSS geen manier heeft om rechtstreeks een bovenliggend element te selecteren op basis van de onderliggende elementen. Dit is al jaren een veelgevraagd verzoek van ontwikkelaars. De :has() selector, nu ondersteund door alle grote browsers, lost dit op. Vóór :has() maakte je vaak lange selectors aan elkaar of voegde je klassen toe voor het stylen van hooks. Nu kunt u de stijl bepalen op basis van de relatie van een element met zijn nakomelingen. Lees meer over de :has() selector in CSS Wrapped 2023 en 5 CSS-fragmenten die elke frontend-ontwikkelaar zou moeten kennen .

Hoewel deze selector klein lijkt, kan deze een groot aantal gebruiksscenario's mogelijk maken. Dit artikel toont enkele gebruiksscenario's die e-commercebedrijven hebben ontgrendeld met de :has() selector.

:has() is onderdeel van Baseline Newly Available .

Browserondersteuning

  • Chroom: 105.
  • Rand: 105.
  • Firefox: 121.
  • Safari: 15.4.

Bron

Bekijk de volledige serie waar dit artikel deel van uitmaakt, waarin wordt besproken hoe e-commercebedrijven hun website hebben verbeterd met behulp van nieuwe CSS- en UI-functies.

Beleidsbazaar

Met de :has() selector konden we op JavaScript gebaseerde validatie van de selectie van de gebruiker elimineren en vervangen door een CSS-oplossing die naadloos voor ons werkt met dezelfde ervaring als voorheen.— Aman Soni , Tech Lead, Policybazaar

Het Investment-team van Policybazaar heeft op slimme wijze de :has() selector toegepast om een ​​duidelijke visuele indicatie te bieden aan gebruikers die plannen vergelijken. De volgende afbeelding toont twee typen plannen binnen de vergelijkingsinterface (geel en blauw). Elk plan kan alleen worden vergeleken met zijn eigen type. Door :has() te gebruiken, kan een gebruiker, wanneer hij het ene type plan selecteert, het andere plantype niet selecteren.

Implementatie van :has() om het bovenliggende element en de onderliggende elementen op te maken om een ​​categoriegebonden selectiefunctionaliteit te creëren.

Code

:has() geeft u toegang tot bovenliggende stijlelementen en hun kinderen. De volgende code controleert of een bovenliggende container een klasse .disabled-group heeft. Als dit het geval is, wordt de kaart grijs weergegeven en kan de knop 'Toevoegen' niet reageren op klikken door pointer-events op none in te stellen.

.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);
}

Het gezondheidsteam van Policybazaar implementeerde een iets andere use case. Ze hebben een inline quiz voor de gebruiker en gebruiken :has() om de status van het selectievakje voor de vraag te controleren om te zien of de vraag is beantwoord. Als dit het geval is, wordt er een animatie toegepast om naar de volgende vraag te gaan.

gezondheid.policybazaar.com/

Code

In het planvergelijkingsvoorbeeld werd :has() gebruikt om de aanwezigheid van een klasse te controleren. U kunt ook de status van een invoerelement, zoals een selectievakje, controleren met :has(input:checked) . In de afbeelding van de quiz is elke vraag in de paarse banner een selectievakje. Policybazaar controleert of de vraag is beantwoord met :has(input:checked) en als dat het geval is, activeert hij een animatie met behulp van animation: quesSlideOut 0.3s 0.3s linear forwards om naar de volgende vraag te schuiven. Bekijk hoe dit werkt in de volgende code. 

.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 gebruikte :has() om een ​​overlay-afbeelding te maken als de miniatuur van het product een video bevat. Als de productthumbnail een klasse .playIcon bevat, wordt een CSS-overlay toegevoegd. Hier wordt de :has() selector gebruikt samen met de & nesting selector binnen de overkoepelende klasse .thumbnailWrapper die van toepassing is op alle miniaturen. Hierdoor ontstaat meer modulaire en leesbare CSS.

Schermafbeelding van de Tokopedia-pagina voor en na het gebruik van de has-selector.
Voor en na het gebruik van :has() .

Code

De volgende code gebruikt de CSS-selectors en combinators ( & en > ) en nesten met :has() om de miniatuur op te maken. Voor niet-ondersteunende browsers wordt de reguliere aanvullende CSS-klasseregel gebruikt als reserve. De @supports selector(:has(*)) regel wordt ook gebruikt om te controleren op browserondersteuning. Daarom is de algehele ervaring hetzelfde in alle browserversies. 

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

Dingen waarmee u rekening moet houden bij het gebruik van :has()

Combineer :has() met andere selectors om een ​​complexere voorwaarde te creëren. Bekijk enkele voorbeelden in has() de family selector .

Bronnen:

Ontdek de andere artikelen in deze serie waarin wordt besproken hoe e-commercebedrijven profiteerden van het gebruik van nieuwe CSS- en UI-functies, zoals scrollgestuurde animaties, weergaveovergangen, popover- en containerquery's.