@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
@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é.
position-anchor
: Définit la valeur de la propriétéposition-anchor
qui indique l'élément d'ancrage auquel l'élément positionné est attaché, en spécifiant une valeur<dashed-ident>
identique à la propriétéanchor-name
de l'élément d'ancrage.position-area
: Définit la valeur de la propriétéposition-area
qui indique la position de l'élément positionné par rapport à l'ancre.- Descripteurs des propriétés d'insertion : Spécifient des valeurs de fonction
anchor()
qui définissent la position des bords de l'élément positionné par rapport aux bords de l'élément d'ancrage. Les descripteurs d'insertion peuvent représenter les propriétés suivantes : - Descripteurs de marge : Spécifient la marge appliquée à l'élément positionné. Les descripteurs de marge peuvent représenter les propriétés suivantes :
- Descripteurs de taille : Spécifient des valeurs de fonction
anchor-size()
qui définissent la taille de l'élément positionné par rapport à la taille de l'ancre. Les descripteurs de taille peuvent représenter les propriétés suivantes : - Descripteurs d'auto-alignement : Spécifient la valeur
anchor-center
pour aligner l'élément positionné par rapport au centre de l'ancre, dans la direction du bloc ou de l'axe inline. Les propriétésalign-self
etjustify-self
peuvent prendre la valeuranchor-center
.
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é :
<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 :
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
:
.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 valeuranchor()
etjustify-self: anchor-center
pour centrer l'élément positionné sur l'ancre dans la direction inline. - La troisième option utilise
left
avec une valeuranchor()
, enveloppée dans une fonctioncalc()
qui ajoute10px
d'espacement (plutôt que de créer l'espacement avecmargin
comme les autres options). Elle utilise ensuitealign-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 :
@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.
.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 avecposition-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 avectop
etjustify-self
au lieu deposition-area
, et définit une marge adaptée. Il n'y a pas de descripteurwidth
, donc la boîte reprend sa largeur par défaut de200px
. - Le navigateur essaie ensuite la position
--custom-right
. Cela fonctionne comme la position--custom-left
, avec la même largeur, mais on utiliseleft
etalign-self
au lieu deposition-area
. On enveloppe la valeur deleft
dans une fonctioncalc()
pour ajouter10px
d'espacement, au lieu d'utilisermargin
. - 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 avecposition-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
Loading…
Voir aussi
position-area
position-anchor
position-try-fallbacks
position-try
- La fonction
anchor()
- La fonction
anchor-size()
- Le module de positionnement d'ancre CSS
- Guide pour utiliser le positionnement d'ancre CSS
- Guide pour les options de repli et le masquage conditionnel en cas de débordement
CSSPositionTryRule