Создание всплывающих уведомлений

Веб-функции: Popover Anchor positioning sibling-count() и sibling-index() transition-behavior

Всплывающие уведомления – это временные сообщения о статусе. В отличие от меню, они не должны закрываться, когда пользователь взаимодействует с другими частями страницы. Состояние popover="manual" идеально, поскольку в нем отсутствует поведение "light-dismiss" и позволяет сосуществовать нескольким уведомлениям.

Руководство по реализации

  • ОБЯЗАТЕЛЬНО. Используйте popover="manual", чтобы уведомление оставалось видимым, пока не будет закрыто или пока не истечет время ожидания, заданное скриптом.
  • РЕКОМЕНДУЕТСЯ использовать контейнер для управления наложением нескольких всплывающих уведомлений. Поскольку всплывающие окна в верхнем слое игнорируют родительский z-индекс, вам необходимо расположить их по отдельности или в общей группе макетов.
  • РЕКОМЕНДУЕТСЯ использовать sibling-index(), чтобы добавить поля между всплывающими уведомлениями и сделать видимыми элементы, расположенные ниже в стеке.
  • РЕКОМЕНДУЕТСЯ добавить в уведомление кнопку "Закрыть" с атрибутом popovertargetaction="hide".
  • РЕКОМЕНДУЕТСЯ использовать JavaScript для таймеров автоматического закрытия (например, вызов hidePopover() через 3000 мс).
  • РЕКОМЕНДУЕТСЯ использовать transition-behavior: allow-discrete, чтобы анимировать появление и исчезновение элементов верхнего слоя.

Резервные стратегии

Резервные варианты и поддержка Popover в браузерах

Popover API в основном представляет собой прогрессивное улучшение, но его определяющие характеристики – продвижение верхнего слоя, легкое отклонение и вызов popovertarget – не имеют эквивалента только для CSS. Для старых браузеров нужен полифил или резервный вариант, если вы не хотите его использовать.

Полифил. Чтобы обеспечить поддержку атрибута popover в старых браузерах, условно загрузите @oddbird/popover-polyfill. ОБЯЗАТЕЛЬНО. Проверьте наличие свойства popover в HTMLElement.prototype и загрузите полифил, только если встроенная поддержка отсутствует. Не загружайте его без необходимости.

С помощью сборщика или карты импорта:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Если вы не используете сборщик, импортируйте из CDN в <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

Ограничение, связанное со стилями. Полифил не может определить настоящий псевдокласс :popover-open, поэтому вместо него применяется класс .\:popover-open. ОБЯЗАТЕЛЬНО. Объедините эти два правила с помощью :is() или :where(), иначе браузеры, не поддерживающие :popover-open, будут игнорировать правило целиком.

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

В качестве альтернативы для устаревшего резервного варианта без полифила используйте position: fixed и вручную рассчитайте координаты с помощью getBoundingClientRect() или используйте позиционирование по умолчанию с помощью inset: auto, если это допустимо для вашего случая.

sibling-index()

  • Рекомендация. Если sibling-index() не поддерживается, используйте оператор +, чтобы добавить поле вручную. например popover + popover { margin-top: 1rem }.

anchor-positioning

  • Рекомендация. Используйте полифил для позиционирования привязки CSS. Для резервного варианта без полифила по умолчанию установите подсказку в фиксированное положение внизу области просмотра с помощью @supports not (anchor-name: --foo).

transition-behavior

  • Рекомендация. Если свойство transition-behavior не поддерживается, используйте JavaScript, чтобы добавить анимацию с помощью классов, когда элемент всплывающего уведомления появляется и исчезает.