Casos de éxito de :has()

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

CSS tiene una gran falta de una manera de seleccionar directamente un elemento superior basado en sus hijos. Esta ha sido una de las principales solicitudes de los desarrolladores durante muchos años. El El selector :has(), que ahora es compatible con todos los navegadores principales, resuelve este problema. Antes :has(), a menudo encadenas selectores largos o agregas clases para diseñar hooks. Ahora puedes aplicar ajustes de diseño según la relación de un elemento con sus elementos subordinados. Más información sobre el selector :has() en Cierre de CSS de 2023 y 5 fragmentos de CSS que todo desarrollador de frontend debe conocer.

Aunque este selector parece pequeño, puede habilitar una gran cantidad de casos de uso. En este artículo, se muestran algunos casos de uso que las empresas de comercio electrónico aprovecharon con el Selector :has().

:has() forma parte de Baseline Newly Disponible.

Navegadores compatibles

  • Chrome: 105
  • Edge: 105.
  • Firefox: 121
  • Safari: 15.4.

Origen

Consulta la serie completa de la que forma parte este artículo, en la que se analiza cómo Las empresas de comercio electrónico mejoraron su sitio web con nuevas funciones de IU y CSS.

Bazar de políticas

Con el selector :has(), pudimos eliminar la validación basada en JavaScript. de la selección del usuario y reemplazarla con una solución CSS que funciona sin problemas para nosotros con la misma experiencia que antes. Aman Soni, líder de Tecnología, Policybazaar

El equipo de inversión de Policybazaar aplicó inteligentemente el selector :has() para proporcionar un una clara indicación visual para los usuarios que comparan planes. La siguiente imagen muestra dos tipos de planes en la IU de comparación (amarillo y azul). Cada plan solo pueden compararse con su propio tipo. Mediante :has(), cuando un usuario selecciona uno no se puede seleccionar el otro tipo de plan.

.
Implementa :has() para aplicar diseño a los elementos superiores y los elementos secundarios de modo de crearlos una funcionalidad de selección vinculada a la categoría.

Código

:has() te permite acceder a elementos superiores de diseño y sus elementos secundarios. El El siguiente código verifica si un contenedor superior tiene configurada una clase .disabled-group. Si es así, la tarjeta aparecerá inhabilitada, y el botón "Agregar" se evita que el botón reaccionando a los clics configurando pointer-events como 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);
}

El equipo de salud de Policybazaar implementó un caso de uso ligeramente diferente. Tienen un cuestionario intercalado para el usuario y usan :has() para marcar el estado de la casilla de verificación de la pregunta y ver si se respondió respondido. De ser así, se aplica una animación para hacer la transición a la siguiente pregunta.

.
health.policybazaar.com/

Código

En el ejemplo de comparación de planes, se usó :has() para verificar la presencia de una . También puedes verificar el estado de un elemento de entrada, como una casilla de verificación, con :has(input:checked) En la imagen que muestra el cuestionario, cada pregunta de la el banner púrpura es una casilla de verificación. El bazar de políticas comprueba si se realizó la pregunta se responda con :has(input:checked) y, si es así, activa una animación con animation: quesSlideOut 0.3s 0.3s linear forwards para pasar a la siguiente pregunta. Observa cómo funciona en el siguiente código.

.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 usó :has() para crear una imagen superpuesta si la miniatura del producto contiene un video. Si la miniatura del producto contiene una clase .playIcon, se crea un CSS. se agrega una superposición. Aquí, el selector :has() se usa junto con el &. selector de anidación dentro de la clase general .thumbnailWrapper que se aplica a todas las miniaturas. Esto crea un código CSS más modular y legible.

Captura de pantalla de la página de Tokopedia antes y después de usar el selector.
Antes y después de usar :has().

Código

El siguiente código usa la Selectores y combinadores CSS (& y >) y anidando con :has() para definir el estilo de la miniatura. Para no de apoyo navegadores, la regla de clase CSS adicional normal se usa como resguardo. El La regla @supports selector(:has(*)) también se usa para verificar la compatibilidad del navegador. Por lo tanto, la experiencia general es la misma en todas las versiones del navegador.

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

Aspectos que debes tener en cuenta cuando usas :has()

Combina :has() con otros selectores para crear una condición más compleja. Cheque Puedes ver algunos ejemplos en has() el selector de familia.

Recursos:

Explora los otros artículos de esta serie sobre cómo el comercio electrónico empresas se beneficiaron con el uso de nuevas funciones de CSS y de IU, como las basadas en desplazamientos como animaciones, transiciones de vistas, ventanas emergentes y consultas de contenedores.