CSS Anchor Positioning: Подробное руководство

На протяжении многих лет позиционирование всплывающих подсказок, выпадающих меню и поповеров означало борьбу с JavaScript-вычислениями. Приходилось измерять элементы, отслеживать позиции прокрутки и постоянно пересчитывать, чтобы элементы интерфейса оставались правильно выровненными. CSS Anchor Positioning полностью меняет это, позволяя привязывать элементы друг к другу с помощью чистого CSS — без необходимости в JavaScript.

Что такое CSS Anchor Positioning?

CSS Anchor Positioning — это нативный браузерный API, который позволяет позиционировать элементы относительно других элементов на странице. Представьте это как создание невидимых соединений между элементами: один выступает в роли “якоря” (опорной точки), а другой — в роли “цели” (позиционируемого элемента).

Это исключает необходимость в JavaScript-библиотеках для позиционирования при создании распространенных UI-паттернов, таких как всплывающие подсказки, контекстные меню и плавающие диалоги. Браузер обрабатывает все сложные вычисления, включая границы viewport и позиции прокрутки.

Основные свойства: создание якорных связей

Настройка якорей с помощью anchor-name

Сначала необходимо назначить элемент якорем, присвоив ему уникальный идентификатор:

.menu-button {
  anchor-name: --main-menu;
}

Имя якоря должно начинаться с двойного дефиса (--), аналогично пользовательским CSS-свойствам.

Соединение элементов с помощью position-anchor

Затем подключите целевой элемент к якорю:

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
}

Целевой элемент должен иметь position: absolute или position: fixed для работы с якорным позиционированием.

Позиционирование элементов с помощью position-area

Свойство position-area предоставляет самый простой способ позиционирования цели. Оно использует модель сетки 3×3 с якорем в центре:

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
  position-area: bottom center;
}

Можно использовать физические значения (top, bottom, left, right) или логические значения (block-start, inline-end) для лучшей поддержки интернационализации. Префикс span- позволяет элементам растягиваться на несколько ячеек сетки:

.tooltip {
  position-area: top span-inline;
}

Точная настройка с помощью функции anchor()

Для точного контроля используйте функцию anchor() со свойствами inset:

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(left);
}

Это позиционирует верхний край всплывающей подсказки у нижнего края якоря с выравниванием левых краев. Также можно явно ссылаться на конкретные якоря:

.multi-anchor-target {
  top: anchor(--anchor-1 bottom);
  right: anchor(--anchor-2 left);
}

Адаптивное изменение размеров с помощью anchor-size()

Функция anchor-size() позволяет изменять размеры элементов на основе размеров их якоря:

.dynamic-tooltip {
  position-anchor: --button;
  width: anchor-size(width);
  max-height: calc(anchor-size(height) * 2);
}

Это создает всплывающие подсказки, которые масштабируются пропорционально своим якорям — идеально для адаптивного дизайна.

Обработка граничных случаев с помощью position-try

Что происходит, когда позиционируемый элемент достигает края viewport? Свойство position-try предоставляет резервные позиции:

.context-menu {
  position: absolute;
  position-anchor: --menu-trigger;
  position-area: bottom start;
  position-try: flip-block, flip-inline;
}

Браузер автоматически пробует альтернативные позиции, когда основная позиция вызвала бы переполнение. Встроенные ключевые слова, такие как flip-block и flip-inline, обрабатывают распространенные сценарии, или можно определить пользовательские резервные варианты:

@position-try --compact-menu {
  position-area: top;
  width: 200px;
}

.context-menu {
  position-try: --compact-menu, flip-block;
}

Статус поддержки браузерами

По состоянию на конец 2024 года CSS Anchor Positioning имеет растущую поддержку браузерами:

• Chrome/Edge: Полная поддержка с версии 125
• Safari: Поддерживается с версии 18
• Firefox: Реализация в процессе

Для продакшн-использования рассмотрите полифилл от Oddbird, который обеспечивает совместимость вплоть до Firefox 54 и Chrome 51. Обнаружение функций выполняется просто:

@supports (anchor-name: --test) {
  /* Стили якорного позиционирования */
}

Практические советы по реализации

При реализации CSS anchor positioning для всплывающих подсказок и меню:

1. Всегда сбрасывайте стандартное позиционирование для popover-элементов: inset: auto
2. Используйте логические свойства для лучшей интернационализации
3. Комбинируйте с Popover API для полных взаимодействий без JavaScript
4. Помните о доступности — добавляйте соответствующие ARIA-атрибуты для поддержания семантических связей

Заключение

CSS Anchor Positioning трансформирует способ создания плавающих UI-элементов. Перенося логику позиционирования из JavaScript в CSS, мы получаем лучшую производительность, более чистый код и автоматическую обработку граничных случаев. В ожидании полной поддержки браузерами полифилл предоставляет надежный путь для продакшн-использования. Начните экспериментировать с всплывающими подсказками и выпадающими меню — вы быстро оцените простоту декларирования отношений вместо вычисления позиций.

Часто задаваемые вопросы

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..