CSS Anchor Positioning: полное руководство по привязке элементов без JavaScript
Долгое время позиционирование всплывающих окон, тултипов и выпадающих меню было настоящей головной болью для веб-разработчиков. Нам приходилось полагаться на громоздкие JavaScript-библиотеки, такие как Popper.js или Floating UI, чтобы правильно рассчитать координаты элемента относительно якоря, учитывая прокрутку и границы экрана. С появлением CSS Anchor Positioning API ситуация кардинально меняется. Теперь мы можем привязывать один элемент к другому, используя исключительно возможности CSS.
Что такое CSS Anchor Positioning
CSS Anchor Positioning API — это набор CSS-свойств, которые позволяют связать позиционируемый элемент (например, подсказку) с элементом-якорем (например, кнопкой). Основное преимущество заключается в том, что браузер берет на себя все сложные расчеты. Если якорь перемещается при изменении размеров окна или прокрутке, привязанный элемент автоматически следует за ним.
Основные концепции и терминология
Для работы с этой технологией необходимо понимать два ключевых понятия:
- Якорь (Anchor element): Это базовый элемент, к которому мы хотим привязаться. Обычно это статичный или относительно позиционированный элемент в потоке документа.
- Позиционируемый элемент (Anchored element): Это элемент, который будет «летать» рядом с якорем. Он должен иметь абсолютное или фиксированное позиционирование.
Как создать связь между элементами
Первым шагом необходимо объявить якорь. Для этого используется свойство anchor-name. Имя якоря должно начинаться с двойного дефиса, что делает его похожим на CSS-переменную.
Пример объявления якоря: .button { anchor-name: —my-button; }
После того как якорь назван, мы можем привязать к нему другой элемент с помощью свойства position-anchor или используя функцию anchor() внутри свойств top, left, right или bottom.
Использование функции anchor()
Функция anchor() является сердцем всей системы. Она принимает три основных аргумента: имя якоря (необязательно, если указано position-anchor), сторону якоря, к которой мы привязываемся, и резервное значение.
Синтаксис: top: anchor(—my-button bottom);
Эта запись буквально означает: установи верхнюю границу текущего элемента вровень с нижней границей элемента —my-button.
Динамическое изменение позиции с position-try
Одной из самых мощных функций является автоматическая обработка переполнения. Если привязанный элемент выходит за пределы экрана, мы можем указать браузеру альтернативные позиции с помощью свойства position-try-fallbacks.
Например, если тултип не помещается сверху, мы можем приказать браузеру переместить его вниз или вбок. Это делается с помощью именованных наборов правил или предопределенных значений, таких как flip-block или flip-inline.
Преимущества перед JavaScript-решениями
- Производительность: Все вычисления происходят на уровне движка браузера в основном потоке визуализации, что избавляет от задержек, характерных для JS-скриптов.
- Упрощение кода: Больше не нужно подключать сторонние библиотеки весом в десятки килобайт ради простого тултипа.
- Доступность: CSS-решения работают быстрее и стабильнее на устройствах с ограниченными ресурсами.
Текущая поддержка и рекомендации
На данный момент CSS Anchor Positioning активно поддерживается в современных браузерах на базе Chromium (Google Chrome, Microsoft Edge). Для других браузеров технология находится на стадии рассмотрения или разработки. Внедряя это решение сегодня, рекомендуется использовать прогрессивное улучшение: проверять поддержку через @supports или оставлять базовые стили для старых браузеров.
CSS Anchor Positioning API — это огромный шаг вперед в декларативном описании интерфейсов. Он делает код чище, работу интерфейса быстрее, а жизнь разработчика проще.
Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь!