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 CSS Anchor Positioning). L'élément qui sert de référence 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. Il est possible de définir une liste de positions alternatives avec position-try-fallbacks.

En faisant défiler le cadre ci-dessous, vous constaterez que l'élément positionné est d'abord au dessus de l'ancre (figuré par la cible), puis, lorsque le défilement commence va le faire disparaître il passe à droite, puis, enfin, il passe en dessous de l'ancre.

Nous rappelons que les exemples ne fonctionnent pas sur Firefox  , ni sur Safari  .

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.

Les exemples donnés ne fonctionnent correctement que sur le navigateur Opera  .

• position-try-fallbacks: none;

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

• position-try-fallbacks: left, 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'une de ces valeurs est appliquée, dans l'ordre, pour positionner l'élément.

  ⚓

  Texte positionné

  position-try-fallbacks:left, bottom;

• position-try-fallbacks: flip-block; position-try-fallbacks: flip-y;

  La valeur flip-block inverse les positionnements au dessus et en dessous de l'ancre. Elle inverse également les valeurs des marges haute et basse (pour les langues latines).

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

  ⚓

  Texte positionné

  position-try-fallbacks:flip-block;

• position-try-fallbacks: flip-inline; position-try-fallbacks: flip-x;

  flip-inline inverse les positionnements à gauche et à droite de l'élément. Elle inverse également les valeurs des marges droite et gauche (pour les langues latines).

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

  ⚓

  Texte positionné

  position-try-fallbacks:flip-inline;

• position-try-fallbacks: flip-start;

  La valeur flip-start est un rien bizarre : elle peut passer l'élément positionné du coin en haut à droite au coin en bas à gauche, mais pas du coin en haut à gauche au coin en bas à droite.

  ⚓

  Texte positionné

  position-try-fallbacks:flip-start;

• position-try-fallbacks: --id1, --id2;

  --id est un identifiant défini par une directive @position-try. Plusieurs identifiants peuvent être cités, en les séparant par des virgules.

• position-try-fallbacks: initial; (none) position-try-fallbacks: inherit; position-try-fallbacks: revert; position-try-fallbacks: revertLayer; position-try-fallbacks: unset;

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

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

Support de position-try-fallbacks.

Remarques :

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

(2) Utilise le nom non standard position-try-option.

1

Positionnement
par ancrage

2

Porpriété
position-try-fallbacks

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

2

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

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

• Module CSS - Positionnement par ancrages - Niveau 1

  Première présentation de la propriété position-try-fallbacks.
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

Propriétés :

Fonctions :

Directives :