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 défini par anchor-name. Il doit commencer par un double tiret.
• Plusieurs ID peuvent être spécifiés, séparés par une virgule.

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. Elle est utile lorsque plusieurs élément ont le même d=identifiant d'ancre.

Pour que la propriété anchor-scope fonctionne correctement, l'élément positionné doit être un enfant de l'élément qui sert d'ancre. Le positionnement par ancrage peut très bien fonctionner sans cela : associer un élément à une ancre sans qu'il y ait de lien de parenté entre les deux. Mais alors les ancres doivent avoir un identifiant unique, ce qui n'est pas toujours possible lorsque les éléments sont générés de façon automatique.

Prenons l'exemple d'une série d'images représentant des moyens de transports. Chaque image reçoit une infobulle. Toutes ces images ont le même identifiant d'ancre. 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.

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. Vous trouverez aussi sur cette page un tutoriels sur 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à limité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: revert-layer; anchor-scope: revert-rule; anchor-scope: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, revert-rule, 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.

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

L'identifiant de position défini sur chacune des trois premières images est --demo1. Les suivantes ont reçu --demo2. Chacun des libellés fait déjà référence à l'un ou l'autre des identifiants pour se positionner. Il ne reste plus qu'à définir anchor-scope.

Compatibilité des navigateurs avec anchor-scope.

La propriété anchor-scope est bien reconnue par tous les navigateurs modernes.

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.

1

Positionnement
par ancre

2

Propriété
anchor-scope

Estimation de la prise en charge globale.

86%

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

1

Androïd Brower

2

Chrome

3

Chrome pour Androïd

3

Edge

3

Firefox

4

Firefox pour Androïd

4

KaiOS Browser

Opéra

5

Safari

Safari sur IOS

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 suivantes sont également décrites dans ce module.

Propriétés :

Fonctions :

Directives :