Mudanças na sintaxe do posicionamento de âncoras

Una Kravets

Mason Freed

O posicionamento de âncora CSS foi lançado no Chrome 125. Essa primeira versão da API disponível publicamente gerou outras discussões sobre a sintaxe . Como resultado dessa discussão, algumas mudanças sutis foram feitas desde o lançamento do recurso. Se você já tentou usar o posicionamento de âncora do CSS, esta postagem explica as mudanças que precisa fazer no código ou conteúdo sobre o posicionamento de âncora.

Há duas mudanças de nome 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 vai começar no Chrome 129, e o inset-area vai ser compatível até o Chrome 131 para que você tenha tempo de atualizar as demonstrações ou artigos.
2. position-try-options foi renomeado como position-try-fallbacks. Essa renomeação ajuda você a lembrar que esses são apenas substitutos da posição principal, que é determinada pelos estilos básicos. Essa mudança foi lançada com o Chrome 128, e position-try-options não funciona mais a partir da versão 128. Recomendamos que você use a abreviação (mudando para position-try), que funciona no Chrome 125 e não mudou.

Há também outra mudança comportamental:

• 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 vai começar no Chrome 129.

Saiba mais sobre o uso do posicionamento de âncora:

• Documentação do MDN
• Post de introdução
• Ferramenta de ancoragem