Mudanças na sintaxe do posicionamento de âncoras

Una Kravets

Mason Freed

O posicionamento de âncoras de CSS foi lançado no Chrome 125. Essa primeira versão da API publicamente disponível desencadeou discussões adicionais sobre a sintaxe . Como resultado dessa discussão, houve algumas pequenas mudanças desde o lançamento do recurso. Se você já testou o posicionamento de âncoras de CSS, esta postagem explica as alterações que você precisa fazer no seu código ou o conteúdo sobre o posicionamento de âncoras.

Há duas renomeações de propriedade principais que você precisa conhecer:

1. inset-area foi renomeado como position-area. Essa renomeação foi preferida pelo grupo de trabalho do CSS porque a frase position- ajuda a lembrar que essa propriedade é aplicada ao elemento posicionado, não ao elemento âncora. Essa mudança terá suporte no Chrome 129, e o inset-area terá suporte até o Chrome 131 para que você tenha tempo de atualizar as demonstrações ou artigos que tiver.
2. position-try-options foi renomeado como position-try-fallbacks. Essa renomeação ajuda você a lembrar que são apenas substitutos para a posição principal, que é determinada pelos estilos base. Essa mudança que acompanha o Chrome 128 e o position-try-options não funciona mais a partir da versão 128. Recomendamos que você use a abreviação (alterando-a para position-try), que funciona no Chrome 125 e não mudou.

Há também mais uma mudança de comportamento:

• A sintaxe funcional inset-area() está sendo removida de position-try. Portanto, use position-try-fallbacks: top em vez de position-try-fallbacks: inset-area(top). Essa mudança também começará no Chrome 129.

Saiba mais sobre como usar o posicionamento da âncora aqui:

• Documentação do MDN
• Postagem de apresentação
• Ferramenta de fixação