Études de cas :has()

Swetha Gopalakrishnan

Saurabh Rajpal

Le CSS n'offre pas de moyen de sélectionner directement un élément parent en fonction ses enfants. Cela fait partie des principales demandes des développeurs depuis de nombreuses années. La Le sélecteur :has(), désormais compatible avec tous les principaux navigateurs, permet de résoudre ce problème. Avant :has(), vous devez souvent enchaîner de longs sélecteurs ou ajouter des classes pour définir le style des hooks. Maintenant vous pouvez appliquer un style basé sur la relation d'un élément avec ses descendants. En savoir plus concernant le sélecteur :has() dans CSS en 2023 et Cinq extraits CSS que tous les développeurs de l'interface doivent connaître.

Bien que ce sélecteur semble petit, il peut prendre en charge un grand nombre de cas d'utilisation. Cet article présente quelques cas d'utilisation que les entreprises d'e-commerce ont permis de débloquer Sélecteur :has().

:has() fait partie de Baseline Newly Available.

Consultez la série complète de cet article, qui explique comment les entreprises d'e-commerce ont amélioré leur site Web à l'aide de nouvelles fonctionnalités CSS et d'interface utilisateur.

Policybazaar

Avec le sélecteur :has(), nous avons pu éliminer la validation basée sur JavaScript de la sélection de l'utilisateur et la remplacer par une solution CSS qui fonctionne en toute sérénité, avec la même expérience qu'auparavant. Aman Soni, responsable technique, Policybazaar

L'équipe chargée des investissements de Policybazaar a appliqué le sélecteur :has() de manière astucieuse pour fournir un une indication visuelle claire pour les utilisateurs qui comparent les forfaits. L'image suivante affiche deux types de forfaits dans l'interface utilisateur de comparaison (jaune et bleu). Chaque forfait ne peuvent être comparés qu'à son propre type. En utilisant :has(), lorsqu'un utilisateur en sélectionne une type de forfait, vous ne pouvez pas sélectionner l'autre type de forfait.

Code

:has() vous permet d'appliquer un style aux éléments parents et à leurs enfants. La Le code suivant vérifie si une classe .disabled-group est définie pour un conteneur parent. Si c'est le cas, la fiche est grisée et le bouton "Ajouter" est bloqué. réagissant aux clics en définissant pointer-events sur 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);
}

L'équipe Santé de Policybazaar a implémenté un cas d'utilisation légèrement différent. Elle propose un quiz intégré à l'utilisateur et utilise :has() pour vérifier l'état de la case à cocher de la question et voir si la question était répondu. Si c'est le cas, une animation est appliquée pour passer à la question suivante.

Code

Dans l'exemple de comparaison de plans, :has() a été utilisé pour vérifier la présence d'un . Vous pouvez également vérifier l'état d'un élément d'entrée tel qu'une case à cocher en utilisant :has(input:checked) Sur l'image illustrant le quiz, chaque question de la bannière violette est une case à cocher. Policybazaar vérifie si la question a été répondu à l'aide de :has(input:checked) et, le cas échéant, déclencher une animation à l'aide de animation: quesSlideOut 0.3s 0.3s linear forwards pour passer à la suivante cette question. Découvrez comment cela fonctionne dans le code suivant.

.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 a utilisé :has() pour créer une image de superposition si la vignette du produit contient une vidéo. Si la miniature du produit contient une classe .playIcon, un code CSS la superposition est ajoutée. Ici, le sélecteur :has() est utilisé avec le &. sélecteur d'imbrication dans la classe .thumbnailWrapper globale qui s'applique à toutes les miniatures. Le code CSS est ainsi plus modulaire et plus lisible.

</ph>

Code

Le code suivant utilise la classe Sélecteurs et combinateurs CSS (& et >) et l'imbrication avec :has() pour appliquer un style à la vignette. Pour les services autres que la règle de classe CSS supplémentaire standard est utilisée en remplacement. La La règle @supports selector(:has(*)) permet également de vérifier la compatibilité des navigateurs. Par conséquent, l'expérience globale est la même sur toutes les versions de navigateur.

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

Éléments à prendre en compte lors de l'utilisation de :has()

Combinez :has() avec d'autres sélecteurs pour créer une condition plus complexe. Chèque quelques exemples dans has() le sélecteur de famille.

Ressources :

• Version CSS 2023
• :has(): sélecteur de famille
• Démonstrations :has()
• Voulez-vous signaler un bug ou demander une nouvelle fonctionnalité ? Votre avis nous intéresse

Lisez les autres articles de cette série sur l'e-commerce entreprises ont profité de l'utilisation de nouvelles fonctionnalités CSS et UI, comme les animations, les transitions de vue, les pop-ups et les requêtes de conteneur.

• Pourquoi les fonctionnalités de l'UI Web sont-elles importantes pour votre site d'e-commerce ?
• Études de cas sur les animations liées au défilement
• Consulter les études de cas sur Transitions
• Études de cas Popover
• Études de cas sur les requêtes de conteneur