`Anchor-name` - Propriété CSS

anchor-name

Résumé des caractéristiques de la propriété `anchor-name`

Description rapide

Défiinit un identifiant pour l'élément qui peut dès lors devenir une ancre.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Valeurs prédéfinies

none

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété anchor-name passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Positionnement par ancrages

Références (W3C)

CSS Anchor Positioning - Level 1

Statut du document: WD (document de travail)

Schéma de la syntaxe de `anchor-name`.

Schéma syntaxique de la propriété anchor-name.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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`.

⚠

Cette propriété est encore expérimentale et mal reconnue par plusieurs grands navigateurs (voyez notre Tableau de compatibilité plus bas sur cette page.

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é position-anchor. Voyez aussi la propriété position-area qui définit où doit se placer cet élément par rapport à l'ancre.

Voici quelles sont les propriétés qui interviennent dans le positionnement par ancrage :

anchor-name :

Défiinit un identifiant pour l'élément qui peut dès lors devenir une ancre.

position :

La propriété position doit absolument être positionnée sur fixed ou absolute.

position-anchor :

Définit par rapport à quelle ancre doit se positionner l'élément.

position-area :

Définit comment se positionne un élément par rapport à l'ancre (au dessus, à côté, etc.).

position-try :

Propriété raccourcie qui résume les valeurs pour position-try-fallbacks et position-try-order.

position-try-fallbacks :

Spécifie une liste de position pour l'élément positionné (positionnement par ancrage) afin que le navigateur puisse choisir celle qui est le plus adapté à un moment donné, compte tenu des défilements ou des zooms.

position-try-order :

Définit un ordre différent pour les valeurs énumérées par position-try-fallbacks.

position-visibility :

Définit si l'élément positionné est visible ou pas, dans le contexte d'un positionnement par ancrage.

anchor-scope :

Définit la portée de la propriété anchor-name.

anchor() :

Renvoie la position d'un des bords de l'élément désigné comme ancre (positionnement par ancrage).

anchor-size() :

Renvoie la teille (hauteur ou largeur) de l'élément désigné comme l'ancre (positionnement par ancrage).

left, right, top et bottom :

Utilisées avec les fonctions anchor(), ces propriétés positionnent un des côtés de l'élément par rapport à l'ancre.

width et height :

Utilisées avec la fonction anchor-size(), ces propriétés dimensionnent un élément par rapport à l'ancre.
Les propriétés min-width, min-height, max-width et max-height peuvent aussi être utilisées, ainsi que les propriétés sensibles au mode l'écriture en fonction de la langue.

@position-try :

Définit un ensemble de règles pour chacune des position d'ancrage et leur donne un nom (positionnement par ancrage).

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é position-anchor qui définit sur quel ancre il doit s'aligner, et la propriété position-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 position-area est plus spectaculaire.

Firefox

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.

Colonne 1

Prise en charge générale du positionnement par ancrage.

Colonne 2

Support de la propriété anchor-name.

Remarques :

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

Positionnement
par ancrage

Propriété
anchor-name

Estimation de la prise en charge globale.

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

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

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).