Anchor-name - Propriété CSS

Schéma de la syntaxe de anchor-name.

Description des termes utilisés sur le schéma :

• --id est un identifiant librement choisi, mais qui doit commencer par un double tiret.

Description de la propriété anchor-name.

Le positionnement en fixed ou absolute permet de placer des éléments n'importe où sur la page, sans tenir compte de l'emplacement imposé par les autres éléments. Cette possibilité est offerte par la propriété position.

Néanmoins cette possibilité devient très limitative lorsqu'il faut positionner un élément par rapport à un autre. C'est ici que le positionnement par ancrage devient utile. L'élément qui sert de référence pour le positionnement est appelé "ancre". Celui qui est positionné est appelé infobulle. Le positionnement est dynamique en fonction de la place qu'il y autour de l'ancre : s'il n'y a pas de place au dessus, l'infobulle peut être disposée en dessous, et vice-versa.

La propriété anchor-name attribue un nom (un identifiant) à un élément, qui devient alors un ancre. Il sera donc possible de positionner un autre élément avec la propriété anchor-position. Voyez aussi la propriété anchor-area qui définit où doit se placer cet élément par rapport à l'ancre.

Valeurs pour anchor-name.

• anchor-name: none;

  Aucun identifiant d'ancrage n'est associé à l'élément.

• anchor-name: --id;

  L'identifiant --id est attribué à l'élément qui devient alors un ancrage pour positionner d'autres éléments. Cette propriété suppose que l'élément définisse une boîte principale. Dans le cas contraire, cette propriété est sans effet.

  Dans notre exemple la propriété anchor-name applique à l'image l'identifiant --demo. Elle devient donc un ancrage pour d'autres éléments. Déplacer la souris sur l'image pour activer l'infobulle : un peu de Javascript gère l'affichage ou le masquage du texte positionné.

  Le texte positionné doit être en fixed ou absolute. Il reçoit en plus la propriété anchor-position qui définit sur quel ancre il doit s'aligner, et la propriété anchor-area qui définit comment il doit se positionner (ici au centre en dessous de l'ancre).

  Cet exemple ne fonctionne pas sur Firefox  , ni sur Safari  .

  
  Firefox
• anchor-name: --id1, --id2;

  Il est possible d'associer plusieurs identifiants à un même élément, en les séparant par une virgule.

• anchor-name: initial; (none) anchor-name: inherit; anchor-name: revert; anchor-name: revertLayer; anchor-name: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de anchor-name.

La propriété anchor-name peut être animée de façon discrete (passage brutal d'une valeur à une autre). Mais l'animation de propriété telles que anchor-area est plus spectaculaire.

Compatibilité des navigateurs avec anchor-name.

Certains navigateurs comme Firefox   ou Safari   traînent un peu pour implémenter les fonctionnalités de positionnement par ancrage.

1

Positionnement
par ancrage

2

Propriété
anchor-name

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

Opéra

Firefox pour Androïd

Chrome

Edge

Safari

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Histoire de la propriété anchor-name.

• Module CSS - Positionnement par ancrages - Niveau 1

  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

La propriété anchor-name est décrite dans le module CSS Anchor Positioning, ainsi que les autres propriétés relatives au positionnement par ancrage (2025).

Propriétés :

Directives :