@position-try

Директива @position-try объединяет набор стилей для альтернативного расположения элемента под именем, которое можно использовать в качестве значения для свойства position-try-fallbacks.

        
          
          @position-try --bottom {  position-area: bottom;  margin-top: 20px;}
          @position-try --bottom {
  position-area: bottom;
  margin-top: 20px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В общем виде директива записывается следующим образом:

        
          
          @position-try --try-option-name {  property: value;}
          @position-try --try-option-name {
  property: value;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

--try-option-name так же, как и значение для anchor-name, должно начинаться с двух символов тире (--).

Внутри директивы @position-try можно указать не все возможные CSS-свойства, а только те, что влияют на расположение и размер таргет элемента:

• inset;
• margin;
• свойства размеров (например, width, height);
• свойства выравнивания самого элемента (например, justify-self, align-self);
• position-anchor;
• position-area.

Иногда в качестве фолбэка не достаточно использовать просто другое значение свойства position-area. Порой нужно ещё и отступы добавить, или размеры элемента поменять.

Чтобы решить эту проблему была придумана директива @position-try, которая позволяет объединить под одним именем набор из нескольких CSS-свойств и затем применить их в качестве фолбэка внутри свойства position-try-fallbacks.

Рассмотрим пример, чтобы лучше понять, как работает директива.

        
          
          .target {  width: 200px;  position-area: top;  position-try-fallbacks: --bottom;}/*  перемещаем элемент вниз,  увеличиваем ширину и добавляем отступ*/@position-try --bottom {  position-area: bottom;  margin-top: 40px;  width: 400px;}
          .target {
  width: 200px;
  position-area: top;
  position-try-fallbacks: --bottom;
}

/*
  перемещаем элемент вниз,
  увеличиваем ширину и добавляем отступ
*/
@position-try --bottom {
  position-area: bottom;
  margin-top: 40px;
  width: 400px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Попробуйте переместить якорный элемент сверху вниз и обратно.