Функция CSS `anchor-size()`

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

Подробные сведения о функциях якорей и их использовании см. в модуле позиционирования относительно якорей в CSS и руководстве Использование позиционирования относительно якорей в CSS.

Синтаксис

/* without parameters */
anchor-size()

/* anchor size parameter */
anchor-size(width);
anchor-size(block);
anchor-size(self-inline);

/* anchor-name and anchor-side */
width: anchor-size(--my-anchor width);
block-size: anchor-size(--my-anchor block);

/* sizing relative to named anchor's side with fallback */
width: anchor-size(--my-anchor width, 50%);
block-size: anchor-size(--my-anchor block, 200px);

/* positioning relative to anchor side */
left: anchor-size(width);
inset-inline-end: anchor-size(--my-anchor height, 100px);

/* setting margin relative to anchor side */
margin-left: calc(anchor-size(width) / 4);
margin-block-start: anchor-size(--my-anchor self-block, 20px);

Параметры

Синтаксис функции 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>. Если этот параметр не указан, используемый размер соответствует оси свойства размера, положения или поля, в котором задана функция. Например:

• width: anchor-size() эквивалентно width: anchor-size(width).
• top: anchor-size() эквивалентно top: anchor-size(height).
• margin-inline-end: anchor-size() эквивалентно margin-inline-end: anchor-size(self-inline). margin-inline-end: anchor-size() также эквивалентно margin-inline-end: anchor-size(width) в режимах горизонтального письма или margin-inline-end: anchor-size(height) в режимах вертикального письма.

В качестве основы для размера используется элемент с 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, значение width будет равно 50px, и объявление height не даст эффекта.

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

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

Подробные сведения о функциях якорей и их использовании см. в модуле позиционирования относительно якорей в CSS и руководстве Использование позиционирования относительно якорей в CSS.

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

Функцию 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
• Свойства отступа от края:
  • bottom
  • left
  • right
  • top
  • inset — сокращённое свойство
  • inset-block — сокращённое свойство
  • inset-block-end
  • inset-block-start
  • inset-inline — сокращённое свойство
  • inset-inline-end
  • inset-inline-start
• Свойства полей:
  • margin — сокращённое свойство
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-block — сокращённое свойство
  • margin-block-end
  • margin-block-start
  • margin-inline — сокращённое свойство
  • margin-inline-end
  • margin-inline-start

Использование anchor-size() внутри calc()

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

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

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

Это правило задаёт встроенный размер позиционируемого элемента, равный четырём встроенным размерам якорного элемента; умножение выполняется внутри функции 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()

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

HTML

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

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<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>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

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

.anchor {
  font-size: 2rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  text-align: center;
  align-content: center;
  outline: 1px solid black;
}

body {
  width: 80%;
  margin: 0 auto;
}

.infobox {
  align-content: center;
  color: darkblue;
  background-color: azure;
  outline: 1px solid #dddddd;
  font-size: 1rem;
  text-align: center;
}

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

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

Для позиционируемых элементов задаются различные значения свойств:

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

#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.25);
  margin-bottom: 5px;
}

Результат

Проверьте элементы, позиционируемые относительно якоря, с помощью инструментов браузера. Высота первого информационного блока составит 50px, а ширина — 200px; высота второго блока составит 40px, а width по умолчанию будет равен max-content.

Пример позиционирования и полей

См. пример позиционирования и полей с помощью anchor-size().

Спецификации

Совместимость с браузерами

См. также

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