Anchor-scope - Propriété CSS

Schéma de la syntaxe de anchor-scope.

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

• --id est un identifiant qui doit commencer par un double tiret.

Description de la propriété anchor-scope.

La propriété anchor-scope intervient dans le domaine du positionnement par ancrage. Elle modifie la portée de la propriété anchor-name.

Prenons l'exemple d'une série d'images représentant des moyens de transports. Chaque image reçoit une infobulle. Sur ce premier exemple (sans utilisation de anchor-scope) on voit que toutes les infobulles se superposent car elles se positionnent toutes par rapport à la dernière image.
Ces exemples ne fonctionne pas correctement sur Firefox   pour le moment.

Sur ce deuxième exemple, la propriété anchor-scope a été utilisée, en limitant la portée à chacune des images. Les infobulles sont correctement positionnées.

Voyez aussi la propriété anchor-name pour une synthèse des propriétés utiles pour le positionnement par ancrage.

Valeurs pour anchor-scope.

• anchor-scope: none;

  Pas de changement dans la portée des identifiants d'ancrage.

• anchor-scope: all;

  Spécifie que toutes les identifiants de positionnement sont maintenant limités à l'arbre des descendants de l'élément qui reçoit cette propriété. Une exception cependant : les identifiants qui sont déjà imités par une propriété anchor-scope.

• anchor-scope: --id;

  Spécifie la portée de l'identifiant --id. Celle-ci est maintenant limitée à l'élément qui reçoit cette propriété et à son sous-arbre (arbre des descendants).

  Plusieurs id peuvent être spécifiés, en les séparant par une virgule.

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

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

Exemple d'animation de anchor-scope.

La propriété anchor-scope peut être animé dans le type d'animation discrete, c'est à dire qu'elle passe d'une valeur à l'autre sans transition.

(ceci ne fonctionne pour le moment pas sur Firefox  ).

Exemple interactif avec la propriété anchor-scope.

L'identifiant de position défini sur chacune des images est --demo. Chacun des libellés fait déjà référence à cet identifiant pour se positionner. Il ne reste plus qu'à définir anchor-scope.

(ceci ne fonctionne pas sur Firefox   pour le moment (2025)).

Compatibilité des navigateurs avec anchor-scope.

Remarques :

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

1

Positionnement
par ancre

2

Propriété
anchor-scope

Estimation de la prise en charge globale.

71%

69%

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

Histoire de la propriété anchor-scope.

• 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 fonctions anchor() and anchor-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.

  Concernant anchor-scope. Première définition de la propriété anchor-scope.
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

Le positionnement par ancrage est une fonctionnalité relativement récente, décrite dans le module de spécification module CSS - Positionnement par ancrages. Les propriétés suivants sont également décrites dans ce module.

Propriétés :

Fonctions :

Directives :