Представляем API позиционирования привязки CSS

Una Kravets

Опубликовано: 10 мая 2024 г.

API позиционирования якорей CSS — это революционное решение в веб-разработке, поскольку оно позволяет изначально позиционировать элементы относительно других элементов, известных как якоря . Этот API упрощает сложную компоновку многих функций интерфейса, таких как меню и подменю, подсказки, элементы выбора, метки, карточки, диалоговые окна настроек и многое другое. Благодаря встроенному в браузер позиционированию якорей вы сможете создавать многоуровневые пользовательские интерфейсы без использования сторонних библиотек, открывая целый мир творческих возможностей.

Позиционирование якоря доступно в Chrome 125.

Основные концепции: якоря и позиционируемые элементы

В основе этого API лежит взаимосвязь между якорями и позиционируемыми элементами . Якорь — это элемент, обозначенный как точка отсчёта с помощью свойства anchor-name . Позиционируемый элемент — это элемент, размещённый относительно якоря с помощью свойства position-anchor или явным образом с использованием anchor-name в логике позиционирования.

Установка якорей

Создать якорь просто. Примените свойство anchor-name к выбранному элементу и присвойте ему уникальный идентификатор. Этот уникальный идентификатор должен начинаться с двух дефисов, как в случае с переменной CSS.

.anchor-button {
    anchor-name: --anchor-el;
}

После присвоения имени якоря, .anchor-button служит якорем, готовым направлять размещение других элементов. Вы можете присоединить этот якорь к другим элементам одним из двух способов:

Неявные якоря

Первый способ присоединения якоря к другому элементу — использование неявного якоря , как в следующем примере кода. Свойство position-anchor добавляется к элементу, который вы хотите присоединить к якорю, и содержит имя якоря (в данном случае --anchor-el ) в качестве значения.

.positioned-notice {
    position-anchor: --anchor-el;
}

При неявной связи якоря вы можете позиционировать элементы с помощью функции anchor() без явного указания имени якоря в ее первом аргументе.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Явные якоря

В качестве альтернативы вы можете использовать имя якоря непосредственно в функции якоря (например, top: anchor(--anchor-el bottom ). Это называется явным якорем и может быть удобно, если вы хотите привязаться к нескольким элементам (пример см. далее).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Расположение элементов относительно якорей

Позиционирование якоря основано на абсолютном позиционировании CSS. Чтобы использовать значения позиционирования, необходимо добавить position: absolute к позиционируемому элементу. Затем используйте функцию anchor() для применения значений позиционирования. Например, чтобы разместить якорный элемент в левом верхнем углу якорного элемента, используйте следующее позиционирование:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

Теперь у вас есть один элемент, прикрепленный к другому, как показано на следующем рисунке.

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

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

Центрируйте позиционируемый элемент с помощью anchor-center

Чтобы упростить центрирование элемента, позиционируемого как привязка, относительно его привязки, есть новое значение, называемое anchor-center , которое можно использовать со свойствами justify-self , align-self , justify-items и align-items .

В этом примере предыдущий пример изменен с помощью justify-self: anchor-center для центрирования позиционируемого элемента над его якорем.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

Несколько якорей

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

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

Положение с inset-area

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

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

Различные возможные варианты расположения вставок, показанные на 9-ячеечной сетке

Чтобы использовать область вставки вместо абсолютного позиционирования, используйте свойство inset-area с физическими или логическими значениями. Например:

• Верхний центр: inset-area: top или inset-area: block-start
• Лево-центральная: inset-area: left или inset-area: inline-start
• Внизу по центру: inset-area: bottom или inset-area: block-end
• Право-центр: inset-area: right или inset-area: inline-end

Размер элементов с помощью anchor-size()

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

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

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

Используйте якорь с элементами верхнего слоя, такими как всплывающие окна и диалоговые окна.

Позиционирование якорей отлично работает с элементами верхнего слоя, такими как popover и <dialog> . Хотя эти элементы размещаются в отдельном слое от остального поддерева DOM, позиционирование якорей позволяет привязывать их к элементам, не находящимся в верхнем слое, и прокручивать вместе с ними. Это огромное преимущество для многослойных интерфейсов.

В следующем примере набор всплывающих подсказок открывается с помощью кнопки. Кнопка — это якорь, а подсказка — позиционируемый элемент. Вы можете оформить позиционируемый элемент так же, как любой другой привязанный элемент. В этом конкретном примере anchor-name и position-anchor — это встроенные стили кнопки и подсказки. Поскольку каждому якорю требуется уникальное имя, при создании динамического контента встраивание — самый простой способ сделать это.

Отрегулируйте положение якорей с помощью @position-try

Определив начальное положение якоря, вы можете скорректировать его, если якорь достигает краев содержащего его блока. Для создания альтернативных положений якоря можно использовать директиву @position-try вместе со свойством position-try-options .

В следующем примере справа от основного меню отображается подменю. Меню и подменю — отличный пример использования API позиционирования якоря вместе с атрибутом popover , поскольку такие меню, как правило, привязаны к кнопке-триггеру.

Если для этого подменю недостаточно места по горизонтали, вы можете переместить его под меню. Для этого сначала задайте начальное положение:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

Затем настройте резервные закрепленные позиции с помощью @position-try :

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Наконец, соедините их с помощью position-try-options . Всё вместе выглядит так:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Ключевые слова с автоматическим переворотом позиции привязки

Если у вас есть базовая настройка, например, переворачивание сверху вниз или слева направо (или и то, и другое), вы можете пропустить шаг создания собственных объявлений @position-try и использовать встроенные ключевые слова для переворачивания, поддерживаемые браузером, такие как flip-block и flip-inline . Они работают как заменители собственных объявлений @position-try и могут использоваться в сочетании друг с другом:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Ключевые слова Flip могут значительно упростить ваш анкорный код. Всего несколько строк — и вы можете создать полнофункциональный анкор с альтернативными позициями:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

position-visibility для якорей в подскроллерах

В некоторых случаях может потребоваться прикрепить элемент к подпрокрутке страницы. В таких случаях вы можете управлять видимостью привязки с помощью свойства position-visibility . Когда привязка остаётся на виду? Когда она исчезает? Эта функция позволяет вам управлять этими параметрами. Используйте position-visibility: anchors-visible чтобы позиционируемый элемент оставался на виду до тех пор, пока привязка не исчезнет из виду:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

В качестве альтернативы можно использовать position-visibility: no-overflow чтобы предотвратить переполнение якоря его контейнера.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

Обнаружение признаков и полифиллинг

Поскольку поддержка браузерами в настоящее время ограничена, вам, вероятно, следует использовать этот API с некоторыми мерами предосторожности. Во-первых, вы можете проверить наличие поддержки непосредственно в CSS, используя запрос @supports . Для этого нужно обернуть стили якорей следующим образом:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Кроме того, вы можете использовать полифил для позиционирования якорей с помощью полифилла CSS от Oddbird , который работает в Firefox 54, Chrome 51, Edge 79 и Safari 10. Этот полифилл поддерживает большинство базовых функций позиционирования якорей, хотя текущая реализация неполная и содержит устаревший синтаксис. Вы можете использовать ссылку unpkg или импортировать его напрямую в менеджере пакетов.

Примечание о доступности

Хотя API позиционирования якорей позволяет позиционировать элемент относительно других элементов, оно само по себе не создаёт между ними никакой значимой семантической связи. Если между элементом якоря и позиционируемым элементом действительно существует семантическая связь (например, позиционируемый элемент — это комментарий в боковой панели к тексту якоря), один из способов сделать это — использовать aria-details для указания ссылки с элемента якоря на позиционируемые элементы. Программы для чтения с экрана всё ещё учатся работать с aria-details, но поддержка улучшается.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Если вы используете позиционирование якоря с атрибутом popover или элементом <dialog> , браузер будет корректировать навигацию фокуса для обеспечения надлежащей доступности, поэтому вам не нужно размещать всплывающие окна или диалоговые окна в порядке DOM. Подробнее см. в примечании о доступности в спецификации.

Заключение

Это совершенно новая функция, и мы с нетерпением ждем ваших творений. На данный момент мы видели несколько действительно интересных примеров использования от сообщества, таких как динамические подписи на диаграммах, соединительные линии, сноски и визуальные перекрёстные ссылки. Пока вы экспериментируете с позиционированием якорей, мы будем рады вашим отзывам. Если вы обнаружите какие-либо ошибки, сообщите нам об этом .

Дальнейшее чтение

• Рисование линии для соединения элементов с помощью позиционирования якоря CSS
• Будущее CSS: позиционирование якоря Романа Комарова
• Коллекция демо-записей Anchor от Una на Codepen
• Инструмент для позиционирования якоря