Position-try - Propriété CSS

Description de la propriété position-try.

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 grâce à la propriété position-anchor (ils doivent avoir aussi leur propriété position fixée à absolute ou fixed). La propriété position-anchor permet de spécifier plusieurs positions pour que le navigateurs choisissent celle qui convient le mieux, en fonction des défilements ou des zooms.

En résumé :

• 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.

position-area peut être remplacé par une des propriétés de positionnement (top, left, etc.) avec la fonction anchor().

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.

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 un tutoriel sur le positionnement par ancrage.

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

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, right et bottom. Le texte étant positionné par défaut au dessus de l'ancre (top) par la propriété position-area.

Faites d'abord défiler la page vers le bas pour que l'élément positionné se retrouve en haut de la fenêtre, il va passer à droite de l'ancre. Réduisez ensuite la fenêtre pour le faire passer en dessous de l'ancre. Bien entendu, sur un téléphone, le fonctionnement est très perturbé par les petites dimensions de la fenêtre.

Ordre de préférence des valeurs.

Ici la préférence des valeurs a été changée par le mot most-width. Le système donne maintenant la priorité aux emplacements qui offrent le plus de largeur, en occurrence bottom. L'emplacement left, bien que cité en premier, ne sera utilisé que après si l'élément vient à disparaître par le bas.

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. Elles regroupent chacune deux propriétés dont les marges.

Exemple d'animation de position-try.

Compatibilité des navigateurs avec position-try.

La propriété position-try est maintenant bien reconnue par les grands navigateurs actuels.

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

Position
par ancrage

2

Propriété
position-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

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.

Le positionnement par ancrage est une des fonctionnalités les plus puissantes de CSS. Un module de spécification complet lui est consacré. Il regroupe les propriétés, fonctions et directive ci-dessous :

Propriétés :

Fonctions :

Directives :