Position-try - Propriété CSS

Description de la propriété position-try.

position-try est une propriété résumée qui remplace les deux propriétés suivantes. Comme d'habitude avec les propriétés résumées, si l'une des valeurs n'est pas spécifiée, elle est fixée à sa valeur initiale.

• position-try-order : Définit un ordre différent pour les valeurs énumérées par position-try-fallbacks.
• position-try-fallbacks : Spécifie une liste de position pour l'élément positionné (positionnement par ancrage) afin que le navigateur puisse choisir celle qui est le plus adapté à un moment donné, compte tenu des défilements ou des zooms.

Le positionnement par ancrage permet de positionner un élément par rapport à un autre. Ce dernier est dénommé l'ancre, et reçoit un identifiant avec la propriété anchor-name. D'autres éléments peuvent ensuite être positionnés par rapport à cet ancre (ils doivent avoir leur propriété position fixée à absolute ou fixed). position-try permet de spécifier plusieurs positions pour que le navigateurs choisissent celle qui convient le mieux, en fonction des défilements ou des zooms.

• Sur l'ancre : anchor-name pour définir un identifiant d'ancrage.
• Sur les éléments positionnés :
     - position:absolute ou fixed.
     - position-anchor pour associer l'élément à son ancre.
     - position-area pour préciser l'emplacement de l'élément.
     - Éventuellement position-try pour indiquer des positions alternatives.

Pour plus de précision, reportez-vous aux pages des propriétés détaillées : position-try-order et position-try-fallbacks. Vous pouvez également consulter la page sur anchor-name pour d'autres propriétés relatives au positionnement par ancrage.

Exemples d'utilisation de la propriété position-try.

Les exemples donnés ici ne fonctionneront ni sur [Firefox  } ni sur Safari   (voir le tableau de compatibilité ci-dessous). De plus le fonctionnement de les navigateurs Webkit (essentiellement Edge   et Chrome  ) est bizarre et ne correspond pas à la norme (2025).

Ces exemples illustrent quelques unes des nombreuses syntaxes possible pour position-try.

Valeurs de positionnement.

Dans cet exemple, l'ordre de tri est celui dans lequel les valeurs sont énoncées (normal). Les valeurs de positionnement sont left, bottom et right. Le texte étant positionné par défaut au dessus de l'ancre (top) par la propriété position-area.

Ordre de tri des valeurs.

Ici l'ordre de tri a été changé.

Utiliser des identifiants définis par @position-try.

Ici l'ordre de tri n'est pas spécifié : il est donc fixé à sa valeur initiale (normal). Les deux valeurs qui suivent sont des identifiants définis par @position-try.

Compatibilité des navigateurs avec position-try.

Remarques :

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

1

Position
par ancrage

2

Propriété
position-try

Estimation de la prise en charge globale.

71%

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

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

Histoire de la propriété 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. Présentation de la propriété position-try qui resume les valeurs pour position-try-fallbacks et pour position-try-order.
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

Propriétés :

Fonctions :

Directives :