Fallstudien zu :has()

Swetha Gopalakrishnan

Saurabh Rajpal

Bisher war es in CSS nicht möglich, ein übergeordnetes Element direkt ihre untergeordneten Elemente. Dies wird von Entwicklern schon seit vielen Jahren am häufigsten gefordert. Die Der :has()-Selektor wird jetzt von allen gängigen Browsern unterstützt und löst dieses Problem. Vorher :has() haben Sie oft lange Selektoren verkettet oder Klassen für Stil-Hooks hinzugefügt. Jetzt können Sie Stile basierend auf der Beziehung eines Elements zu seinen Nachfolgerelementen gestalten. Mehr erfahren zur :has()-Auswahl in CSS Wrapped 2023 und Fünf CSS-Snippets, die jeder Frontend-Entwickler kennen sollte.

Obwohl dieser Selektor klein erscheint, kann er viele Anwendungsfälle ermöglichen. Dieser Artikel zeigt einige Anwendungsfälle, die E-Commerce-Unternehmen mit dem :has()-Auswahl.

:has() ist Teil von Baseline neu verfügbar.

Sehen Sie sich die vollständige Reihe an, zu der dieser Artikel gehört. Darin wird die E-Commerce-Unternehmen ihre Website mit neuen CSS- und UI-Funktionen optimiert.

Richtlinienbasar

Mit dem :has()-Selektor konnten wir die JavaScript-basierte Validierung eliminieren der Auswahl des Nutzers und ersetzen Sie diese durch eine funktionierende CSS-Lösung. nahtlos für uns mit der gleichen Erfahrung wie zuvor. –Aman Soni, Tech Lead, Policybazaar

Das Investmentteam von Policybazaar hat die :has()-Auswahl geschickt eingesetzt, um eine eine klare visuelle Anzeige für Nutzende, die Pläne vergleichen. In der folgenden Abbildung zeigt zwei Arten von Tarifen auf der Vergleichsoberfläche an (gelb und blau). Jeder Plan nur mit ihrem eigenen Typ verglichen werden kann. Durch die Verwendung von :has(), wenn ein Nutzer ein Element auswählt Der Tariftyp des anderen Tariftyps kann nicht ausgewählt werden.

Code

Mit :has() haben Sie Zugriff auf die Gestaltung von übergeordneten Elementen und deren untergeordneten Elementen. Die Der folgende Code prüft, ob für einen übergeordneten Container die Klasse .disabled-group festgelegt ist. Ist dies der Fall, ist die Karte ausgegraut und Schaltfläche wird daran gehindert, sich auf Klicks reagieren, indem Sie pointer-events auf none setzen.

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

Das Gesundheitsteam von Policybazaar hat einen etwas anderen Anwendungsfall. Die Nutzenden haben ein Inline-Quiz, :has(), um den Status des Kästchens zu prüfen und zu sehen, ob die Frage beantwortet. Ist dies der Fall, wird eine Animation angewendet, um zur nächsten Frage überzugehen.

Code

Im Beispiel für einen Tarifvergleich wurde :has() verwendet, um zu prüfen, ob eine . Sie können auch den Status eines Eingabeelements, z. B. eines Kästchens, mithilfe von :has(input:checked) In der Grafik, die das Quiz zeigt, ist jede Frage im lila Banner ist ein Kästchen. Der PolicyBazaar prüft, ob die Frage mit :has(input:checked) beantwortet und falls ja, eine Animation auslösen mit animation: quesSlideOut 0.3s 0.3s linear forwards, um zum nächsten zu springen Frage. Im folgenden Code sehen Sie, wie dies funktioniert.

.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 hat mit :has() ein Overlay-Bild erstellt, wenn das Produkt-Thumbnail ein Video enthält. Wenn die Produkt-Miniaturansicht eine .playIcon-Klasse enthält, wird ein CSS-Code wird ein Overlay hinzugefügt. Hier wird der Selektor „:has()“ zusammen mit dem & verwendet Verschachtelungsauswahl in der übergreifenden Klasse .thumbnailWrapper, die angewendet wird auf alle Thumbnails angewendet. Dadurch wird modularer und besser lesbarer CSS-Code erstellt.

</ph>

Code

Der folgende Code verwendet die Methode CSS-Selektoren und Kombinatoren (& und >) und Verschachtelung mit :has(), um das Thumbnail zu gestalten. Für nicht unterstützende Browsern wird die reguläre zusätzliche CSS-Klassenregel als Fallback verwendet. Die Die Regel „@supports selector(:has(*))“ wird auch verwendet, um die Browserunterstützung zu prüfen. Das Gesamterlebnis ist daher in allen Browserversionen gleich.

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

Was bei der Verwendung von :has() zu beachten ist

Kombinieren Sie :has() mit anderen Selektoren, um eine komplexere Bedingung zu erstellen. Prüfen finden Sie unter has() (Familienauswahl) einige Beispiele.

Ressourcen:

• CSS Wrapped 2023
• :has(): die Familienauswahl
• Demos :has()
• Möchtest du einen Fehler melden oder eine neue Funktion vorschlagen? Ihre Meinung ist uns wichtig.

Lesen Sie auch die anderen Artikel dieser Reihe, in denen es um E-Commerce geht. Unternehmen profitierten von neuen CSS- und UI-Funktionen wie Scroll-orientierte Animationen, Anzeigenübergänge, Popover- und Containerabfragen.

• Warum sind Funktionen der Weboberfläche für Ihre E-Commerce-Website wichtig?
• Fallstudien zu scrollbaren Animationen
• Fallstudien zu Übergängen ansehen
• Fallstudien zu Popovers
• Fallstudien zu Containerabfragen