anchor-size()

Синтаксис функции anchor-size():

anchor-size(<anchor-name> <anchor-size>, <length-percentage>)

Параметры:

<anchor-name> Необязательно

Значение свойства anchor-name элемента-якоря, относительно которого необходимо определить размер элемента. Это <dashed-ident> значение. Если опущено, используется значение по умолчанию для элемента.

Примечание: Указание <anchor-name> внутри функции anchor-size() не связывает и не привязывает элемент к якорю; оно только определяет размер элемента относительно этого якоря.

<anchor-size> Необязательно

Определяет размер элемента-якоря, относительно которого будет определяться размер позиционируемого элемента. Допустимые значения:

width

Ширина элемента-якоря.

height

Высота элемента-якоря.

block

Длина содержащего блока элемента-якоря в направлении блока.

inline

Длина содержащего блока элемента-якоря в направлении строки.

self-block

Длина элемента-якоря в направлении блока.

self-inline

Длина элемента-якоря в направлении строки.

Примечание: Если этот параметр опущен, размер по умолчанию соответствует ключевому термину <anchor-size>, который соответствует оси свойства, в котором используется функция. Например, width: anchor-size(); эквивалентно width: anchor-size(width);.

<length-percentage> Необязательно

Определяет размер, используемый в качестве значения по умолчанию, если элемент не позиционируется относительно абсолютного или фиксированного положения или элемент-якорь отсутствует. Если этот параметр опущен в случае, когда значение по умолчанию должно быть использовано, объявление будет некорректным.

Возвращает значение <length>.

Функция anchor-size() позволяет выражать значения размеров позиционированного элемента через размеры элемента-якоря; она возвращает значение <length>, представляющее размер конкретного элемента-якоря, относительно которого определяется размер позиционируемого элемента. Это допустимое значение для свойств размера, заданных для элементов, позиционируемых относительно якорей.

Возвращаемая длина — это вертикальный или горизонтальный размер элемента-якоря или его содержащего блока. Размер определяется параметром <anchor-size>. Если этот параметр опущен, используемый размер будет соответствовать оси свойства размера, на котором он задан.

Элемент-якорь, используемый в качестве основы для длины размера, — это элемент со значением anchor-name , указанным в параметре <anchor-name>. Если более одного элемента имеет то же имя якоря, используется последний элемент с этим именем якоря в порядке DOM.

Если в вызове функции не указан параметр <anchor-name>, используется якорь по умолчанию элемента, указанный в свойстве position-anchor или связанный с элементом через атрибут HTML anchor.

Если указан параметр <anchor-name> и нет элементов, соответствующих этому имени якоря, используется значение по умолчанию. Если значение по умолчанию не указано, объявление игнорируется. Например, если для позиционируемого элемента был указан width: anchor-size(--foo width, 50px); height: anchor-size(--foo width);, но в DOM нет якоря с именем --foo, значение по умолчанию будет 50px, а объявление height не будет иметь эффекта.

Если у элемента есть свойства размера со значениями anchor-size() , но это не элемент, позиционируемый относительно якоря (у него свойство position не установлено в значение absolute или fixed или нет якоря, связанного с ним через свойство position-anchor ), значение по умолчанию будет использоваться, если оно доступно. Если значение по умолчанию недоступно, объявление игнорируется.

Например, если для позиционируемого элемента был указан width: anchor-size(width, 50px); , но нет ассоциированного якоря, будет использовано значение по умолчанию, поэтому width получит вычисленное значение 50px.

Для получения подробной информации об элементах-якорях и их использовании см. страницу модуля позиционирования CSS относительно якорей и руководство по применению.

Свойства размера, принимающие функцию anchor-size() в качестве значения:

• width
• height
• min-width
• min-height
• max-width
• max-height
• block-size
• inline-size
• min-block-size
• min-inline-size
• max-block-size
• max-inline-size

Чаще всего функции anchor-size() будут ссылаться на размер якоря по умолчанию. Альтернативно, включите функцию anchor-size() внутри функции calc() для изменения размера, применяемого к позиционируемому элементу.

Например, данное правило задаёт ширину позиционируемого элемента, равную ширине элемента-якоря по умолчанию:

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

Данное правило задаёт размер в направлении строки позиционируемого элемента, равный в 4 раза большему размеру в направлении строки элемента-якоря, причём умножение выполняется внутри функции calc():

.positionedElem {
  inline-size: calc(anchor-size(self-inline) * 4);
}

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<length-percentage> = 
  <length>      |
  <percentage>  

Этот пример демонстрирует два элемента, размещенных относительно якоря и имеющих размеры, заданные с помощью функций anchor-size().

HTML

Мы определяем три <div> элемента, один anchor элемент и два infobox элемента, которые мы разместим относительно якоря. Мы также включили заполняющий текст, чтобы высота <body> была достаточной для прокрутки, но для краткости он скрыт.

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

<div class="infobox" id="infobox1">
  <p>This is the first infobox.</p>
</div>

<div class="infobox" id="infobox2">
  <p>This is the second infobox.</p>
</div>

CSS

Мы объявляем anchor <div> как элемент якоря, присвоив ему anchor-name. Размещенные элементы, у которых свойства position установлены в fixed, связаны с элементом якоря через их свойства position-anchor. Мы также устанавливаем абсолютные размеры height и width для якоря, чтобы получить точку отсчета при проверке размеров размещенных элементов, например, с помощью инструментов разработчика браузера:

.anchor {
  anchor-name: --myAnchor;
  width: 100px;
  height: 100px;
}

.infobox {
  position-anchor: --myAnchor;
  position: fixed;
}

Мы задаем некоторые отличительные значения свойств для размещенных элементов:

• Размещенные элементы привязываются к якорю с различными значениями position-area, что размещает элементы в разных местах вокруг элемента якоря.
• Высота height первого информационного блока устанавливается равной высоте элемента якоря: anchor-size(height) возвращает высоту элемента якоря. Ширина width элемента устанавливается в два раза больше ширины элемента якоря с использованием функции anchor-size() внутри функции calc(): anchor-size(width) извлекает ширину элемента якоря, которая затем умножается на два.
• Высота height второго информационного блока устанавливается на две трети высоты элемента якоря, используя аналогичный метод.
• Значения отступов включаются для создания некоторого отступа от элемента якоря.

#infobox1 {
  position-area: right;
  height: anchor-size(height);
  width: calc(anchor-size(width) * 2);
  margin-left: 5px;
}

#infobox2 {
  position-area: top span-right;
  height: calc(anchor-size(height) / 1.5);
  margin-bottom: 5px;
}

Результат

Используйте инструменты браузера, чтобы проверить элементы, размещенные относительно якоря. Первый информационный блок будет высотой 100px и шириной 200px, а второй информационный блок будет иметь высоту примерно 66.7px, при этом width по умолчанию устанавливается в max-content.

• anchor-name
• position-anchor
• anchor() функция
• Руководство по использованию позиционирования якорей CSS
• Модуль позиционирования якорей CSS