Nova API Anchor Positioning otimiza posicionamento de UI e reduz dependência de JavaScript
Aprofundamento CEVIU
Linha do tempo
Suporte para Anchor Positioning API no Safari
Suporte para Anchor Positioning API no Firefox
Nova API Anchor Positioning otimiza posicionamento de UI e reduz dependência de JavaScript
Perguntas frequentes
O que é a API Anchor Positioning e para que serve?
A API Anchor Positioning permite alinhar elementos flutuantes da interface, como tooltips e menus suspensos, diretamente no CSS em relação a um elemento 'âncora'. Ela elimina a necessidade de JavaScript para gerenciar essas posições, simplificando o código e otimizando a performance.
Como a Anchor Positioning reduz a necessidade de JavaScript?
Historicamente, o posicionamento dinâmico e o tratamento de overflow de elementos flutuantes exigiam lógica JavaScript complexa. Com esta API, propriedades CSS como `anchor-name`, `position-anchor` e `position-try-fallbacks` assumem essa responsabilidade de forma declarativa, movendo a lógica para o navegador.
Qual a diferença no comportamento de fallback entre `position: absolute` e `position: fixed`?
Para que os fallbacks da API sejam ativados, o elemento-alvo precisa 'transbordar' de seu bloco de contenção. Com `position: fixed`, o bloco de contenção é a viewport, então o fallback age quando o elemento sai da tela. Com `position: absolute`, o bloco de contenção é um ancestral que rola junto, dificultando a detecção de 'overflow real' para o fallback.
O que o 'Level 2' da API Anchor Positioning adiciona?
O 'Level 2' introduz as 'anchored container queries'. Essa funcionalidade permite que desenvolvedores apliquem estilos CSS condicionais ao elemento-alvo com base em qual posição de fallback a API escolheu. Isso resolve o problema de, por exemplo, ajustar a direção de um indicador de tooltip quando ele inverte sua posição.
Fontes
- joshwcomeau.comfonte original
- Categoria
- CEVIU Web Dev
- Publicado
- 07 de julho de 2026
- Editoria
- CEVIU Web Dev