Контекстные меню Popover с якорным позиционированием

CSS-свойство anchor-positioning идеально подходит для создания всплывающих элементов, таких как тултипы и контекстные меню, которые появляются рядом с связанным элементом. В этой статье демонстрируется создание такого меню на примере кнопки "Kebab" в компоненте "Card".

HTML-разметка для этого решения использует <button> с атрибутами command="toggle-popover", commandfor="card-menu" и interestfor="card-menu". Это позволяет использовать новый API Popover для переключения видимости меню без JavaScript, даже поддерживая открытие по наведению/фокусу с popover="hint". Само меню представлено элементом <menu>, который функционально аналогичен <ul>.

Для связи кнопки и меню используется style="anchor-name: --card;" на кнопке и style="position-anchor: --card;" на меню. Это устанавливает именованный якорь, относительно которого будет позиционироваться всплывающее окно.

CSS для меню включает display: none; в исходном состоянии. Благодаря современным возможностям CSS, таким как transition-behavior: allow-discrete; и @starting-style, теперь можно анимировать свойства, включая display, при открытии и закрытии поповера. Изначальное позиционирование меню определяется с помощью position-area: block-start span-inline-start;.

Одной из самых важных частей является обработка запасных вариантов позиционирования (fallbacks). Без них меню могут обрезаться краями экрана, делая их нечитаемыми и непригодными для использования. Свойство position-try позволяет определить, как браузер должен перепозиционировать элемент, если он не помещается на экране.

Наиболее интуитивным, но неверным, подходом для универсального переворачивания является position-try: flip-inline flip-block;, который пытается перевернуть элемент сразу в обеих плоскостях. Правильный подход, обеспечивающий последовательную проверку и применение запасных вариантов, выглядит так:

.good-positioning-fallbacks {
  position-try: flip-block, flip-inline, flip-block flip-inline;
}

Эта "заклинание" сначала пытается перевернуть элемент по вертикали (flip-block), затем по горизонтали (flip-inline), и только потом – в обеих плоскостях (flip-block flip-inline), гарантируя, что меню будет отображаться корректно независимо от его положения на экране. Кроме того, можно использовать синтаксис @position-try для определения более сложных и стилизованных запасных вариантов, позволяющих изменять не только позицию, но и другие стили при каждом запасном варианте.

Оригинал статьи: Popover Context Menus with Anchor Positioning