Anchor-name - Propriété CSS
Résumé des caractéristiques de la propriété anchor-name
nonenoneanchor-name passe d'une valeur à l'autre sans transition.Per grammar : sérialisation dans l'ordre de la syntaxe.Schéma de la syntaxe de anchor-name.
anchor-name.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma.
Description des termes utilisés sur le schéma :
--idest 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é position-anchor. Voyez aussi la propriété position-area qui définit où doit se placer cet élément par rapport à l'ancre.
Voici les propriétés et fonctions minimales à connaître pour réaliser un positionnement par ancrage :
anchor-name :position :position doit absolument être positionnée sur fixed ou absolute.anchor(), ces propriétés positionnent un des côtés de l'élément par rapport à l'ancre.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.
Valeurs pour anchor-name.
- anchor-name: none;
Aucun identifiant d'ancrage n'est associé à l'élément.
- anchor-name: --id;
L'identifiant
--idest 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-nameapplique à l'image l'identifiant--demo. Elle devient donc un ancrage pour d'autres éléments comme le texte d'infobulle.Le texte positionné (infobulle) doit être en
fixedouabsolute. Il reçoit en plus la propriétéposition-anchorqui définit sur quel ancre il doit s'aligner, et la propriétéposition-areaqui définit comment il doit se positionner, ici à droite de l'ancre.
Firefox
Les noms d'ancrage n'ont pas besoin d'être uniques. Si plusieurs éléments partagent un même nom d’ancre et sont tous visibles, l’ancre prise en compte sera l’ancêtre le plus proche, ou sinon le dernier dans l’ordre du DOM. La propriétéanchor-scopepeut être utilisée pour limiter davantage les noms d'ancrage visibles.D'autre part, les noms d'ancrage ne sont pas limités par les conteneurs ; même si un élément est un conteneur de mise en page (ou tout type de conteneur), les noms d'ancrage sont visibles par des éléments ailleurs sur la page.
- 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: revert-layer; anchor-name: revert-rule; anchor-name: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,revert-rule,unset.
Tutoriel sur le positionnement par ancrage.
Le positionnement.
On connaît la propriété position qui permet de sortir un élément du flux de données pour le positionner librement par rapport à la fenêtre
ou à la page. On utilise pour cela ses propriétés top, right, bottom et left.
Notre barre d'index par exemple est positionnée. Elle reste en haut de l'écran sans défiler avec la page.
#idx {
position:absolute;
top:0px;
...
}
Cette solution ne permet pas de positionner un élément par rapport à un autre par exemple pour réaliser une infobulle.
Le positionnement par ancrage permet cela. C'est une extension de ce que peut faire la propriété position.
Voici quelques utilisations du positionnement par ancrage :
- Infobulles.
- Messages d'erreur concernant une zone de saisie dans un formulaire.
- Menus contextuels.
Le positionnement par ancrage.
Il faut tout d'abord désigner l'élément qui servira d'ancre. Cela se fait avec la propriété anchor-name, en lui attribuant un nom d'ancre.
Celui-ci doit obligatoirement commencer par un double tiret.
Ensuite, tous les éléments qui doivent être positionnés par rapport à cet ancre le sont par la propriété position-anchor.
On notera que la propriété position est toujours nécessaire, avec la valeur absolute ou fixed.
Désigner l'ancre et la nommer.
#tuto-anchor {
anchor-name:--demo;
}
Associer des éléments à l'ancre.
#tuto {
position:absolute;
position-anchor:--demo;
}
Voici ce que cela donne sur un exemple. Cliquez sur le bouton pour afficher le code CSS. On voit bien la propriété anchor-name sur le
premier élément. Elle définit le nom de cet élément du point de vue de l'ancrage (--demo1). Sur l'autre élément, on retrouve les propriétés
position et position-anchor, ainsi que les propriété top et left.
Elles utilisent une fonction anchor() dont nous reparlerons.
par rapport à l'ancre.
Positionner par rapport à l'ancre.
On se souvient que les propriétés top, right, bottom et left permettent de positionner un élément dans
le cas d'un positionnement classique. C'est toujours elles qui vont agir dans le positionnement par ancrage, mais avec la fonction anchor().
Voici trois exemples qui utilisent la fonction anchor().
Tout se passe comme si la fonction renvoyait la position de l'un des bords de l'ancre.
left:anchor(left);
bottom:anchor(top);left:anchor(right);
top:anchor(center);left:anchor(center);
top:anchor(bottom);
Dimensionner par rapport à l'ancre.
Il est possible non seulement de positionner l'élément par rapport à l'ancre mais également de le dimensionner par rapport à cette ancre. En faisant
appel là aussi à une fonction : anchor-size(). Celle-ci renvoie la largeur ou la hauteur de l'ancre. Elle accepte les paramètres width
ou height.
La syntaxe accepte l'écriture de width:anchor-size(height); mais cela n'a pas beaucoup de sens.
width:
anchor-size
(width);height:anchor-size(height);Une autre façon de positionner.
Il existe une autre méthode pour positionner les éléments par rapport à l'ancre : la propriété position-area qui gère aussi bien la position
horizontale que verticale. Voici les principales valeurs pour position-area, mais il y en a beaucoup d'autres.
left topcenter topright topleft centerright centerleft bottomcenter bottomright bottomA toutes ces valeurs s'ajoute center center qui superpose l'élément à l'ancre. Nous ne l'avons pas fait apparaître pour ne pas surcharger
le dessin. Il est également possible de travailler en prenant en compte le mode d'écriture de la langue avec les valeurs start et
end. Et même de positionner l'élément à cheval sur deux emplacements avec le mot span, etc.
Le mot center peut toujours être omis. right est équivalent à right center.
Voici un exemple qui n'utilise que les valeurs simples top, right, bottom et left. Reportez-vous
à la page sur la propriété position-anchor pour découvrir toutes les possibilités.
position-area:top;position-area:right;position-area:bottom;position-area:left;
Optimisez la position.
Il arrive souvent que, lors d'un défilement ou sur un effet de zoom, l'élément positionné disparaissent de l'écran, alors que l'ancre est toujours visible.
par exemple si l'élément positionné est au dessus de l'ancre, il disparaîtra avant l'ancre lors d'un défilement vers le bas.
Il est possible de définir plusieurs positions afin que le navigateur puisse choisir celle qui convient le mieux à la situation actuelle.
La propriété position-try-fallbacks (ou la propriété résumée position-try) permet de définir une autre position afin que le navigateur
puisse choisir celle qui convient le mieux à la situation actuelle.
Pour un fonctionnement correct, la propriété position doit avoir la valeur fixed. En faisant défiler l'écran vous constaterez
que l'élément positionné passe au dessus ou en dessous de l'ancre lorsqu'il disparaît en bas ou en haut de l'écran, de façon à être toujours le dernier
à disparaître entre lui-même et l'ancre.
position-try:top;:
Il y a souvent plus à définir que la position : il faut souvent changer les marges, l'alignement, etc. La directive @position-try permet de
regrouper toutes ces propriétés sous un seul nom commençant par un double tiret. Cet identifiant peut ensuite être utilisé avec position-try-fallbacks.
@position-try --top {
position-try-fallbacks:top;
margin-bottom:10px;
}
Pour en savoir plus.
Le positionnement par ancrage est une des fonctionnalités les plus puissantes de CSS. Nous n'avons fait ici qu'esquisser toutes ces possibilités. Reportez vous aux différentes propriétés pour plus d'informations.
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).
Voici ce qu'il est possible de faire en animation anchor-name.
navigateur
Compatibilité des navigateurs avec anchor-name.
La prise en charge de la propriété anchor-name est maintenant correcte sur tous les grands navigateurs.
anchor-name.Remarques :
(1) Samsung Internet ne supporte pas la propriété position-anchor avec la valeur normal.
Et ne supporte pas complètement la propriété anchor-visibility.
(2) Android Browser ne supporte pas la propriété position-anchor avec la valeur normal.
Il ne supporte pas non plus complètement la propriété anchor-visibility.
(3) Ne supporte pas totalement la propriété anchor-visibility.
(4) Firefox ne permet pas l'animation des fonctions anchor() et anchor-size().
Il ne supporte pas non plus totalement la propriété anchor-visibility.
(5) Opéra ne supporte pas la propriété position-anchor avec la valeur normal.
Il ne supporte pas non plus complètement la propriété anchor-visibility.
par ancrage
anchor-nameNavigateurs 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
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
KaiOS Browser
Opéra
Safari
Safari sur IOS
Opéra mini
Histoire de la propriété anchor-name.
-
Module CSS - Positionnement par ancrages - Niveau 1
Le positionnement absolu par rapport à la page ou à l'écran peut s'avérer limité lorsque l'on souhaite positionner un élément par rapport à une autre.
Cette spécification décrit les propriétés nécessaires pour réaliser cela, ainsi que les fonctionsanchor()andanchor-size()qui permettent de fixer la position et les dimensions d'un élément en fonction d'un autre.
Elle décrit également comment tester plusieurs possibilités de positionnement pour s'adapter au contexte, en particulier à l'état du défilement de la page.Concernantanchor-nameIntroduction de la propriétéanchor-namedans ce premier niveau de la spécification.
29 Juin 2023Document de travail.
Voir aussi, à propos des positionnement par ancrage.
La propriété anchor-name est décrite dans le module module CSS - Positionnement par ancrages, ainsi que les autres propriétés relatives au
positionnement par ancrage.
Propriétés :
anchor-name.position-try-fallbacks et position-try-order.position-try-fallbacks.