Apresentação da API de posicionamento de âncoras CSS

A API CSS Anchor Positioning é um divisor de águas no desenvolvimento da Web porque permite posicionar elementos de maneira nativa em relação a outros elementos, conhecidos como âncoras. Essa API simplifica os requisitos complexos de layout para muitos recursos de interface, como menus e submenus, dicas de ferramentas, seleções, rótulos, cards, caixas de diálogo de configurações e muito mais. Com o posicionamento de âncoras integrado ao navegador, você pode criar interfaces de usuário em camadas sem depender de bibliotecas de terceiros, abrindo um mundo de possibilidades criativas.

O posicionamento da âncora está disponível no Chrome 125.

Principais conceitos: âncoras e elementos posicionados

A base dessa API é a relação entre âncoras e elementos posicionados. Uma âncora é um elemento designado como um ponto de referência usando a propriedade anchor-name. Um elemento posicionado é colocado em relação a uma âncora usando a propriedade position-anchor ou explicitamente usando anchor-name na lógica de posicionamento.

Configurar âncoras

A criação de uma âncora é simples. Aplique a propriedade de nome da âncora ao elemento selecionado e atribua a ele um identificador exclusivo. Esse identificador exclusivo precisa ser precedido por um traço duplo, assim como uma variável CSS.

.anchor-button {
    anchor-name: --anchor-el;
}

Após a atribuição de um nome para a âncora, .anchor-button serve como uma âncora, pronta para orientar o posicionamento de outros elementos. É possível conectar essa âncora a outros elementos de duas maneiras:

Âncoras implícitas

A primeira maneira de conectar uma âncora a outro elemento é com uma âncora implícita, como no exemplo de código a seguir. A propriedade position-anchor será adicionada ao elemento que você quer conectar à âncora e tem o nome da âncora (neste caso, --anchor-el) como um valor.

.positioned-notice {
    position-anchor: --anchor-el;
}

Com uma relação implícita de âncora, você pode posicionar elementos usando a função anchor() sem especificar explicitamente o nome da âncora no primeiro argumento.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Âncoras explícitas

Como alternativa, é possível usar o nome da âncora diretamente na função dela (por exemplo, top: anchor(--anchor-el bottom). Esse recurso é chamado de âncora explícita e pode ser útil se você quiser fixar vários elementos (leia um exemplo).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Posicionar elementos em relação às âncoras

O posicionamento de âncora se baseia no posicionamento absoluto do CSS. Para usar valores de posicionamento, você precisa adicionar position: absolute ao elemento posicionado. Em seguida, use a função anchor() para aplicar valores de posicionamento. Por exemplo, para posicionar um elemento ancorado no canto superior esquerdo dele, use o seguinte posicionamento:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

Agora você tem um elemento ancorado a outro, assim:

.

Para usar o posicionamento lógico para esses valores, os equivalentes são os seguintes:

• top = inset-block-start
• left= inset-inline-start
• bottom = inset-block-end
• right= inset-inline-end

Centralizar um elemento posicionado com anchor-center

Para facilitar a centralização do elemento posicionado como âncora em relação à âncora, há um novo valor chamado anchor-center, que pode ser usado com as propriedades justify-self, align-self, justify-items e align-items.

Este exemplo modifica o anterior usando justify-self: anchor-center para centralizar o elemento posicionado sobre a âncora.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

.

Várias âncoras

Os elementos podem ser vinculados a mais de uma âncora. Isso significa que pode ser necessário definir valores de posição que são posicionados em relação a mais de uma âncora. Para isso, use a função anchor() e informe explicitamente a qual âncora você está se referindo no primeiro argumento. No exemplo a seguir, a parte superior esquerda de um elemento posicionado é ancorada à parte inferior direita de uma âncora, e a parte inferior direita do elemento posicionado está ancorada no canto superior esquerdo da segunda âncora:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

.

Posição com inset-area

Além do posicionamento direcional padrão do posicionamento absoluto, há um novo mecanismo de layout incluído na API de ancoragem chamado área inserida.

A área inserida facilita a colocação de elementos de ancoragem em relação a suas respectivas âncoras e funciona em uma grade de nove células com o elemento de ancoragem no centro.

Várias opções possíveis de posicionamento de área inserida, mostradas na grade de nove células

Para usar a área inserida em vez de posicionamento absoluto, use a propriedade inset-area, com valores físicos ou lógicos. Exemplo:

• Parte superior central: inset-area: top ou inset-area: block-start
• Esquerda ao centro: inset-area: left ou inset-area: inline-start
• Parte central inferior: inset-area: bottom ou inset-area: block-end
• Centralizado à direita: inset-area: right ou inset-area: inline-end

.

.

Para explorar mais essas posições, confira a seguinte ferramenta:

Dimensionar os elementos com anchor-size()

A função anchor-size(), também parte da API de posicionamento de âncora, pode ser usada para dimensionar ou posicionar um elemento de posicionamento de âncora com base no tamanho da âncora (largura, altura ou tamanhos in-line e de blocos).

O CSS a seguir mostra um exemplo de como usar isso para altura,usando anchor-size(height) em uma função calc() para definir a altura máxima da dica como duas vezes a altura da âncora.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

.

Use a âncora com elementos da camada superior, como pop-over e caixas de diálogo

O posicionamento de âncoras funciona muito bem com elementos de camada superior, como popover. e <dialog>. Embora esses elementos sejam colocados em uma camada separada do restante da subárvore do DOM, o posicionamento da âncora permite que você os vincule novamente e role junto com os elementos que não estão na camada superior. Isso é uma grande vantagem para interfaces em camadas.

No exemplo a seguir, um conjunto de pop-ups de dicas é acionado usando um botão. O botão é a âncora, e a dica é o elemento posicionado. É possível estilizar o elemento posicionado como qualquer outro elemento ancorado. Para este exemplo específico, anchor-name e position-anchor são estilos in-line no botão e na dica. Como cada âncora precisa de um nome exclusivo, ao gerar conteúdo dinâmico, a criação inline é a maneira mais fácil de fazer isso.

.

Ajustar as posições de âncora com @position-try

Depois de ter sua posição inicial da âncora, você pode ajustar a posição se a âncora alcançar as bordas do bloco que a contém. Para criar posições de âncora alternativas, use a diretiva @position-try com a propriedade position-try-options.

No exemplo a seguir, um submenu é exibido à direita de um menu. Menus e submenus são um ótimo uso da API de posicionamento da âncora com o atributo popover, já que eles tendem a ser ancorados a um botão de gatilho.

Se não houver espaço horizontal suficiente no submenu, mova-o para baixo do menu. Para fazer isso, primeiro defina a posição inicial:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

Em seguida, configure as posições ancoradas substitutas usando @position-try:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Por fim, conecte os dois usando position-try-options. Juntamente, o resultado ficará assim:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

.

Palavras-chave de rotação automática da posição de âncora

Se você tiver um ajuste básico, como virar de cima para baixo ou da esquerda para a direita (ou ambos), poderá pular a etapa de criação de declarações @position-try personalizadas e usar as palavras-chave de inversão com suporte do navegador, como flip-block e flip-inline. Elas funcionam como substitutos para declarações @position-try personalizadas e podem ser usadas em conjunto:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Inverter palavras-chave pode simplificar significativamente seu código âncora. Com apenas algumas linhas, é possível criar uma âncora totalmente funcional com posições alternativas:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

.

position-visibility para âncoras em subscrollers

Em alguns casos, talvez você queira ancorar um elemento em um sub-rolar da página. Nesses casos, é possível controlar a visibilidade do anúncio âncora usando position-visibility. Quando o anúncio âncora permanece em exibição? Quando ela desaparece? Você tem controle sobre essas opções com este recurso. Use position-visibility: anchors-visible quando quiser que o elemento posicionado permaneça visível até que a âncora fique fora de visualização:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

.

Como alternativa, use position-visibility: no-overflow para evitar que a âncora transfira o contêiner.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

.

Detecção de recursos e polyfilling

Como a compatibilidade com navegadores é limitada no momento, é recomendável usar essa API com algumas precauções. Primeiro, verifique o suporte diretamente no CSS usando a consulta de recurso @supports. A maneira de fazer isso é envolver os estilos de âncora da seguinte maneira:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Além disso, é possível usar o polyfill para o recurso de posicionamento de âncoras com o polyfill de posicionamento de âncoras CSS da Oddbird, que funciona no Firefox 54, Chrome 51, Edge 79 e Safari 10. Esse polyfill oferece suporte à maioria dos recursos básicos de posição de âncora, embora a implementação atual não esteja completa e contenha algumas sintaxes desatualizadas. É possível usar o link desse recurso ou importá-lo diretamente em um gerenciador de pacotes.

Observação sobre acessibilidade

Embora a API de posicionamento de âncoras permita que um elemento seja posicionado em relação a outros, ela não cria inerentemente nenhuma relação semântica significativa entre eles. Se realmente houver uma relação semântica entre o elemento âncora e o elemento posicionado (por exemplo, o elemento posicionado é um comentário da barra lateral sobre o texto da âncora), uma maneira de fazer isso é usar aria-details para apontar do elemento âncora para os elementos posicionados. O software leitor de tela ainda está aprendendo a lidar com aria-details, mas o suporte está melhorando.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Se você estiver usando o posicionamento de âncoras com o atributo popover ou com um elemento <dialog>, o navegador vai processar as correções de navegação de foco para garantir a acessibilidade adequada. Assim, você não precisa colocar os pop-ups ou caixas de diálogo na ordem do DOM. Leia mais na observação sobre acessibilidade na especificação.

Conclusão

Esse é um recurso novo, e estamos animados para ver o que você vai criar com ele. Até agora, vimos alguns casos de uso interessantes da comunidade, como rótulos dinâmicos em gráficos, linhas de conector, notas de rodapé e referência cruzada visual. Enquanto você testa o posicionamento de âncoras, adoraríamos receber seu feedback. Se você encontrar algum bug, entre em contato conosco.

Leitura adicional

• Desenhar uma linha para conectar elementos com o posicionamento de âncora do CSS
• CSS futuro: posicionamento da âncora por Roman Komarov
• Coleção Codepen de demonstrações de âncora do Una (em inglês)
• Ferramenta de posicionamento de âncora