Detectar posições de substituição com consultas de contêiner ancoradas do Chrome 143

Una Kravets

Publicado em: 29 de outubro de 2025

A partir do Chrome 143, é possível usar consultas de contêiner ancoradas para identificar quando um elemento ancorado está usando um posicionamento de âncora substituto. Esta postagem explica o problema que esse recurso resolve.

A API de posicionamento de âncora CSS oferece uma maneira eficiente de vincular um elemento (como um popover) a outro (a âncora) e definir um conjunto de substituições de tentativa de posição usadas se o elemento ficar sem espaço. Por exemplo, se o elemento fixo estiver inicialmente estilizado para ficar na parte de cima, mas, ao rolar a tela, ele atingir a borda, o navegador poderá lidar com a "inversão" para mantê-lo na janela de visualização.

No entanto, o nível 1 da especificação de posicionamento da âncora deixou uma lacuna significativa: embora o CSS pudesse mover o elemento para uma posição de substituição, não havia como saber qual substituição foi escolhida. Isso significa que não era possível aplicar estilos diferentes com base nessa posição final. Se a dica de ferramenta for invertida de baixo para cima, a seta ainda vai apontar para o lado errado, a menos que você corrija isso com JavaScript.

As consultas de contêiner ancoradas (definidas na especificação de posicionamento de âncora do CSS nível 2) resolvem esse problema, ao posicionamento de âncora do CSS a percepção contextual que estava faltando.

Como funciona: substituições de consultas

Com as consultas de contêiner ancoradas, é possível aplicar estilos com base em como o navegador resolveu o posicionamento da âncora.

Isso é configurado com dois novos recursos de CSS:

  • container-type: anchored: aplique isso ao elemento posicionado (por exemplo, sua dica). Isso o transforma em um contêiner de consulta "ciente" do estado de posicionamento da âncora.
  • @container anchored(fallback: ...): essa nova sintaxe de at-rule permite consultar qual opção de position-try-fallbacks foi usada por último.

Imagine que você tenha uma dica que quer posicionar na parte de baixo, mas com a posição de cima como alternativa. O seguinte código:

  • Inicialmente, tenta posicionar o .tooltip na parte de baixo da âncora (--my-anchor).
  • Se não couber, o substituto vai movê-lo para a parte de cima.
  • A consulta @container detecta isso. Quando o substituto principal é aplicado, a consulta anchored(fallback: top) se torna verdadeira.
  • Isso permite mudar o conteúdo do pseudoelemento ::before de uma seta "para cima" (▲) para uma seta "para baixo" (▼) e ajustar a posição dela.
/* The element our tooltip is anchored to */
.anchor {
  anchor-name: --my-anchor;
}

/* The positioned element (tooltip) */
.tooltip {
  /* Use anchor positioning to set fallbacks */
  position: absolute;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block; /* Reposition in the block direction */
  
  /* Make it an anchored query container */
  container-type: anchored;

  /* Add a default "up" arrow */
  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%; /* Sits on top of the tooltip, pointing up */
  }
}

/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* The 'top' fallback was used, so flip the arrow */
    content: '▼';
    bottom: auto;
    top: 100%; /* Move the arrow below the tooltip */
  }
}

Tudo isso é feito inteiramente em CSS, sem JavaScript, observadores ou classes extras. Observação: se você estiver usando a API popover, não será necessário nomear explicitamente as âncoras, porque uma relação de âncora implícita é criada.

Confira a demonstração a seguir, que usa o hack de borda para criar um triângulo CSS e o reposiciona com consultas ancoradas:

Conclusão

As consultas ancoradas oferecem ao CSS o reconhecimento nativo do navegador da posição de âncora atual de um elemento posicionado. Isso significa que você pode criar componentes muito mais resilientes e contextualizados. A seta da dica é apenas um exemplo. Você também pode:

  • Mudar a cor de fundo de um menu quando ele é invertido.
  • Mova um estilo de borda para a borda mais próxima da âncora.
  • Ajuste o border-radius em um popover para que o canto "anexado" seja quadrado.
  • Anima um elemento de maneira diferente com base na posição de substituição em que ele se encaixa.

Isso é uma grande vitória para o posicionamento de âncoras e bibliotecas de componentes em geral, permitindo elementos de interface mais robustos e independentes com menos código.

Recursos