Представляем API поповера

Una Kravets

Поповеры повсюду в сети. Вы можете увидеть их в меню, переключателях и диалоговых окнах, которые могут проявляться в настройках учетной записи, виджетах раскрытия и предварительном просмотре карточек продуктов. Несмотря на то, насколько распространены эти компоненты, их создание в браузерах по-прежнему остается на удивление громоздким. Вам необходимо добавить сценарии для управления фокусом, состояниями открытия и закрытия, доступные привязки к компонентам, привязки клавиатуры для входа и выхода из интерфейса, и это все еще до того, как вы начнете создавать полезную, уникальную базовую функциональность вашего всплывающего окна.

Чтобы решить эту проблему, в браузеры поступает новый набор декларативных HTML API для создания всплывающих окон, начиная с API popover в Chromium 114.

Атрибут popover

Вместо того, чтобы самостоятельно управлять всей сложностью, вы можете позволить браузеру справиться с ней с помощью атрибута popover и последующего набора функций. Поддержка всплывающих окон HTML:

• Продвижение на верхний слой. Поповеры появятся на отдельном слое над остальной частью страницы, поэтому вам не придется возиться с z-index.
• Функция отключения света. Щелчок за пределами области всплывающего окна закроет всплывающее окно и вернет фокус.
• Управление фокусом по умолчанию. Открытие всплывающего окна приводит к тому, что следующая табуляция останавливается внутри всплывающего окна.
• Доступные привязки клавиатуры. Нажатие клавиши esc закроет всплывающее окно и вернет фокус.
• Доступные привязки компонентов. Семантическое соединение элемента popover с триггером popover.

Теперь вы можете создавать всплывающие окна со всеми этими функциями без использования JavaScript. Базовый поповер требует трёх вещей:

• Атрибут popover для элемента, содержащего всплывающее окно.
• id элемента, содержащего всплывающее окно.
• popovertarget со значением id всплывающего окна в элементе, который открывает всплывающее окно.

<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Теперь у вас есть полнофункциональный базовый поповер.

Это всплывающее окно можно использовать для передачи дополнительной информации или в качестве виджета раскрытия информации.

Значения по умолчанию и переопределения

По умолчанию, как и в предыдущем фрагменте кода, настройка всплывающего окна с помощью popovertarget означает, что кнопка или элемент, открывающий всплывающее окно, будет переключать его открытие и закрытие. Однако вы также можете создавать явные всплывающие окна, используя popovertargetaction . Это переопределяет действие переключения по умолчанию. Опции popovertargetaction включают в себя:

popovertargetaction="show" : показывает всплывающее окно. popovertargetaction="hide" : скрывает всплывающее окно.

Используя popovertargetaction="hide" , вы можете создать кнопку «закрыть» внутри всплывающего окна, как показано в следующем фрагменте:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Автоматические и ручные поповеры

Использование атрибута popover на самом деле является ярлыком для popover="auto" . При открытии popover по умолчанию принудительно закроет другие автоматические всплывающие окна, за исключением всплывающих окон-предков. Его можно закрыть с помощью кнопки Light-Dismiss или кнопки закрытия.

С другой стороны, установка popover=manual создает другой тип всплывающего окна: всплывающее окно вручную. Они не закрывают принудительно элементы других типов и не закрываются с помощью отключения света. Вы должны закрыть их с помощью таймера или явного действия закрытия. Типы всплывающих окон, подходящие для popover=manual — это элементы, которые появляются и исчезают, но не должны влиять на остальную часть страницы, например всплывающее уведомление.

Если вы изучите приведенную выше демонстрацию, вы увидите, что щелчок за пределами области всплывающего окна не приводит к его закрытию. Кроме того, если бы были открыты другие всплывающие окна, они бы не закрылись.

Чтобы просмотреть различия:

Поповеры с popover=auto :

• При открытии принудительно закройте другие всплывающие окна.
• Могу свет-уволить.

Поповеры с popover=manual :

• Не закрывайте принудительно элементы других типов.
• Не зажигайте-увольняйте. Закройте их, используя переключатель или действие закрытия.

Стилизация всплывающих окон

Итак, вы узнали об основных всплывающих окнах в HTML. Но есть также несколько приятных стилевых возможностей, которые есть в popover . Одним из них является возможность стилизовать ::backdrop .

В auto поповерах это слой непосредственно под верхним слоем (где находится поповер), который находится над остальной частью страницы. В следующем примере элементу ::backdrop присвоен полупрозрачный цвет:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

Разница между popover и dialog

Важно отметить, что атрибут popover сам по себе не обеспечивает семантику. И хотя теперь вы можете создавать модальные диалоговые возможности с помощью popover="auto" , между ними есть несколько ключевых отличий:

Элемент dialog , открытый с помощью dialog.showModal (модальный диалог), представляет собой интерфейс, требующий явного взаимодействия с пользователем для закрытия модального окна. popover поддерживает функцию Light-Dismiss. Модальный dialog этого не делает. Модальный диалог делает остальную часть страницы инертной . popover этого не делает.

Приведенная выше демонстрация представляет собой семантический диалог с всплывающим окном. Это означает, что остальная часть страницы не является инертной и что всплывающее диалоговое окно действительно пропускает свет. Вы можете создать это диалоговое окно с поведением всплывающего окна, используя следующий код:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Вскоре

Интерактивный вход и выход

Возможность анимировать отдельные свойства, включая анимацию display: none и анимацию верхнего слоя и обратно, пока недоступна в браузерах. Однако они запланированы для следующей версии Chromium, которая появится сразу после этого выпуска.

Благодаря возможности анимировать отдельные свойства и использованию :popover-open и @starting-style вы сможете настраивать стили до и после изменения, чтобы обеспечить плавные переходы при открытии и закрытии всплывающих окон. Возьмите предыдущий пример. Анимация появления и исчезновения выглядит намного плавнее и обеспечивает более плавный пользовательский интерфейс:

Расположение якоря

Поповеры хороши, когда вы хотите разместить предупреждение, модальное окно или уведомление в зависимости от области просмотра. Но всплывающие окна также полезны для меню, всплывающих подсказок и других элементов, которые необходимо расположить относительно других элементов. Здесь на помощь приходит привязка CSS.

В следующей демонстрации радиального меню используется API-интерфейс popover вместе с позиционированием привязки CSS , чтобы гарантировать, что #menu-items всплывающего окна всегда привязаны к триггеру переключения — кнопке #menu-toggle .

Настройка якорей аналогична настройке поповеров:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

Вы устанавливаете привязку, присваивая ей id (в этом примере #menu-toggle ), а затем используете anchor="menu-toggle" для соединения двух элементов. Теперь вы можете использовать anchor() для стилизации всплывающего окна. Центральное всплывающее меню, привязанное к базовой линии переключателя привязки, может быть оформлено следующим образом:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Теперь у вас есть полнофункциональное всплывающее меню, привязанное к кнопке переключения и имеющее все встроенные функции всплывающего окна, JavaScript не требуется!

Заключение

API popover — это первый шаг в серии новых возможностей, которые по умолчанию упрощают создание веб-приложений и делают их более доступными. Мне очень интересно видеть, как вы используете поповеры!

Дополнительное чтение

• Диалоги и всплывающие окна кажутся похожими. Чем они отличаются?
• Семантика и атрибут popover
• Документация MDN по поповеру
• Объяснение всплывающего окна OpenUI