Anchor() - Fonction CSS

Description de la fonction anchor().

⚠

La fonction anchor() n'est pas reconnue par tous les navigateurs. Seul Opera   et les navigateurs basés sur webkit reconnaissent parfaitement cette fonction.

Dans un positionnement par ancrage, deux élément sont nécessaires :

• L'ancre : un élément qui a reçu un identifiant avec anchor-name.
• Un élément positionné : un élément qui est associé à l'ancre avec la propriété position-anchor.

La fonction anchor() précise le positionnement de l'élément positionné : à gauche, à droite, etc. Elle s'utilise avec les propriétés top, bottom, left et right ou leurs équivalents sensibles au mode d'écriture. Elle remplace de ce point de vue la propriété position-area.

Voici un exemple de positionnement par ancrage. Sur l'échantillon de code, on n'a repris que les propriétés indispensables au positionnement.

Si vous désirez en savoir plus sur le positionnement par ancrage, nous vous invitons à consulter la page sur anchor-name qui donne la liste des termes utiles dans ce domaine.

La valeur anchor() peut être utilisée avec les propriétés suivantes :

• bottom : Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
• inset : Définit la position de l'élément lorsque celui-ci est positionné autrement qu'en statique. Raccourci pour top, right, bottom et left.
• inset-block : Définit l'emplacement d'un élément positionné, dans la direction des blocs. Raccourci pour inset-block-start et inset-block-end.
• inset-block-end : Pour un élément positionné, définit l'emplacement du côté fin de block.
• inset-block-start : Pour un élément positionné, définit l'emplacement du bord coté début de block.
• inset-inline : Définit l'emplacement d'un élément positionné dans la direction des lignes. Raccourci pour inset-inline-start et inset-inline-end.
• inset-inline-end : Sur un élément positionné, définit l'emplacement du bord situé en fin de ligne.
• inset-inline-start : Pour un élément positionné, définit l'emplacement du côté début de ligne.
• left : Pour un élément positionné, définit l'espace entre le bord gauche de l'élément et le bord gauche de l'élément de référence.
• right : Pour un élément positionné, définit l'espace entre le bord droit de l'élément et le bord droit de l'élément de référence.
• top : Pour un élément positionné, définit l'espace entre le haut de l'élément et le haut de l'élément de référence (parent positionné ou viewport).

Syntaxes de la fonction anchor().

• top: anchor(top);

  top définit la position du haut de l'élément, bottom définit le bas, left le coté gauche, et, enfin, right le coté droit. Pour positionner un élément il faut que ses deux coordonnées soient spécifiées avec les propriétés top ou bottom pour l'axe vertical et left ou right pour l'axe horizontal.
  Les valeurs fournies à ces propriétés peuvent être une fonction anchor(). Le paramètre de la fonction indique quel coté de l'ancre doit être utilisé comme référence. Sur l'exemple la coordonnées horizontale est left:anchor(right):.

  Nous donnons ci-dessous un exemple avec top et bottom mais la situation serait tout à fait comparable avec left et right.

  ⚓

  top:anchor(top); left:anchor(right);

  top:anchor(bottom); left:anchor(right);

  bottom:anchor(top); left:anchor(right);

  bottom:anchor(bottom); left:anchor(right);

  Il n'est pas logique de mélanger l'axe vertical et l'axe horizontal. Écrire par exemple top:anchor(left), bien que la syntaxe accepte ces écritures.

• top: anchor(center);

  La valeur center s'adapte à l'axe nécessaire : avec top et bottom il s'agira de l'axe vertical, avec left et right ce sera l'axe horizontal.

  ⚓

  top:anchor(center); left:anchor(right);

  bottom:anchor(center); left:anchor(right);

  left:anchor(center); bottom:anchor(top);

  right:anchor(center);
top:anchor(bottom);
• top: anchor(inside); top: anchor(outside);

  Avec les valeurs inside et outside on retrouve le même fonctionnement qu'avec les valeurs top et bottom.
  C'est la même chose avec les autres propriétés left, right et bottom.

  ⚓

  top:anchor(inside);
left:anchor(inside);

  top:anchor(outside);
left:anchor(outside);
• inset-inline-start: anchor(start); inset-inline-start: anchor(end); inset-inline-start: anchor(self-start); inset-inline-start: anchor(self-end);

  Ces valeurs sont sensibles au mode d'écriture en fonction de la langue :

  • De l'ancre pour start et end.
  • De l'élément positionné pour self-start et self-end.

   

  ---

  Mode d'écriture : Langues latines Langues arabes Langues CJK Langue mongole Langues hébraïques

  ---

  ⚓

  inset-block-start:anchor(start);
inset-inline-start:anchor(start);

  -

  inset-block-start:anchor(end);
inset-inline-start:anchor(end);
• top: anchor(20%);

  Il est possible aussi d'indiquer un pourcentage. Celui-ci est calculé par rapport aux dimensions de l'ancre dans la direction considérée (horizontale pour left et right, verticale pour top et bottom).

  ⚓

  top:anchor(10%); left:anchor(50%);

  bottom:anchor(90%); left:anchor(90%);
• top: anchor(--anchor top, 20%);

  La syntaxe autorise de préciser l'identifiant d'une l'ancre qui n'est pas forcément l'ancre utilisé par position-anchor. D'ailleurs position-anchor doit toujours être présente. Il est donc possible d'aligner un composant sur une autre ancre que celle qui a été définie.

  Sur l'exemple ci-dessous l'élément est toujours positionné suivant l'image de l'ancre, mais sa position verticale est définie par rapport à l'image de la cible.

  ⚓

  🎯

  top:anchor(--syntax2 top, 25%);
left:anchor(right%);

  Dans le cas où cet identifiant n'existe pas, le pourcentage est utilisé par rapport au premier élément positionné rencontré en remontant l'arbre. Sur l'exemple ci-dessous, l'identifiant --absent n'a pas été défini. On utilise alors le pourcentage sur le cadre "description1".

  ⚓

  top:anchor(--absent top, 25%);
left:anchor(right);
  id="description1"

Simulateur avec la fonction anchor().

Le simulateur définit la position verticale top, la position horizontale étant fixée à right:anchor(left);.

Support de la fonction anchor().

Remarques :

(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.anchor-positioning.enabled à true.

1

Positionnement
par ancrage

2

Fonction
anchor()

Estimation de la prise en charge globale.

71%

71%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

1

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction anchor().

• Module CSS - Positionnement par ancrages - Niveau 1

  Introduction dans cette spécification du positionnement par ancrage, et de la fonction anchor().
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, concernant les positionnements par ancrage.

La spécification du W3C qui définit le positionnement par ancrage est CSS Anchor Positioning. Elle décrit surtout des propriétés mais on trouve également quelques fonctions.

Propriétés :

Fonctions :

Directives :