@position-try - Directive CSS
Résumé des caractéristiques de la directive @position-try
Description de la directive @position-try.
Le positionnement par ancrage permet de positionner un élément par rapport à un autre (l'ancre). Ce dernier à reçu un identifiant par
la propriété anchor-name. Le ou les éléments positionné(s) lui sont associés par la propriété position-anchor.
La directive @position-try définit un nom pour un ensemble de propriétés. Ce nom pourra être utilisé ensuite par la propriété
position-try-fallbacks ou la propriété résumée position-try.
La syntaxe de base est la suivante :
@position-try --id {
...
... Liste de propriétés
...
}
Les seules propriétés autorisées dans la liste sont :
- Les propriétés de dimension :
width,height,min-height,max-height, etc. - Les propriétés qui définissent des marges :
margin-top,margin-right,margin-block-start,margin-inline-start, etc. et les propriétés résumées correspondantes. - Les propriétés de positionnement :
top,inset-block-start, etc. et les propriétés résumées correspondantes. - Les propriétés d'alignement de l'élément lui-même :
align-self,justify-selfetplace-self. - La propriété
position-anchoret la propriétéposition-area.
La clause !important est invalide dans une directive @position-try. Son utilisation rend la propriété invalide, mais
le reste de la directive demeure valide.
Pour plus de renseignements sur le positionnement par ancrage, la page anchor-name donne la liste des termes utiles.
Exemples d'utilisation de la directive @position-try.
Le texte est d'abord positionné en dessous de l'ancre, avec une marge du haut égale à 5 pixels. En faisant défiler doucement le contenu, vous ferez passer dans un premier temps le texte à gauche de l'ancre, avec une marge gauche de 10 pixels. Si vous continuez le défilement, le texte passe au dessus de l'ancre, avec une marge du bas de 5 pixels.
Toutes ces caractéristiques sont définies par deux directives @position-try. La première définit le nom --left, qui s'applique
lorsque le texte positionné est à gauche de l'ancre. La deuxième définit le nom --top qui s'applique lorsque le texte
positionné est au dessus de l'ancre.
Le passage d'une position à l'autre est défini par position-try-fallbacks.
Compatibilité des navigateurs avec la directive @position-try.
@position-try pour définir un jeu de positions alternatives (positionnement par ancrage).Remarques :
(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.anchor-positioning.enabled à true.
par ancrage
@prosition-tryNavigateurs 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
Chrome pour Androïd
Safari sur IOS
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Évolution de la directive @position-try.
-
Module CSS - Positionnement par ancrages - Niveau 1
Introduction de la directive@position-try, comme de toutes les propriétés qui interviennent dans le cadre du positionnement par ancrage.
29 Juin 2023Document de travail.
Voir aussi, en rapport avec les espaces de noms.
La directive @position-try est la seule qui soit définie dans le module CSS Anchor Positioning.
Propriétés :
anchor-name.position-try-fallbacks et position-try-order.position-try-fallbacks.