Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

@position-try

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La règle @ CSS @position-try permet de définir une option personnalisée de repli de position, utilisée pour définir le positionnement et l'alignement des éléments ancrés. Un ou plusieurs ensembles d'options de repli peuvent être appliqués à l'élément ancré via la propriété position-try-fallbacks ou le raccourci position-try. Lorsque l'élément positionné est déplacé à un endroit où il commence à déborder de son bloc conteneur ou de la zone d'affichage (viewport en anglais), le navigateur sélectionne la première option de repli qui permet de replacer l'élément entièrement à l'écran.

Chaque option de position est nommée avec un <dashed-ident> et contient une liste de descripteurs spécifiant des déclarations qui définissent des informations telles que la position d'insertion, la marge, la taille et l'auto-alignement. Le <dashed-ident> est utilisé pour référencer l'option personnalisée dans la propriété position-try-fallbacks et le raccourci position-try.

Pour des informations détaillées sur les fonctionnalités d'ancrage et l'utilisation des options de repli, consultez la page du module Positionnement d'ancre CSS et le guide Options de repli et masquage conditionnel en cas de débordement.

Syntaxe

css
@position-try --try-option-name {
  descriptor-list
}

Note : --try-option-name est un <dashed-ident> qui définit un nom d'identification pour l'option de position personnalisée, pouvant ensuite être ajoutée à la liste position-try-fallbacks.

Descripteurs

Les descripteurs définissent les valeurs des propriétés qui déterminent le comportement de l'option de position personnalisée, c'est-à-dire l'endroit où l'élément positionné sera placé.

Note : Lorsqu'une option de position personnalisée est appliquée à un élément, les valeurs définies dans le descripteur de la règle @position-try prennent le dessus sur celles définies sur l'élément via les propriétés CSS standard.

Syntaxe formelle

@position-try = 
@position-try <dashed-ident> { <declaration-list> }

Exemples

Utilisation d'une option de position personnalisée

Dans cet exemple, on définit un élément d'ancrage et un élément positionné, puis on crée quatre options de repli nommées. Ces options sont appliquées à l'élément positionné pour garantir que son contenu reste toujours visible, peu importe la position de l'ancre dans la zone d'affichage.

HTML

On inclut deux éléments <div> qui deviendront une ancre et un élément positionné :

html
<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>Ceci est une boîte d'information.</p>
</div>

CSS

On commence par styliser l'élément <body> pour qu'il soit très grand, afin de pouvoir faire défiler l'ancre et l'élément positionné dans la zone d'affichage, horizontalement et verticalement :

css
body {
  width: 1500px;
  height: 500px;
}

L'ancre reçoit un anchor-name et une valeur position de absolute. On la positionne ensuite près du centre du rendu initial du <body> avec les valeurs top et left :

css
.anchor {
  anchor-name: --my-anchor;
  position: absolute;
  top: 100px;
  left: 350px;
}

Ensuite, on utilise la règle @position-try pour définir quatre options de position personnalisées, avec des noms <dashed-ident> descriptifs. Chacune place l'élément positionné à un endroit précis autour de l'ancre et lui donne une marge de 10px adaptée. Le positionnement est géré de différentes manières pour illustrer les techniques disponibles :

  • La première et la dernière option utilisent position-area.
  • La deuxième option utilise top avec une valeur anchor() et justify-self: anchor-center pour centrer l'élément positionné sur l'ancre dans la direction inline.
  • La troisième option utilise left avec une valeur anchor(), enveloppée dans une fonction calc() qui ajoute 10px d'espacement (plutôt que de créer l'espacement avec margin comme les autres options). Elle utilise ensuite align-self: anchor-center pour centrer l'élément positionné sur l'ancre dans la direction du bloc.

Enfin, les options gauche et droite reçoivent une valeur de width plus étroite :

css
@position-try --custom-left {
  position-area: left;
  width: 100px;
  margin-right: 10px;
}

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin-top: 10px;
  position-area: none;
}

@position-try --custom-right {
  left: calc(anchor(right) + 10px);
  align-self: anchor-center;
  width: 100px;
  position-area: none;
}

@position-try --custom-bottom-right {
  position-area: bottom right;
  margin: 10px 0 0 10px;
}

La boîte d'information reçoit un positionnement fixe, une propriété position-anchor qui référence le anchor-name de l'ancre pour les associer, et elle est attachée au bord supérieur de l'ancre via position-area. On lui donne aussi une largeur fixe width et une marge inférieure margin. Les options de position personnalisées sont ensuite référencées dans la propriété position-try-fallbacks pour éviter que l'élément positionné ne déborde ou ne soit masqué lors du défilement, lorsque l'ancre s'approche du bord de la zone d'affichage.

css
.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top;
  width: 200px;
  margin-bottom: 10px;
  position-try-fallbacks:
    --custom-left, --custom-bottom, --custom-right, --custom-bottom-right;
}

Résultat

Faites défiler la page et observez le changement de placement de l'élément positionné lorsque l'ancre s'approche des différents bords de la zone d'affichage. Cela est dû à l'application des différentes options de repli.

Explication du fonctionnement des options de position :

  • Tout d'abord, la position par défaut est définie par position-area: top. Lorsque la boîte d'information ne déborde pas, elle se place au-dessus de l'ancre et les options de repli définies dans la propriété position-try-fallbacks sont ignorées. Notez aussi que la boîte d'information a une largeur et une marge inférieure fixes. Ces valeurs changent selon l'option de repli appliquée.
  • Si la boîte d'information commence à déborder, le navigateur essaie d'abord la position --custom-left. Cela déplace la boîte à gauche de l'ancre avec position-area: left, ajuste la marge et donne une largeur différente.
  • Ensuite, le navigateur essaie la position --custom-bottom. Cela place la boîte en dessous de l'ancre avec top et justify-self au lieu de position-area, et définit une marge adaptée. Il n'y a pas de descripteur width, donc la boîte reprend sa largeur par défaut de 200px.
  • Le navigateur essaie ensuite la position --custom-right. Cela fonctionne comme la position --custom-left, avec la même largeur, mais on utilise left et align-self au lieu de position-area. On enveloppe la valeur de left dans une fonction calc() pour ajouter 10px d'espacement, au lieu d'utiliser margin.
  • Si aucune des autres options ne permet d'éviter le débordement, le navigateur essaie la position --custom-bottom-right en dernier recours. Cela place la boîte en bas à droite de l'ancre avec position-area: bottom right.

Quand une option de position est appliquée, ses valeurs remplacent celles initialement définies sur l'élément positionné. Par exemple, la largeur initiale de la boîte est 200px, mais lorsque l'option --custom-right est appliquée, sa largeur passe à 100px.

Dans certains cas, il faut désactiver les valeurs initiales à l'intérieur des options personnalisées. Les options --custom-bottom et --custom-right utilisent des propriétés d'insertion et *-self: anchor-center pour placer l'élément, donc on retire la valeur position-area précédemment définie en la mettant à none. Sinon, la valeur initiale position-area: top resterait active et interférerait avec le nouveau positionnement.

Spécifications

Specification
CSS Anchor Positioning
# at-ruledef-position-try

Compatibilité des navigateurs

Voir aussi