Position-try-fallbacks - Propriété CSS

Syntaxe de position-try-fallbacks (schéma).

Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :

• --id est un identifiant (qui doit commencer par un double tiret) créé par @position-try.
• position est une position (identique à celles de position-area.

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

Le positionnement par ancrage consiste à positionner un élément par rapport à un autre (voir Positionnement par ancrage). L'élément qui sert de référence (l'ancre) reçoit un identifiant (via anchor-name). Ce dernier peut être utilisé sur d'autres éléments pour les positionner avec position-anchor.
Le positionnement peut être précis : à droite, au dessus, etc. de l'ancre grace à la propriété position-area. Il est possible de définir une position alternative avec position-try-fallbacks pour le cas où le texte positionné viendrait à disparaître avant son ancre à cause d'un défilement par exemple.

Sur l'exemple ci-dessous, en faisant défiler la page, vous constaterez que l'élément positionné est d'abord au dessus de l'ancre, puis, lorsque le défilement commence a le faire disparaître il passe en dessous de l'ancre. Jusqu'à ce qu'un défilement vers le haut le fasse disparaître en bas de la fenêtre, il repasse alors au dessus de l'ancre.

La position par défaut de l'élément reste cependant définie par position-area. Si l'élément positionné est entièrement visible, compte tenu des scrolling, des zooms, etc. la propriété position-try-fallbacks est ignorée.

En utilisant correctement position-try-fallbacks il est possible de faire en sorte que l'élément positionné reste visible le plus longtemps possible même en cas de défilement ou de zoom sur la page.

Voir aussi la propriété résumée position-try, ainsi que la propriété anchor-name qui donne un synthèse des propriétés utiles dans le positionnement par ancrage.

Valeurs pour position-try-fallbacks.

• position-try-fallbacks: none;

  Avec la valeur none, la propriété position-try-fallbacks n'a aucun effet.

• position-try-fallbacks: bottom;

  Une valeur ou une série de valeurs acceptées par la propriété position-area. Si plusieurs valeurs sont indiquée, elles doivent être séparées par une virgule (à l'heure actuelle les navigateurs ne traitent pas les séries de valeurs). L'une de ces valeurs est appliquée, dans l'ordre, pour positionner l'élément.

  Faites défiler cette page jusqu'à amener le texte positionné en haut de l'écran. Vous le verrez alors passer en dessous de l'ancre.

  ⚓
  Élément positionné
  position-area:top;
position-try-fallbacks:bottom;
• position-try-fallbacks: flip-block; position-try-fallbacks: flip-y;

  La valeur flip-block inverse les positionnements entre début et fin de block. Elle inverse également les valeurs des marges de début et de fin de block. Elle est sensible au mode d'écriture de la langue utilisée.
  Par exemple, pour les langues latines, flip-block inverse les positions au dessus et en dessous de l'ancre.

  flip-y est identique mais n'est pas sensible au mode d'écriture de la langue.

  ⚓
  Élément positionné
  position-area:top;
position-try-fallbacks:flip-block;
• position-try-fallbacks: flip-inline; position-try-fallbacks: flip-x;

  flip-inline inverse les positionnements de début et de fin des lignes de l'élément. Elle inverse également les valeurs des marges de début et de fin de lignes. Cette valeur est donc sensible au mode d'écriture de la langue.
  Pour les langues latines, flip-inline inverse la gauche et la droite.

  flip-x réalise les mêmes changements, sans être sensible au mode d'écriture de la langue.

  Pour observer le fonctionnement, réduisez la largeur de la fenêtre de votre navigateur jusqu'à ce que la bord droit atteigne le texte positionné.
  Sur un téléphone ou un terminal avec un écran de petite dimension, la petite largeur de la fenêtre fait que position-try-fallbacks est tout de suite activé.

  ⚓
  Élément positionné
  position-area:right;
position-try-fallbacks:flip-inline;
• position-try-fallbacks: flip-start;

  La valeur flip-start échange les valeurs start entre elles, et les valeurs end entre elles. Elle passe par exemple l'élément positionné de block-start à inline-start et de block-end à inline-end. Cela fonctionne aussi si les valeurs sont exprimées en valeurs physiques ou en valeurs XY.

  Faites défiler la page pour observer le fonctionnement sur le premier exemple. Vous devrez réduire la largeur de la fenêtre pour le deuxième example.
  Sur un téléphone ou un terminal avec un écran de petite dimension, la petite largeur de la fenêtre empêche le fonctionnement.

  ⚓

  ⚓
  Élément positionné
  position-area:top
position-try-fallbacks:flip-start;
  Élément positionné
  position-area:bottom
position-try-fallbacks:flip-start;
• position-try-fallbacks: --id1, --id2;

  --id1 et --id2 sont des identifiants définis par des directives @position-try. Ils peuvent regrouper plusieurs propriétés comme les marges par exemple.
  Plusieurs identifiants peuvent être cités, en les séparant par des virgules.

  Dans l'exemple ci-dessous, l'élément positionné passe d'abord sur la 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 ou un terminal avec un écran de petite dimension, la petite largeur de la fenêtre gêne le fonctionnement : le texte positionné passe directement à --pos2, sans passer par --pos1.

  ⚓
  Élément positionné
  position-area:top;
position-try-fallbacks:--pos1,--pos2;
• position-try-fallbacks: initial; (none) position-try-fallbacks: inherit; position-try-fallbacks: revert; position-try-fallbacks: revert-layer; position-try-fallbacks: revert-rule; position-try-fallbacks: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, revert-rule, unset.

Possibilité d'animation de la propriété position-try-fallbacks.

Support de position-try-fallbacks.

La propriété position-try-fallbacks est bien prise en charge par les navigateurs récents.

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

Porpriété
position-try-fallbacks

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

Évolution de la propriété position-try-fallbacks.

• 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-fallbacks Première présentation de la propriété position-try-fallbacks.
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

Le positionnement par ancrage est une des fonctionnalités les plus intéressantes de CSS. Toutes les propriétés, fonctions ou directives qui concernent cette fonctionnalité sont regroupés dans la spécification module CSS - Positionnement par ancrages.

Propriétés :

Fonctions :

Directives :