CSS Anchor Positioning достигает статуса Baseline: что нужно знать фронтенд-разработчикам для замены Popper.js и Floating UI
Более десяти лет позиционирование подсказки, всплывающего окна или выпадающего списка относительно другого элемента было одной из самых обманчиво сложных задач во фронтенд-разработке. CSS Anchor Positioning, теперь официально являющийся функцией Baseline с января 2026 года, меняет всё. Он предоставляет нативный, декларативный способ привязки одного элемента к другому, устраняя необходимость в JavaScript-библиотеках, таких как Popper.js и Floating UI, в подавляющем большинстве случаев.
В этом глубоком погружении вы узнаете, как именно работает CSS Anchor Positioning, увидите реальные сравнения кода и поймёте путь миграции от тяжёлых JavaScript-движков позиционирования. К концу у вас будет чёткий план по сокращению размера бандла и упрощению UI-кода.
Почему позиционирование всегда было проблемой
Даже простая подсказка требует вычисления позиции целевого элемента, обработки коллизий с областью просмотра и поведения переворота. Библиотеки вроде Popper.js (более 12 миллионов еженедельных загрузок npm) и Floating UI (современная эволюция) решали это с помощью тысяч строк JavaScript, ценой накладных расходов во время выполнения и сложной интеграции. Но они были необходимы, потому что CSS сам по себе не мог справиться с динамическим размещением.
«Годами мы говорили себе, что JavaScript — единственный способ надёжно позиционировать плавающие элементы. CSS Anchor Positioning доказывает, что мы ошибались, и это великолепно.»
Рассмотрим классическую проблему подсказки: кнопка на краю экрана. Вы хотите, чтобы подсказка появлялась сверху или снизу, но если нет места, она должна переворачиваться в сторону. Достижение этого с помощью ванильного JS означало прослушивание событий прокрутки и изменения размера, измерение размеров и переключение классов — борьбу с перекомпоновкой макета. CSS Anchor Positioning решает это с помощью нескольких свойств.
Как работает CSS Anchor Positioning
Спецификация вводит две ключевые концепции: якорные элементы и позиционируемые элементы. Якорь — это любой элемент, служащий точкой отсчёта; позиционируемый элемент — тот, который вы хотите разместить относительно этого якоря. Магия происходит через функцию anchor() и свойство anchor-name .
/* Определяем якорь */
.target \{
anchor-name: --my-anchor;
\}
/* Позиционируем подсказку относительно этого якоря */
.tooltip \{
position: absolute;
position-anchor: --my-anchor;
bottom: anchor(top);
left: anchor(center);
translate: -50% 0;
\}
Это базовая подсказка, расположенная над целью, с центрированием по горизонтали. Никакого JavaScript, никаких измерений, только CSS. А когда подсказка выходит за пределы области просмотра, @position-fallback позволяет определить альтернативные размещения без единой строки скрипта.
CSS Anchor Positioning — это не только подсказки. Выпадающие меню, выбор даты, контекстные меню и даже сложные вложенные UI-панели могут быть привязаны декларативно, что упрощает поддержку и отладку кода.
Ключевые CSS-свойства для привязки
anchor-name: присваивает элементу идентификатор якоряposition-anchor: указывает, какой якорь использует позиционируемый элементinset-area: сокращение для размещения позиционируемого элемента относительно якоря (например, "top center", "bottom right")anchor()функция: разрешается в конкретный край якоря (верх, низ, лево, право, центр и т.д.)@tryблок: определяет запасные позиции, когда размещение по умолчанию вызывает переполнение
Замена Popper.js на CSS Anchor Positioning
Popper.js был золотым стандартом позиционирования в таких библиотеках, как Bootstrap, Material UI и тысячах пользовательских реализаций. Давайте сравним типичную настройку Popper.js с нативным CSS-эквивалентом.
Типичная инициализация Popper.js выглядит так:
import { createPopper } from '@popperjs/core';
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
const popperInstance = createPopper(button, tooltip, \{
placement: 'top',
modifiers: [
\{ name: 'offset', options: \{ offset: [0, 8] \} \},
\{ name: 'flip', options: \{ fallbackPlacements: ['bottom', 'left'] \} \}
]
\});
С CSS Anchor Positioning то же поведение достигается только с помощью CSS и HTML-семантики:
button \{
anchor-name: --tooltip-anchor;
\}
[role="tooltip"] \{
position-anchor: --tooltip-anchor;
inset-area: top center;
margin-bottom: 8px;
/* Fallback defined via @try */
position-try: --bottom, --left;
\}
@position-try --bottom \{
inset-area: bottom center;
margin-top: 8px;
margin-bottom: 0;
\}
@position-try --left \{
inset-area: center left;
margin-right: 8px;
\}
При миграции вы можете сохранить те же ARIA-роли и обработку событий (mouseenter/focus) для показа/скрытия подсказки. Логика позиционирования просто полностью переходит в CSS.
Замена Floating UI (преемника Popper)
Floating UI модернизировал подход с помощью архитектуры на основе middleware и лучшего tree-shaking. Однако он всё ещё поставляет JavaScript. Вот как мигрирует подсказка Floating UI:
// Floating UI с React
import { useFloating, offset, flip, shift } from '@floating-ui/react';
function Tooltip({ children, content }) \{
const \{ x, y, strategy, refs \} = useFloating(\{
placement: 'top',
middleware: [offset(8), flip(), shift()]
\});
// ... render with style=\{\{ position: strategy, left: x, top: y \}\}
\}
Замените всё это статическим CSS. В современных фреймворках, таких как Next.js или Remix, вы можете поставлять нулевой JS-код для позиционирования. Влияние на Core Web Vitals немедленное.
Диаграмма выше показывает резкое снижение времени блокировки основного потока при переходе от позиционирования на основе вычислений JavaScript к нативному CSS Anchor. Для сайтов электронной коммерции с десятками подсказок и выпадающих списков совокупный выигрыш значителен.
Преимущества в производительности и размере бандла
Каждый килобайт JavaScript имеет значение. Popper.js вместе с его зависимостями может добавить 15–20 кБ (сжатых gzip) в ваш бандл. Floating UI легче, но всё равно 8–12 кБ. Для среднего мобильного сайта это измеримое улучшение времени до интерактивности.
Но настоящий выигрыш в производительности — во время выполнения. CSS Anchor Positioning обрабатывается движком макета браузера; ему не нужно пересчитывать позиции при каждой прокрутке или изменении размера через JavaScript. Он может использовать GPU-ускоренные трансформации и полностью избежать перекомпоновки макета.
Мы протестировали панель с 50 привязанными подсказками. С Popper.js прокрутка вызывала множественные принудительные перерисовки и заметные подёргивания. Версия с CSS Anchor рендерилась плавно даже на среднебюджетном мобильном устройстве.
Поддержка браузеров и запасные варианты
С января 2026 года CSS Anchor Positioning входит в набор Baseline , что означает его нативную поддержку во всех основных браузерах: Chrome, Firefox, Safari и Edge. Для старых браузеров плавный запасной вариант прост: позиционируемый элемент будет просто отображаться в своём обычном потоке (часто не идеально, но функционально), или вы можете использовать крошечный полифилл, если вам нужно поддерживать старые версии.
Вы можете использовать @supports для условного применения новых свойств:
@supports (anchor-name: --test) \{
.tooltip \{
position-anchor: --my-anchor;
inset-area: top;
\}
\}
/* Запасной вариант для браузеров, не поддерживающих позиционирование якорей */
@supports not (anchor-name: --test) \{
.tooltip \{
top: 0;
left: 50%;
/* ... simple static position */
\}
\}
Хотя это Baseline, всегда тестируйте на старых устройствах. По состоянию на начало 2026 года глобальный порог поддержки составляет примерно 95% пользователей. Для корпоративных приложений может потребоваться переходный период, когда вы будете определять поддержку функции и обслуживать старую JS-логику только при необходимости.
Пошаговое руководство по миграции
Готовы отказаться от библиотеки позиционирования? Следуйте этому практическому плану:
- Проверьте текущее использование: Составьте каталог всех подсказок, всплывающих окон, выпадающих списков и меню, использующих Popper.js или Floating UI.
- Задайте имена якорей: Добавьте
anchor-nameк ссылочным элементам. Выбирайте описательные имена, например--profile-menu-anchor. - Перепишите CSS позиционирования: Замените JS-логику размещения на
inset-areaиanchor(). Используйте блоки@tryдля поведения переворота/запасного варианта. - Удалите JS-слушатели и промежуточное ПО: Удалите слушатели изменения размера/прокрутки, функции-модификаторы и импорт библиотеки. Переключение показа/скрытия остается (через CSS-классы или несколько строк чистого JS).
- Тестируйте на разных окнах просмотра: Проверьте поведение при переполнении и интерактивные состояния.
- Постепенно внедряйте: Используйте функциональный флаг для включения CSS-якорей в современных браузерах, сохраняя JS-запасной вариант для старых, пока не будете уверены.
Внедрение в реальном мире и будущее
Крупные UI-библиотеки уже интегрируют CSS Anchor Positioning. Bootstrap 6 (по слухам, в конце 2026 года) предложит чистый CSS-компонент подсказок. MUI и Ant Design экспериментируют с позиционированием без выполнения кода. Даже инструменты дизайна, такие как Figma, используют его для UI плагинов.
"CSS Anchor Positioning — это недостающий элемент, который действительно делает CSS полноценным языком разметки для всех UI-паттернов."
Преимущества в производительности неоспоримы. Разработчики экономят часы, не настраивая смещения и не отлаживая логику переворота. Повышение производительности происходит автоматически. А долгосрочное обслуживание значительно упрощается.
Заключение
CSS Anchor Positioning больше не экспериментальная функция, она готова к производству. Она позволяет фронтенд-разработчикам создавать сложные, адаптивные интерфейсы с меньшим количеством кода и лучшей производительностью. Начинаете ли вы новый проект или поддерживаете устаревшую кодовую базу, сейчас самое время внедрить её.
Примите перемены. Откажитесь от долга по JavaScript-позиционированию. Ваши пользователи (и анализатор сборки) скажут вам спасибо.
