Position-try-order - Propriété CSS

Schéma de la syntaxe de position-try-order.

Description de la propriété position-try-order.

Le positionnement par ancrage est une fonctionnalité nouvelle de CSS qui permet de positionner un élément par rapport à un autre. L'élément qui sert de référence est appelé l'ancre. Il reçoit un identifiant d'ancrage avec la propriété anchor-name. Les éléments positionnés par rapport à cet ancre doivent être en position absolute ou en fixed (voir la propriété position). Ils sont rattachés à l'ancre par la propriété position-anchor.

La propriété position-anchor positionne l'élément positionné précisément par rapport à cet ancre (au dessus, en dessous, à gauche, etc.). Mais en cas de défilement ou de zoom, cette position peut se retrouver en dehors de la fenêtre d'affichage. Pour cette raison position-try-fallbacks donne une liste d'emplacements de rechange. position-try-order définit les positions dans cette liste qui sont utilisables.

Consultez également la page sur position-try qui est une propriété résumée qui permet de définir position-try-order et position-try-fallbacks en une seule écriture. Ou un tutoriel sur le Positionnement par ancrage.

Valeurs pour position-try-order.

• position-try-order: normal;

  L'ordre des emplacements défini par position-try-fallbacks est conservé. La propriété position-try-order est donc sans effet.

  Faites défiler la page jusqu'à amener le texte positionné en haut de l'écran, il passe à droite de l'ancre, puis, si vous réduisez la largeur de la fenêtre, il passe en dessous de l'ancre. Sur un téléphone portable, ceci est difficile à constater car la faible largeur de la fenêtre gène le fonctionnement.

  ⚓
  Élément positionné
  position-try-fallbacks:--top,--right,--bottom;
position-try-order:normal;
• position-try-order: most-width; position-try-order: most-inline-size;

  L'élément positionné est placé prioritairement là où il a le plus de place en largeur, ou dans le sens des lignes, parmi les emplacements cités par position-try-fallbacks.

  Dans notre exemple, la position --right est ignorée car elle donne moins de largeur que les positions --top et --bottom. Sur un portable ce n'est pas sûr : pour constater le fonctionnement de position-try-order vous devrez regarder cette page sur un ordinateur.

  ⚓
  Élément positionné
  position-try-fallbacks:--top,--right,--bottom; ;
position-try-order:most-width;
• position-try-order: most-height; position-try-order: most-block-size;

  L'élément positionné est placé prioritairement aux endroits où il a le plus de place en hauteur, ou dans le sens des blocs.
  Dans notre exemple, il ne peut même pas sauter au dessus ou en dessous de l'ancre car ces positions --top et --bottom laissent moins de place.

  Néanmoins, si vous réduisez la largeur de la fenêtre il arrive un moment où la place disponible en hauteur est supérieure à celle disponible en largeur. A ce moment l'élément positionné se place au dessus ou en dessous de l'ancre. Sur un portable ces manipulations ne sont pas possibles.

  ⚓
  Élément positionné
  position-try-fallbacks:--top,--right,--bottom;
position-try-order:most-height;
• position-try-order: initial; (normal) position-try-order: inherit; position-try-order: revert; position-try-order: revert-layer; position-try-order: revert-rule; position-try-order: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, revert-rule, unset.

Exemple d'animation de position-try-order.

Compatibilité des navigateurs avec position-try-order.

La propriété position-try-order est maintenant bien reconnue par 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 ancrage

2

Propriété
position-try-order

Estimation de la prise en charge globale.

86%

86%

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é position-try-order.

• 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-order Première présentation de la propriété position-try-order (positionnement par ancrage).
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

Les propriétés, les fonctions et la directive relatives au positionnement par ancrage sont groupée dans le module module CSS - Positionnement par ancrages. Vous en trouverez également la liste ci-dessous.

Propriétés :

Fonctions :

Directives :