Эта страница переведена с помощью Cloud Translation API.

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

Una Kravets

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

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

Browser Support

Source

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

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

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

Атрибут popover для элемента, содержащего всплывающее окно.
id элемента, содержащего всплывающее окно.
Атрибут popovertarget для <button> (или типа кнопки, например <input type="button" /> ). Атрибут имеет значение, соответствующее 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>

Примечание. Группа сообщества WhatWG и OpenUI в настоящее время обсуждает возможность открытия диалогового элемента с помощью эргономики HTML. Это будет похоже на всплывающее окно, но сохранит перечисленные ранее функции диалога, например, сделает остальную часть страницы инертной. Следите за этими группами, чтобы узнать о будущем popover , dialog и новых элементов, таких как selectmenu .

Вскоре

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

Возможность анимировать отдельные свойства, включая анимацию 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 не требуется!

Примечание. Есть еще более интересные новые возможности привязки CSS, такие как операторы @try , позволяющие менять положение меню в зависимости от доступного пространства в области просмотра. Эта реализация случайна. Изучите приведенную выше демонстрацию Codepen с включенным в Chrome Canary флагом #experimental-web-platform-features, чтобы узнать больше.

Заключение

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

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

Una Kravets

Browser Support

Source

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

Атрибут popover для элемента, содержащего всплывающее окно.
id элемента, содержащего всплывающее окно.
Атрибут popovertarget для <button> (или типа кнопки, например <input type="button" /> ). Атрибут имеет значение, соответствующее id элемента, содержащего всплывающее окно, открываемое этой кнопкой.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

Вскоре

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

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

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

<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>

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

Заключение

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

Una Kravets

Browser Support

Source

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

Атрибут popover для элемента, содержащего всплывающее окно.
id элемента, содержащего всплывающее окно.
Атрибут popovertarget для <button> (или типа кнопки, например <input type="button" /> ). Атрибут имеет значение, соответствующее id элемента, содержащего всплывающее окно, открываемое этой кнопкой.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

Вскоре

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

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

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

<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>

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

Заключение

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

Una Kravets

Browser Support

Source

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

Атрибут popover для элемента, содержащего всплывающее окно.
id элемента, содержащего всплывающее окно.
Атрибут popovertarget для <button> (или типа кнопки, например <input type="button" /> ). Атрибут имеет значение, соответствующее id элемента, содержащего всплывающее окно, открываемое этой кнопкой.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

Вскоре

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

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

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

<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>

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

Представляем API поповера Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Атрибут popover

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

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

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

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

Вскоре

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

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

Заключение

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

Атрибут popover

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

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

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

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

Вскоре

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

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

Заключение

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

Атрибут popover

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

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

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

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

Вскоре

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

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

Заключение

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

Атрибут popover

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

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

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

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

Вскоре

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

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

Заключение

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

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

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

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

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

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