position-try

Propriétés constitutives

Cette propriété est un raccourci pour les propriétés CSS suivantes :

• position-try-order
• position-try-fallbacks

Syntaxe

/* position-try-fallbacks seulement */
position-try: normal flip-block;
position-try: top;
position-try: --position-essai-personnalise;
position-try: flip-block flip-inline;
position-try: top, right, bottom;
position-try: --position-essai-personnalise1, --position-essai-personnalise2;
position-try:
  normal flip-block,
  right,
  --position-essai-personnalise;

/* position-try-order et position-try-fallbacks */
position-try: normal none;
position-try:
  most-width --position-essai-personnalise1,
  --position-essai-personnalise2;
position-try:
  most-height flip-block,
  right,
  --position-essai-personnalise;

/* Valeurs globales */
position-try: inherit;
position-try: initial;
position-try: revert;
position-try: revert-layer;
position-try: unset;

Valeurs

Voir position-try-order et position-try-fallbacks pour la description des valeurs.

Le raccourci position-try peut définir des valeurs pour position-try-fallbacks, ou position-try-order et position-try-fallbacks, dans cet ordre. Si position-try-order est omis, il est défini sur la valeur initiale de la propriété, qui est normal, ce qui signifie que les options de repli de position-try sont essayées dans l'ordre dans lequel elles apparaissent dans la propriété.

Définition formelle

Syntaxe formelle

position-try = 
  <'position-try-order'>? <'position-try-fallbacks'>  

<position-try-order> = 
  normal      |
  <try-size>  

<position-try-fallbacks> = 
  none                                                |
  [ [ <dashed-ident> || <try-tactic> ] | <position-area> ]#  

<try-size> = 
  most-width        |
  most-height       |
  most-block-size   |
  most-inline-size  

<try-tactic> = 
  flip-block   ||
  flip-inline  ||
  flip-start   ||
  flip-x       ||
  flip-y       

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-end | span-all ]  |
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ]  |
  [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ]  |
  [ start | center | end | span-start | span-end | span-all ]{1,2}  |
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}  

Exemples

Utilisation simple de position-try

Cette démonstration montre l'effet de position-try.

HTML

Le HTML inclut deux éléments HTML <div> qui deviendront une ancre et un élément positionné par rapport à l'ancre.

<div class="ancre">⚓︎</div>

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

CSS

Dans le CSS, l'ancre se voit attribuer un anchor-name et une valeur position de absolute. Nous la positionnons dans la moitié supérieure de la fenêtre en utilisant les valeurs top et left :

.ancre {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.ancre {
  anchor-name: --mon-ancre;
  position: absolute;
  top: 100px;
  left: 45%;
}

.boite-information {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
}

form {
  position: fixed;
  bottom: 2px;
  right: 2px;
}

Nous incluons ensuite une option de position personnalisée — --bas-personnalise — qui positionne l'élément sous l'ancre et lui donne une marge appropriée :

@position-try --bas-personnalise {
  top: anchor(bottom);
  bottom: unset;
  margin-top: 10px;
}

Nous positionnons initialement l'élément au-dessus de son ancre, puis nous définissons une valeur position-try qui lui donne un position-try-order de most-height et une liste de position-try-fallbacks qui inclut uniquement notre option de repli personnalisée :

.boite-information {
  position: fixed;
  position-anchor: --mon-ancre;

  bottom: anchor(top);
  margin-bottom: 10px;
  justify-self: anchor-center;

  position-try: most-height --bas-personnalise;
}

Résultat

L'élément apparaît sous son ancre, même s'il est initialement positionné au-dessus. Cela se produit parce qu'il y a plus d'espace vertical sous l'ancre que dessus. L'ordre d'essai most-height fait en sorte que l'option de repli --bas-personnalise soit appliquée, plaçant l'élément positionné dans la position qui donne à son bloc contenant la plus grande hauteur.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété position-area
• La propriété position-try-fallbacks
• La propriété position-try-order
• La règle @position-try
• Le type de donnée <position-area>
• Le module de positionnement par ancre CSS
• Le guide d'utilisation du positionnement par ancre CSS
• Le guide des options de repli et de masquage conditionnel en cas de débordement