anchor-size()

Функция anchor-size() возвращает размеры якорного элемента.

        
          
          .target {  width: anchor-size(width);}
          .target {
  width: anchor-size(width);
}

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

С помощью anchor-size() можно получить значения ширины и высоты якорного элемента. Функция пригодится, если размеры таргет элемента должны зависеть от размеров якоря.

Функция anchor-size() принимает три аргумента:

• <anchor-name> — имя якоря, размеры которого нужно получить. Необязатальный аргумент, если его опустить, то функция будет ссылаться на значение указанное в свойстве position-anchor;
• <anchor-size> — параметр, значение которого нужно получить, например, width или height;
• <length-percentage> – фолбэк-значение, применится, если функция не нашла якорный элемент, на который мы пытаемся сослаться, или если передали некорректное значение для <anchor-size>. Необязатальный аргумент.

        
          
          .anchor {  anchor-name: --my-anchor;}.target {  /*    Функция anchor-size() будет использовать якорь --my-anchor,    указанный в свойстве anchor-name,    поскольку в неё явно не передан никакой другой якорь.  */  width: anchor-size(width);  /*    В данном случае функция anchor-size() будет ссылаться на якорь --custom-anchor.    Якорь --my-anchor из свойства anchor-name будет проигнорирован.  */  width: anchor-size(--custom-anchor width);  /*    В этом примере target элемент будет иметь width: 200px,    если по каким-то причинам функция anchor-size()    не сможет получить размеры ширины переданного якоря.  */  width: anchor-size(--custom-anchor width, 200px);}
          .anchor {
  anchor-name: --my-anchor;
}

.target {
  /*
    Функция anchor-size() будет использовать якорь --my-anchor,
    указанный в свойстве anchor-name,
    поскольку в неё явно не передан никакой другой якорь.
  */
  width: anchor-size(width);
  /*
    В данном случае функция anchor-size() будет ссылаться на якорь --custom-anchor.
    Якорь --my-anchor из свойства anchor-name будет проигнорирован.
  */
  width: anchor-size(--custom-anchor width);
  /*
    В этом примере target элемент будет иметь width: 200px,
    если по каким-то причинам функция anchor-size()
    не сможет получить размеры ширины переданного якоря.
  */
  width: anchor-size(--custom-anchor width, 200px);
}

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

Стоит отметить, что в качестве аргумента <anchor-side> в функцию можно передавать только значения, соответствующие оси inset-свойства, для которого функция применяется.

В отличие от anchor() функция anchor-size() умеет работать со значениями из противоположной оси.

        
          
          .target {  /*    Можно задать ширину таргет элемента на основе ширины якоря.  */  width: anchor-size(width);  /*    Также можно задать ширину таргета на основе высоты якоря.  */  width: anchor-size(height);}
          .target {
  /*
    Можно задать ширину таргет элемента на основе ширины якоря.
  */
  width: anchor-size(width);
  /*
    Также можно задать ширину таргета на основе высоты якоря.
  */
  width: anchor-size(height);
}

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

Также при работе с функцией anchor-size() можно использовать её значение в вычислениях

        
          
          .target {  width: calc(anchor-size(width) + 50px);}
          .target {
  width: calc(anchor-size(width) + 50px);
}

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

и взаимодействовать с логическими свойствами

        
          
          .target {  inset-size: anchor-size(inline);}
          .target {
  inset-size: anchor-size(inline);
}

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

Лучше понять работу функции anchor-size() поможет демка ниже.