Estudos de caso de :has()

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

O CSS sempre teve uma falta notória de uma maneira de selecionar diretamente um elemento pai com base nos filhos. Esse é um dos principais pedidos dos desenvolvedores há muitos anos. O seletor :has(), agora compatível com todos os principais navegadores, resolve esse problema. Antes de :has(), você costumava encadear seletores longos ou adicionar classes para ganchos de estilo. Agora é possível definir o estilo com base na relação de um elemento com os descendentes. Saiba mais sobre o :has() seletor em CSS Wrapped 2023 e 5 snippets de CSS que todo desenvolvedor de front-end precisa conhecer.

Embora esse seletor pareça pequeno, ele pode ativar um grande número de casos de uso. Este artigo mostra alguns casos de uso que as empresas de e-commerce desbloquearam com o seletor :has().

Confira a série completa da qual este artigo faz parte, que discute como as empresas de e-commerce aprimoraram o site usando novos recursos de CSS e de interface.

Policybazaar

Com o seletor :has(), conseguimos eliminar a validação baseada em JavaScript da seleção do usuário e substituí-la por uma solução de CSS que funciona perfeitamente para nós com a mesma experiência de antes.—Aman Soni, líder técnico, Policybazaar

A equipe de investimentos da Policybazaar aplicou o seletor :has() de maneira inteligente para fornecer uma indicação visual clara aos usuários que estão comparando planos. A imagem a seguir mostra dois tipos de planos na interface de comparação (amarelo e azul). Cada plano só pode ser comparado com o próprio tipo. Ao usar :has(), quando um usuário seleciona um tipo de plano, o outro não pode ser selecionado.

Implementação de :has() para definir o estilo do elemento pai e dos filhos para criar uma funcionalidade de seleção vinculada à categoria.

Código

:has() dá acesso a elementos pai e filhos de estilo. O código a seguir verifica se um contêiner pai tem uma classe .disabled-group definida. Se tiver, o card fica esmaecido, e o botão "Adicionar" é impedido de reagir a cliques definindo 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);
}

A equipe de saúde da Policybazaar implementou um caso de uso um pouco diferente. Eles têm um teste on-line para o usuário e usam :has() para verificar o status da caixa de seleção da pergunta e saber se ela foi respondida. Se sim, uma animação é aplicada para fazer a transição para a próxima pergunta.

health.policybazaar.com/

Código

No exemplo de comparação de planos, :has() foi usado para verificar a presença de uma classe. Também é possível verificar o estado de um elemento de entrada, como uma caixa de seleção, usando :has(input:checked). No visual que mostra o teste, cada pergunta no banner roxo é uma caixa de seleção. A Policybazaar verifica se a pergunta foi respondida usando :has(input:checked) e, se tiver sido, aciona uma animação usando animation: quesSlideOut 0.3s 0.3s linear forwards para passar para a próxima pergunta. Confira como isso funciona no código a seguir.

.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

A Tokopedia usou :has() para criar uma imagem de sobreposição se a miniatura do produto contiver um vídeo. Se a miniatura do produto contiver uma classe .playIcon, uma sobreposição de CSS será adicionada. Aqui, o seletor :has() é usado com o seletor de aninhamento & na classe abrangente .thumbnailWrapper, que se aplica a todas as miniaturas. Isso cria um CSS mais modular e legível.

Captura de tela da página da Tokopedia antes e depois do uso do seletor "has".
Antes e depois de usar :has().

Código

O código a seguir usa os seletores e combinadores de CSS (& e >) e o aninhamento com :has() para definir o estilo da miniatura. Para navegadores não compatíveis, a regra de classe CSS adicional normal é usada como substituto. A regra @supports selector(:has(*)) também é usada para verificar a compatibilidade do navegador. Portanto, a experiência geral é a mesma em todas as versões do 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;
    }
  }
`;

O que considerar ao usar :has()

Combine :has() com outros seletores para criar uma condição mais complexa. Confira alguns exemplos em has() o seletor de família.

Recursos:

Confira os outros artigos desta série, que falam sobre como as empresas de e-commerce se beneficiaram do uso de novos recursos de CSS e de interface, como animações controladas por rolagem, transições de visualização, pop-over e consultas de contêiner.