Anchor positioning в CSS теперь во всех браузерах
CSS anchor positioning вышел из экспериментальной стадии и поддерживается Chrome, Firefox и Safari — всплывающие элементы можно привязать к якорю без JavaScript.
Anchor positioning наконец-то доехал до всех основных браузеров. Раньше всплывающие подсказки, тултипы и выпадающие меню почти всегда требовали JavaScript: нужно было вычислять координаты якоря и следить за скроллом. Теперь браузер делает это сам.
Как это работает
Элемент-якорь получает anchor-name, а позиционируемый блок ссылается на него через position-anchor. Свойство anchor() подставляет нужные отступы от краёв якоря, а position-try-fallbacks перебирает варианты, если блок не помещается на экране.
.tooltip {
position: absolute;
position-anchor: --trigger;
top: anchor(bottom);
left: anchor(center);
}
Что изменится для разработчиков
Меньше кода на React/Vue-хуках для позиционирования. Особенно заметно в дизайн-системах: дропдауны, поповеры и подсказки становятся чище. Для старых браузеров всё ещё нужен graceful degradation, но базовая разметка уже не завязана на скрипты.
Что это значит для бизнеса
Интерфейсы с подсказками и формами станут стабильнее без дополнительной разработки. Это снижает стоимость поддержки сложных лендингов и личных кабинетов, где много всплывающих элементов.