@position-try - Directive CSS

Description de la directive @position-try.

Le positionnement par ancrage permet de positionner un élément par rapport à un autre (l'ancre). Ce dernier à reçu un identifiant par la propriété anchor-name. Le ou les éléments positionnés lui sont associés par la propriété position-anchor.

La directive @position-try définit un identifiant pour un ensemble de propriétés. Ce nom pourra être utilisé ensuite par la propriété position-try-fallbacks ou la propriété résumée position-try. Toutes les propriétés de @position-try sont alors appliquées. L'identifiant doit commencer par un double tiret.

La syntaxe de base de la directive @position-try est la suivante :

The only properties allowed in the list are:

• Les propriétés de dimension : width, height, min-height, max-height, etc.
• Les propriétés qui définissent des marges : margin-top, margin-right, margin-block-start, margin-inline-start, etc. et les propriétés résumées correspondantes.
• Les propriétés de positionnement : top, inset-block-start, etc. et les propriétés résumées correspondantes.
• Les propriétés d'alignement de l'élément lui-même : align-self, justify-self et place-self.
• La propriété position-anchor et la propriété position-area.

La clause !important est invalide dans une directive @position-try. Son utilisation rend la propriété invalide, mais le reste de la directive demeure valide.

Pour plus de renseignements sur le positionnement par ancrage, la page anchor-name donne la liste des termes utiles et un tutoriel sur le positionnement par ancrage.

Exemples d'utilisation de la directive @position-try.

Le texte est d'abord positionné en dessous de l'ancre, avec une marge du haut égale à 5 pixels. En faisant défiler doucement le contenu vers le bas, vous ferez passer le texte positionné au dessus de l'ancre, avec une marge basse de 5 pixels. Pour replacer le texte en dessous de l'ancre, vous devrez faire l'opération inverse : faire défiler la page vers le bas jusqu'à ce que le texte positionné commence à sortir de l'écran par le haut.

Toutes ces caractéristiques sont définies par deux directives @position-try. La première définit le nom --bottom, qui s'applique lorsque le texte positionné est au dessous de l'ancre. La deuxième définit le nom --top qui s'applique lorsque le texte positionné est au dessus de l'ancre.
Le passage d'une position à l'autre est défini par position-try-fallbacks.

Compatibilité des navigateurs avec la directive @position-try.

La directive @position-try est bien reconnue par les navigateurs. Mais il y a quelques subtilités non décrites dans la norme :

• Lorsque plusieurs ancres figurent sur la page, chacun des éléments (ancres et textes positionnés) doit avoir un ID même si celui-ci est inutilisé.
• Il y a une différence entre position:absoute et position:fixed.

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 ancrage

2

Directive
@prosition-try

Estimation de la prise en charge globale.

86%

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

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

Évolution de la directive @position-try.

• 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 @position-try Introduction de la directive @position-try, comme de toutes les propriétés qui interviennent dans le cadre du positionnement par ancrage.
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, sur le positionnement par ancrage.

La directive @position-try est la seule qui soit définie dans le module module CSS - Positionnement par ancrages. Mais il y a pas mal de propriétés :

Propriétés :

Fonctions :

Directives :