CSS Anchor Positioning: прощай, JS-костыли для тултипов и выпадающих меню ⚓️
Разбор CSS Anchor Positioning от Джоша Комо: привязка элементов, автоматические фоллбэки и интеграция с popover.
Джош Комо выпустил свой фирменный, невероятно наглядный разбор относительно новой, но уже нативно поддерживаемой во всех основных браузерах спецификации — CSS Anchor Positioning API.
Все мы знаем эту вечную боль: нужно привязать поп-ап, подсказку или кастомное контекстное меню к конкретной кнопке. Исторически это решалось либо тонной JS-кода с вычислением getBoundingClientRect(), скролла и ресайза, либо подключением тяжелых библиотек вроде Popper.js/Floating UI.
Теперь браузер умеет связывать элементы декларативно прямо в стилях.
Главное из разбора Джоша:
🔹 Базовая связка через имя: Мы задаем элементу-донору уникальный идентификатор через свойство anchor-name: --my-anchor, а плавающему элементу говорим position: absolute и привязываем его оси с помощью функции anchor(). Например: top: anchor(--my-anchor bottom).
🔹 Избавление от position: relative ограничений: Тултип больше не обязан быть прямым потомком кнопки или находиться внутри общего контейнера с position: relative. Механизм находит «якорь» по его глобальному имени в пределах страницы. Больше никакого геморроя с overflow: hidden, который раньше намертво обрезал вылетающие подсказки.
🔹 Умный фоллбэк: Самая жирная фича — свойство position-try-options. Если подсказка сверху упирается в край экрана при скролле, браузер автоматически перекинет её вниз (например, с помощью значения flip-block), без единой строчки на JavaScript.
🔹 Интеграция с Поповерами: Anchor Positioning идеально работает в связке с нативным HTML-атрибутом popover. Это позволяет легко выносить тултипы на самый верхний слой документа (top layer), полностью исключая любые конфликты с z-index.
Статья написана в классическом стиле Комо — с интерактивными песочницами, где можно покрутить код руками и наглядно увидеть, как именно ведут себя элементы при скролле контейнера. Рекомендуется к изучению всем, кто хочет разгрузить JS-бандл и писать чистый CSS.
Как вам апишка? Уже затащили в продакшен для поп-апов вместо Floating UI, или пока по привычке держитесь за проверенные JS-либы?