CSS anchor positioning
Новая возможность CSS (Chrome, 2024) для позиционирования элемента относительно другого, «якорного», — например, подсказки или выпадающего меню, привязанных к своей кнопке и автоматически смещающихся, если не помещаются. Решает на чистом CSS то, что долго требовало JS-библиотек.
Проблема: чтобы разместить поповер, подсказку или меню рядом с элементом и держать их видимыми (переворачивая на другую сторону у края экрана), нужны были библиотеки вроде Popper.js и Floating UI, которые каждый раз измеряют и позиционируют всё в JavaScript. Привязка к якорю делает это декларативно: элемент помечают как якорь (anchor-name), другой позиционируют относительно него (position-anchor, anchor()) и задают запасные позиции (position-try), на которые браузер сам переключится, если места не хватит. Применение: подсказки, меню, поповеры, выноски комментариев — всё, что должно «прицепиться к X и умно распорядиться местом». Естественно сочетается с Popover API и <dialog>. Пока ранняя стадия (сначала Chrome, остальные подтягиваются в 2024–2025), но улучшение большое.