Position-try-order - Propriété CSS

position-try-order

Résumé des caractéristiques de la propriété position-try-order

Description rapide
Définit un ordre différent pour les valeurs énumérées par position-try-fallbacks.
Statut
Problèmes de compatibilité ⚠
S'applique à
Éléments positionnés en fixed ou en absolute.
Utilisable sur
HTML
Valeurs prédéfinies
normal | most-height | most-width | most-block-size | most-inline-size
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété position-try-order passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Positionnement par ancrages
Références (W3C)
Statut du document: WD (document de travail)

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

position-try-order - Syntax DiagramSyntax diagram of the position-try-order CSS property. normal normal most-width most-width most-height most-height most-inline-size most-inline-size most-block-size most-block-sizeposition-try-order:;position-try-order:;
Schéma syntaxique de la propriété position-try-order.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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

⚠
Cette propriété est expérimentale. Pour l'instant peu de navigateurs la reconnaissent.
Cette page sera complétée ultérieurement.

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 absolue ou en fixé (position:absolute ou position:fixed). Ils sont rattachés à l'ancre par la propriété position-anchor.

La propriété position-anchor le positionne 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 l'ordre dans lequel cette liste doit être considérée.


Consultez également la page sur anchor-name pour avoir le liste des propriétés relatives au positionnement par ancrage.

Valeurs pour position-try-order.

Nous vous rappelons que les exemples donnés ne sont vraiment opérationnels que sur Opera  .

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

    ⚓
    Élément positionné

    position-try-fallbacks:left,bottom,right;
    position-try-order:normal;

  • position-try-order: most-width; position-try-order: most-height;

    ⚓
    Élément positionné

    position-try-fallbacks:left,bottom,right;
    position-try-order:most-width;

  • position-try-order: most-block-size; position-try-order: most-inline-size;

    ⚓
    Élément positionné

    position-try-fallbacks:left,bottom,right;
    position-try-order:most-inline-size;

  • position-try-order: initial; (normal) position-try-order: inherit; position-try-order: revert; position-try-order: revertLayer; position-try-order: unset;

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

Exemple d'animation de position-try-order.

L'animation de la propriété position-try-order est possible, dans le mode discrete (c'est à dire avec un passage brutal d'une valeur à l'autre) mais présente peu d'intérêt.

Compatibilité des navigateurs avec position-try-order.

Colonne 1
Prise en charge générale du positionnement par ancrage.
Colonne 2
Support de la propriété anchor-try-order (positionnement par ancrage).

Remarques :

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

1
Positionnement
par ancrage
2
Propriété
position-try-order
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-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).
    WD
    29 Juin 2023
    Document de travail.
    CR
    PR
    REC

Voir aussi, à propos des positionnement par ancrage.

Propriétés :

⚠
anchor-name
Défiinit un identifiant pour l'élément qui peut dès lors devenir une ancre.
⚠
anchor-scope
Définit la portée de la propriété anchor-name.
⚠
position-anchor
Définit par rapport à quelle ancre doit se positionner l'élément.
⚠
position-area
Définit comment se positionne un élément par rapport à l'ancre (au dessus, à côté, etc.).
position-try
Propriété raccourcie qui résume les valeurs pour position-try-fallbacks et position-try-order.
⚠
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.
Position-try-order
Définit un ordre différent pour les valeurs énumérées par position-try-fallbacks.
⚠
position-visibility
Définit si l'élément positionné est visible ou pas, dans le contexte d'un positionnement par ancrage.

Fonctions :

⚠
anchor()
Renvoie la position d'un des bords de l'élément désigné comme ancre (positionnement par ancrage).
⚠
anchor-size()
Renvoie la teille (hauteur ou largeur) de l'élément désigné comme l'ancre (positionnement par ancrage).

Directives :

⚠
@position-try
Définit un ensemble de règles pour chacune des position d'ancrage et leur donne un nom (positionnement par ancrage).