CSS-директива `@position-try`

@position-try — это CSS-директива, используемая для определения пользовательского варианта резервного позиционирования, который позволяет задавать позиционирование и выравнивание для элементов с позиционированием относительно якоря. К привязанному элементу можно применить один или несколько наборов вариантов резервного позиционирования с помощью свойства position-try-fallbacks или сокращённого свойства position-try. Когда позиционируемый элемент перемещается в положение, в котором он начинает выходить за пределы содержащего блока или области просмотра, браузер выбирает первый найденный вариант резервного позиционирования, который полностью возвращает позиционируемый элемент на экран.

Каждому варианту позиционирования присваивается имя в виде <dashed-ident>. Он содержит список дескрипторов с объявлениями, задающими такие параметры, как положение отступа, поля, размеры и собственное выравнивание. <dashed-ident> используется для ссылки на пользовательский вариант позиционирования в свойстве position-try-fallbacks и сокращённом свойстве position-try.

Подробную информацию о функциях якорного позиционирования и использовании вариантов резервного позиционирования см. в модуле якорного позиционирования CSS и руководстве «Варианты резервного позиционирования и условное скрытие при переполнении».

Синтаксис

@position-try --try-option-name {
  descriptor-list
}

Дескрипторы

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

position-anchor

Задаёт значение свойства position-anchor, определяющее якорный элемент, к которому привязан позиционируемый элемент. Для этого указывается значение <dashed-ident>, совпадающее со значением свойства anchor-name якорного элемента.

position-area

Задаёт значение свойства position-area, определяющее положение элемента с якорным позиционированием относительно якоря.

Дескрипторы свойств отступа

Задают значения функции anchor(), определяющие положение краёв элемента с якорным позиционированием относительно края якорного элемента. Можно задать дескрипторы свойств отступа, соответствующие следующим свойствам:

• top
• left
• bottom
• right.
• inset-block-start
• inset-block-end
• inset-inline-start
• inset-inline-end
• inset-block
• inset-inline
• inset

Дескрипторы свойств полей

Задают поля элемента с якорным позиционированием. Можно задать дескрипторы свойств полей, соответствующие следующим свойствам:

• margin-top
• margin-left
• margin-bottom
• margin-right
• margin-block-start
• margin-block-end
• margin-inline-start
• margin-inline-end
• margin
• margin-block
• margin-inline

Дескрипторы свойств размеров

Задают значения функции 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-center для выравнивания элемента с якорным позиционированием относительно центра якорного элемента по блочному или строчному направлению. Дескрипторы свойств align-self и justify-self могут принимать значение anchor-center.

Формальный синтаксис

Примеры

Использование пользовательского варианта позиционирования

В этом примере мы зададим якорный элемент и элемент с якорным позиционированием, а затем создадим четыре именованных пользовательских варианта резервного позиционирования. Эти варианты применяются к позиционируемому элементу, чтобы его содержимое всегда оставалось видимым, независимо от положения якорного элемента в области просмотра.

HTML

Мы добавим два элемента <div>, которые станут якорем и элементом с якорным позиционированием:

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

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

Сначала зададим элементу <body> очень большой размер, чтобы можно было прокручивать якорь и позиционируемый элемент по области просмотра как по горизонтали, так и по вертикали:

body {
  width: 1500px;
  height: 500px;
}

.anchor {
  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;
}

Якорю задаётся свойство anchor-name и значение absolute свойства position. Затем мы размещаем его ближе к центру начальной отрисовки <body> с помощью значений свойств top и left:

.anchor {
  anchor-name: --my-anchor;
  position: absolute;
  top: 100px;
  left: 350px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

Затем с помощью директивы @position-try мы задаём четыре пользовательских варианта позиционирования, используя описательные имена <dashed-ident> для их идентификации и указания назначения. Каждый вариант размещает позиционируемый элемент в определённом положении относительно якорного элемента и задаёт подходящее значение 10px для поля между позиционируемым элементом и якорем. Позиционирование реализовано несколькими способами, чтобы продемонстрировать доступные методы:

• В первом и последнем вариантах позиционирования используется position-area.
• Во втором варианте позиционирования используется свойство top со значением anchor() и свойство justify-self: anchor-center, чтобы выровнять позиционируемый элемент по центру якоря в строчном направлении.
• В третьем варианте позиционирования используется свойство left со значением anchor(), вложенным в функцию calc(), которая добавляет 10px отступа (вместо создания отступа с помощью свойства margin, как в других вариантах). Затем используется свойство align-self: anchor-center, чтобы выровнять позиционируемый элемент по центру якоря в блочном направлении.

Наконец, для вариантов позиционирования слева и справа задаётся меньшая ширина width

@position-try --custom-left {
  position-area: left;
  width: 100px;
  margin-right: 10px;
}

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin-top: 10px;
  position-area: none;
}

@position-try --custom-right {
  left: calc(anchor(right) + 10px);
  align-self: anchor-center;
  width: 100px;
  position-area: none;
}

@position-try --custom-bottom-right {
  position-area: bottom right;
  margin: 10px 0 0 10px;
}

Для информационного блока задаётся фиксированное позиционирование, свойство position-anchor, которое ссылается на anchor-name якоря и связывает их, а также привязка к верхнему краю якоря с помощью position-area. Кроме того, задаются фиксированная width и нижнее margin. Затем пользовательские варианты позиционирования указываются в свойстве position-try-fallbacks, чтобы предотвратить выход позиционируемого элемента за пределы области просмотра или его прокрутку за её пределы, когда якорь приближается к краю области просмотра.

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top;
  width: 200px;
  margin-bottom: 10px;
  position-try-fallbacks:
    --custom-left, --custom-bottom, --custom-right, --custom-bottom-right;
}

Результат

Прокрутите страницу и обратите внимание, как меняется положение позиционируемого элемента при приближении якоря к разным краям области просмотра. Это происходит из-за применения различных вариантов резервного позиционирования.

Рассмотрим, как работают эти варианты позиционирования:

• Прежде всего, обратите внимание, что положение по умолчанию задаётся с помощью position-area: top. Когда информационный блок не выходит за пределы страницы ни в одном направлении, он располагается над якорем, а варианты резервного позиционирования, заданные в свойстве position-try-fallbacks, игнорируются. Также обратите внимание, что для информационного блока заданы фиксированная ширина и нижнее поле. Эти значения будут меняться при применении разных вариантов резервного позиционирования.
• Если информационный блок начинает выходить за пределы страницы, браузер сначала пробует вариант --custom-left. Он перемещает информационный блок влево от якоря с помощью position-area: left, соответствующим образом изменяет поле и задаёт блоку другую ширину.
• Затем браузер пробует вариант --custom-bottom. Он перемещает информационный блок вниз от якоря с помощью top и justify-self вместо position-area и задаёт подходящее поле. В нём нет дескриптора width, поэтому для информационного блока восстанавливается ширина по умолчанию 200px, заданная свойством width.
• Затем браузер пробует вариант --custom-right. Он работает почти так же, как вариант --custom-left, и для него применяется то же значение дескриптора width. Однако для размещения позиционируемого элемента используются left и align-self вместо position-area. Кроме того, значение left заключено в функцию calc(), в которой мы добавляем 10px для создания отступа, а не используем margin.
• Если ни один из остальных вариантов резервного позиционирования не предотвращает выход позиционируемого элемента за пределы области просмотра, браузер в качестве последнего средства пробует вариант --custom-bottom-right. Он размещает позиционируемый элемент внизу справа от якоря с помощью position-area: bottom right.

При применении варианта позиционирования его значения переопределяют исходные значения, заданные для позиционируемого элемента. Например, изначально для позиционируемого элемента задана width со значением 200px, но при применении варианта позиционирования --custom-right ширина элемента устанавливается равной 100px.

В некоторых случаях в пользовательских вариантах позиционирования нужно задать значения, чтобы отключить исходные значения. В вариантах --custom-bottom и --custom-right для размещения позиционируемого элемента используются свойства отступа и значения *-self: anchor-center, поэтому в обоих случаях мы сбрасываем ранее заданное значение position-area, устанавливая position-area: none. Если этого не сделать, исходное значение position-area: top продолжит действовать и будет мешать остальным параметрам позиционирования.

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

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

См. также

• position-area
• position-anchor
• position-try-fallbacks
• position-try
• Функция anchor()
• Функция anchor-size()
• Модуль якорного позиционирования CSS
• Руководство «Использование якорного позиционирования CSS»
• Руководство «Варианты резервного позиционирования и условное скрытие при переполнении»
• CSSPositionTryRule