La propriétéCSSanchor-scope permet de limiter la portée dans laquelle un élément positionné peut être associé à des éléments d'ancre à un sous-arbre particulier.

Syntaxe

/* Valeurs uniques */anchor-scope: none;anchor-scope: all;anchor-scope: --anchor-name;/* Valeurs multiples de <dashed-ident> */anchor-scope: --anchor-name, --another-name;/* Valeurs globales */anchor-scope: inherit;anchor-scope: initial;anchor-scope: revert;anchor-scope: revert-layer;anchor-scope: unset;

Valeurs

none

Aucun filtrage de portée d'ancre n'est appliqué à l'élément. Il s'agit de la valeur par défaut.

all

Définit la portée de sorte quetoutes les valeurs deanchor-name définies dans le sous-arbre ne puissent être associées qu'à des éléments positionnés dans ce même sous-arbre.

<dashed-ident>#

Un ou plusieurs<dashed-ident> séparés par des virgules représentant des noms d'ancre. Définit la portée de sorte que les valeurs deanchor-name spécifiées, lorsqu'elles sont définies dans le sous-arbre, ne puissent être associées qu'à des éléments positionnés dans ce même sous-arbre.

Description

Lorsque plusieurséléments d'ancre sur une page reçoivent la même valeuranchor-name et qu'un élément positionné est associé à ce nom d'ancre (en le spécifiant comme valeur de sa propriétéposition-anchor), l'élément positionné sera associé audernier élément d'ancre dans l'ordre du code source portant ce nom d'ancre.

Cela peut poser problème dans certaines situations. Par exemple, si un document contient plusieurs composants répétés, chacun avec un élément positionné rattaché à une ancre, tous les éléments positionnés seront rattachés à la dernière ancre de la page, sauf si chaque composant utilise un nom d'ancre différent. Ce n'est probablement pas le comportement souhaité.

La propriétéanchor-scope permet de corriger ce problème en limitant la visibilité, ou « portée », d'une valeuranchor-name à un sous-arbre spécifique. Le résultat est que chaque élément positionné ne peut être ancré qu'à un élément situé dans le même sous-arbre que l'élément sur lequel la portée est définie.

• anchor-scope: all définit la portée de sorte quetoutes les valeurs deanchor-name définies dans le sous-arbre ne puissent être associées qu'à des éléments positionnés dans ce même sous-arbre. Par exemple, si l'on inclut plusieurs ancres dans un document, toutes avecanchor-name: --my-anchor, et qu'on les place dans des conteneurs séparés, puis qu'on appliqueanchor-scope: all à chaque conteneur, alors un élément positionné à l'intérieur d'un de ces conteneurs et ayant--my-anchor comme valeur de sa propriétéposition-anchor sera positionné par rapport à l'ancre du même conteneur.

  De plus, si l'on crée un autre élément positionné en dehors des conteneurs et qu'on lui donne le même nom d'ancre ou un autre, il ne sera positionné par ancre par rapport à aucune des ancres, peu importe si les ancres possèdent ces noms dans leur propriétéanchor-name.anchor-scope: all limite la portée des ancres pour les conteneurs sur lesquels il est appliqué àtoutes les ancres, quel que soit leanchor-name, uniquement aux éléments positionnés à l'intérieur des mêmes conteneurs.

• anchor-scope: <dashed-ident># définit la portée de sorte que les valeurs deanchor-name spécifiées, lorsqu'elles sont définies dans le sous-arbre, ne puissent être associées qu'à des éléments positionnés dans ce même sous-arbre. Si l'on reprend l'exemple précédent mais qu'on change la valeur deanchor-scope sur les conteneurs pour--my-anchor :

  • Les éléments positionnés avecposition-anchor: --my-anchor seront limités à la portée imposée par le paramètreanchor-scope. Ils ne seront positionnés par rapport aux ancres que s'ils sont placés à l'intérieur des conteneurs.

  • En revanche, les éléments positionnés avec d'autres valeurs deposition-anchor — par exemple,--another-anchor —peuvent être positionnés par rapport à l'une des ancres, qu'ils soient placés à l'intérieur ou à l'extérieur des conteneurs, à condition d'ajouter le nom d'ancre--another-anchor à la propriétéanchor-name de l'ancre. La propriétéanchor-scope ne limite la portée que pour le nom d'ancre--my-anchor, elle n'a donc aucun effet sur les autres noms d'ancre.

    Si plusieurs ancres reçoivent le nom d'ancre--another-anchor, les éléments positionnés avec cette valeur deposition-anchor seront positionnés par rapport à la dernière ancre dans l'ordre du code source portant ce nom.

• anchor-scope: none est la valeur par défaut, ce qui signifie qu'aucune portée d'ancre n'est définie. Si plusieurs ancres existent dans un document avec le mêmeanchor-name et qu'un élément positionné reçoit ce nom comme valeur de sa propriétéposition-anchor, il sera positionné par rapport à la dernière ancre dans l'ordre du code source, quel que soit son emplacement dans la hiérarchie du DOM.

Si, par exemple, vous avez trois valeursanchor-name définies dans un sous-arbre (par exemple,--anchor1,--anchor2 et--anchor3), définiranchor-scope: --anchor1, --anchor2, --anchor3 sur l'élément de plus haut niveau du sous-arbre serait équivalent à définiranchor-scope: all.

Les portées d'ancre n'affectent que lesassociations d'ancre explicites, c'est-à-dire celles établies entre un élément d'ancre avec unanchor-name défini et un élément positionné faisant référence au nom d'ancre de l'élément d'ancre dans sa valeurposition-anchor. Les portées d'ancre n'affectent pas lesassociations d'ancre implicites.

Pour plus d'informations sur les fonctionnalités et l'utilisation des ancres, consultez le modulePositionnement par ancre CSS et le guideUtilisation du positionnement par ancre CSS.

Définition formelle

Syntaxe formelle

anchor-scope =
none|
all|
<anchor-name>#

<anchor-name> =
<dashed-ident>

Exemples

Utilisation simple

Cet exemple montre comment fonctionne la portée d'ancre à un niveau basique. Il montre comment un élément d'ancre à l'intérieur d'un conteneur avec une portée peut être limité à n'avoir que des éléments positionnés à l'intérieur du même conteneur associés à lui.

HTML

Nous définissons un élément HTML<section> sur lequel nous allons définir une portée d'ancre. Celui-ci contient deux éléments HTML<div>, un qui sera transformé en ancre et un qui sera un élément positionné par ancre.

Nous incluons également un troisième<div> en dehors du<section>, qui sera aussi transformé en élément positionné par ancre.

<section>  <div>⚓︎</div>  <div>Position 1</div></section><div>Position 2</div>

CSS

Nous commençons par définiranchor-scope: --my-anchor sur le<section>. Cela limite sa portée de sorte que les descendants du<section> ayant un nom d'ancre--my-anchor ne puissent être associés qu'à des éléments positionnés qui sont aussi des descendants du<section>.

Pour tester cela, nous déclarons le<div>anchor comme élément d'ancre en lui attribuant unanchor-name de--my-anchor. Nous positionnons ensuite absolument les éléments.positioned, les associons à l'ancre en définissant leurposition-anchor à--my-anchor, et les positionnons à droite de l'ancre en définissant leurposition-area àright :

.scoped {  padding: 20px;  background: #eeeeee;}.anchor {  font-size: 1.8rem;  color: white;  text-shadow: 1px 1px 1px black;  background-color: blue;  width: fit-content;  padding: 3px;}.positioned {  background: orange;  width: fit-content;  padding: 3px;}

.scoped {  anchor-scope: --my-anchor;}.anchor {  anchor-name: --my-anchor;}.positioned {  position: absolute;  position-anchor: --my-anchor;  position-area: right;}

Résultat

L'exemple s'affiche ainsi :

Remarquez que le premier élément positionné est placé à droite de l'ancre. Il est dans la portée pour être positionné par rapport à l'ancre--my-anchor, car il est à l'intérieur de l'élément<section> oùanchor-scope: --my-anchor est défini.

En revanche, le second élément positionné n'est pas positionné par rapport à l'ancre. Il n'est pas un descendant de l'élément<section>, il est donc hors de la portée d'ancre.

Comparaison des différentes valeurs deanchor-scope

Cet exemple montre les effets des différentes valeurs deanchor-scope en vous permettant d'appliquer différentes valeurs à plusieurs conteneurs, tous contenant des ancres avec la même valeur deanchor-name.

HTML

Nous définissons trois éléments HTML<section> sur lesquels nous allons définir une portée d'ancre. Chaque<section> contient deux éléments HTML<div>, un qui sera transformé en ancre et un qui sera un élément positionné par ancre.

Nous incluons également un<div> supplémentaire en dehors des éléments<section>, qui sera aussi transformé en élément positionné par ancre. Celui-ci aura des paramètres de positionnement d'ancre différents des autres.

Enfin, nous incluons un<form> contenant trois différents<input type="radio"> pour permettre de définir différentes valeurs deanchor-scope sur les éléments<section>.

<section>  <div>⚓︎</div>  <div>Position 1</div></section><section>  <div>⚓︎</div>  <div>Position 2</div></section><section>  <div>⚓︎</div>  <div>Position 3</div></section><div>Position 4</div><form>  <fieldset>    <legend>Sélectionnez une valeur pour <code>anchor-scope</code></legend>    <input type="radio" name="scope" value="all" checked />    <label for="all"><code>all</code></label>    <input type="radio" name="scope" value="--my-anchor" />    <label for="my-anchor"><code>--my-anchor</code></label>    <input type="radio" name="scope" value="none" />    <label for="none"><code>none</code></label>  </fieldset></form>

CSS

Nous commençons par définir nos éléments d'ancre comme ancres en leur donnant deux valeursanchor-name :--my-anchor et--another-anchor.

body {  display: flex;  justify-content: center;  gap: 50px;  margin-top: 5px;}.scoped {  padding: 20px;  background: #eeeeee;  border: 2px solid #dddddd;  border-radius: 10px;  width: 100px;  height: 100px;}.anchor {  font-size: 1.8rem;  color: white;  text-shadow: 1px 1px 1px black;  background-color: blue;  width: fit-content;  padding: 3px;}.positioned,.positioned2 {  border: 1px solid black;  border-radius: 3px;  width: fit-content;  padding: 3px 6px;  box-shadow: 3px 3px 3px rgb(0 0 0 / 0.2);}form {  position: absolute;  bottom: 5px;  right: 5px;}

.anchor {  anchor-name: --my-anchor, --another-anchor;}

Ensuite, nous positionnons nos éléments.positioned par rapport à un élément d'ancre. Nous les positionnons absolument, leur donnons une valeurposition-anchor de--my-anchor pour les associer à une ancre, et les positionnons par rapport à l'ancre avec une valeurposition-area deright.

L'élément.positioned2 est positionné de façon similaire, sauf qu'il reçoit l'autre nom d'ancre disponible comme valeur deposition-anchor —--another-anchor — et il est positionné en bas de l'ancre. Nous lui donnons aussi une valeurbottom de5px, de sorte que si le positionnement par ancre ne fonctionne pas, il sera positionné en bas du<body>. Cet élément n'est contenu dans aucun élément avec une portée, il ne sera donc positionné par ancre que lorsque certaines valeurs deanchor-scope sont définies sur les éléments avec portée, comme expliqué plus loin.

.positioned {  position: absolute;  position-anchor: --my-anchor;  position-area: right;}.positioned2 {  position: absolute;  bottom: 5px;  position-anchor: --another-anchor;  position-area: bottom;}

La gestion de la définition deanchor-scope sur les éléments HTML<section> lors de la sélection des boutons radio est assurée par du JavaScript, qui a été masqué pour plus de clarté.

const sections = document.querySelectorAll("section");const form = document.querySelector("form");function updateScope(val) {  sections.forEach((section) => (section.style.anchorScope = val));}form.addEventListener("input", (e) => {  updateScope(e.target.value);});updateScope("all");

Résultat

L'exemple s'affiche comme suit :

Observez l'effet initial de positionnement appliqué aux éléments positionnés avecanchor-scope: all défini sur les éléments<section>, puis essayez de sélectionner les autres valeurs disponibles pour voir leur effet. Vous devriez observer les comportements suivants :

• all : La portée pour le positionnement des éléments par rapport aux éléments d'ancre descendants des éléments<section> est limitée aux éléments positionnés qui sont eux-mêmes descendants des éléments<section>, quel que soit la valeur deanchor-name utilisée pour les associer. Ainsi, les éléments positionnés à l'intérieur des éléments<section> (« Position 1 à 3 ») sont positionnés par ancre comme prévu, mais l'élément positionné en dehors des éléments<section> (« Position 4 ») ne l'est pas. Il est hors de la portée.
• --my-anchor : La portée pour le positionnement des éléments par rapport aux éléments d'ancre descendants des éléments<section> est limitée aux éléments positionnés qui sont eux-mêmes descendants des éléments<section>, uniquement si la valeur d'ancre--my-anchor est utilisée pour les associer. Ainsi, les éléments positionnés à l'intérieur des éléments<section> (« Position 1 à 3 ») sont positionnés par ancre comme prévu, et l'élément positionné en dehors des éléments<section> (« Position 4 ») est aussi positionné par ancre comme prévu. Dans le premier cas, les éléments positionnés sont à l'intérieur de la portée définie, et dans le second cas, l'élément positionné n'est pas affecté par la portée définie, car il utilise un nom d'ancre hors de la portée (--another-anchor). L'élément « Position 4 » est positionné par rapport au dernier élément d'ancre dans le code source qui possède le nom d'ancre correspondant.
• none : Aucune portée d'ancre n'est définie sur les éléments<section>, tous les éléments positionnés sont donc positionnés par rapport au dernier élément d'ancre dans l'ordre du code source.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriétéanchor-name
• La propriétéposition-anchor
• Le modulePositionnement par ancre CSS
• Le guideUtilisation du positionnement par ancre CSS