Modifications de la syntaxe de positionnement de l'ancre

Una Kravets
Mason Freed
Mason Freed
X GitHub

Le positionnement des ancres CSS a été publié dans Chrome 125. Cette première version publique de l'API a déclenché des discussions supplémentaires sur la syntaxe . Suite à cette discussion, nous avons apporté quelques modifications mineures depuis le lancement de la fonctionnalité. Si vous avez déjà essayé le positionnement d'ancre CSS, cet article explique les modifications que vous devez apporter à votre code ou au contenu sur le positionnement d'ancre.

Il existe deux principaux changements de nom de propriété à prendre en compte:

  1. inset-area a été renommé position-area. Le groupe de travail CSS a préféré ce changement de nom, car la formulation position- vous aide à vous rappeler que cette propriété s'applique à l'élément positionné, et non à l'élément d'ancrage. Ce changement sera appliqué à partir de Chrome 129. inset-area sera compatible jusqu'à Chrome 131 pour vous laisser le temps de mettre à jour vos démonstrations ou articles.
  2. position-try-options a été renommé position-try-fallbacks. Ce changement de nom vous rappelle qu'il ne s'agit que de solutions de remplacement pour la position principale, qui est déterminée par les styles de base. Ce changement a été publié avec Chrome 128, et position-try-options ne fonctionne plus à partir de la version 128. Nous vous recommandons d'utiliser l'abréviation (en la remplaçant par position-try), qui fonctionne à partir de Chrome 125 et n'a pas changé.

Un autre changement de comportement est également à noter:

  • La syntaxe fonctionnelle inset-area() est supprimée de position-try. Par conséquent, utilisez position-try-fallbacks: top au lieu de position-try-fallbacks: inset-area(top). Ce changement sera également appliqué à partir de Chrome 129.

Pour en savoir plus sur l'utilisation du positionnement par ancrage, consultez les ressources suivantes: