Эта статья — перевод оригинальной статьи "Introducing the popover API". Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов. Всплывающие окна встречаются в вебе повсеместно. Вы можете увидеть их в меню, переключателях и диалоговых окнах, которые могут проявляться в виде настроек учетной записи, виджетов раскрытия информации и предварительных просмотров карточек товаров. Несмотря на распространенность этих компонентов, их создание в браузерах все еще остается на удивление громоздким. Вам нужно добавить скрипты для управления фокусом, состояниями открытия и закрытия, доступные хуки для компонентов, привязки к клавиатуре для входа и выхода из опыта, и это все еще до того, как вы начнете создавать полезную, уникальную, основную функциональность вашего всплывающего окна. Чтобы решить эту проблему, в браузеры приходит новый набор декларативных HTML API для создания всплывающих окон, начиная с popover API в Chromium 114. Вместо того чтобы самостоятельно управлять всеми этими сложностями, вы можете позволить браузеру справиться с ними с помощью атрибута popover и последующего набора функций. Возможности HTML popover: Продвижение на верхний слой. Всплывающие окна будут отображаться на отдельном слое над остальной частью страницы, поэтому вам не придется возиться с z-индексом. Функция закрытия по клику вне контента. При нажатии за пределами области всплывающего окна всплывающее окно закрывается и возвращается фокус. Управление фокусом по умолчанию. При открытии всплывающего окна происходит переключение фокуса на контент внутри всплывающего окна. Доступные клавиатурные привязки. Нажатие клавиши esc закрывает всплывающее окно и возвращает фокус. Доступные привязки компонентов. Семантическое соединение элемента всплывающего окна с триггером всплывающего окна. Теперь вы можете создавать всплывающие окна со всеми этими функциями без использования JavaScript. Для создания базового всплывающего окна необходимы три вещи: Атрибут popover на элементе, содержащем всплывающее окно. id на элементе, содержащее всплывающее окно. popovertarget со значением id всплывающего окна на элементе, который открывает всплывающее окно. Теперь у вас есть полностью функциональный базовый popover. CodePen Это всплывающее окно можно использовать для показа дополнительной информации или в качестве виджета. По умолчанию, как в предыдущем фрагменте кода, настройка всплывающего окна с помощью popovertarget означает, что кнопка или элемент, который открывает всплывающее окно, будет переключать его на открытое и закрытое состояния. Однако вы ещё можете создавать явные всплывающие окна с помощью popovertargetaction. Это отменяет действие переключения по умолчанию. Опции popovertargetaction включают: popovertargetaction="show": Показывает всплывающее окно. popovertargetaction="hide": Скрывает всплывающее окно. Используя popovertargetaction="hide", вы можете создать кнопку "закрыть" внутри всплывающего окна, как в следующем фрагменте: CodePen Использование атрибута popover само по себе является сокращением для popover="auto". При открытии popover по умолчанию принудительно закрывает другие автоматические popover, за исключением popover-предков. Его можно закрыть с помощью клика вне его контента или кнопки закрытия. С другой стороны, установка popover=manual создает другой тип всплывающего окна: ручное всплывающее окно. Они не принудительно закрывают элементы другого типа и не закрываются с помощью клика вне его контента. Вы должны закрыть их с помощью таймера или явного действия закрытия. Типы всплывающих окон, подходящие для popover=manual, - это элементы, которые появляются и исчезают, но не должны влиять на остальную часть страницы, например, уведомление. CodePen Если вы изучите демонстрационный пример выше, то увидите, что щелчок за пределами области всплывающего окна не приводит к отключению подсветки всплывающего окна. Кроме того, если были открыты другие всплывающие окна, они не закрываются. Чтобы рассмотреть различия: Всплывающие окна с popover=auto: При открытии принудительно закрывает другие всплывающие окна. Можно закрыть по клику вне контента. Всплывающие окна с popover=manual: Не закрывайте принудительно элементы любого другого типа. Не закрываются по клику вне контента. Их нужно закрывать используя таймер или явное действие закрытия. До этого вы узнали о базовых всплывающих окнах в HTML. Но есть также несколько приятных возможностей стилизации, которые поставляются с popover. Одна из них - возможность стилизовать ::backdrop. В автоматических всплывающих окнах это слой, расположенный непосредственно под верхним слоем (на котором расположено всплывающее окно), который находится над остальной частью страницы. В следующем примере ::backdrop имеет полупрозрачный цвет: CodePen По умолчанию всплывающие окна имеют border в 2px и располагаются в центре интерфейса, но они полностью настраиваются! Вы можете изменить стиль всплывающего окна, как и любого другого элемента HTML: изменить его размер, фон, положение на странице и так далее. Важно отметить, что атрибут popover не обеспечивает семантику сам по себе. И хотя теперь вы можете создавать модальные диалоговые окна, используя popover="auto", между ними есть несколько ключевых различий: Элемент dialog, открытый с помощью dialog.showModal, представляет собой опыт, который требует явного взаимодействия с пользователем для закрытия модалки. Popover поддерживает закрытие по клику вне контента. Элемент dialog - нет. Dialog делает остальную часть страницы неактивной, popover этого нет. CodePen Приведенная выше демонстрация представляет собой семантический dialog с поведением popover. Это означает, что остальная часть страницы является неактивной и что всплывающее диалоговое окно получает поведение закрытие по клику вне контента. Вы можете создать элемент dialog с поведением popover, используя следующий код: В настоящее время группа WhatWG и сообщество OpenUI обсуждают возможность открытия диалогового элемента с эргономикой HTML. Это было бы похоже на popover, но сохранило бы функции диалога, перечисленные ранее, например, делая остальную часть страницы неактивной. Следите за этими группами, чтобы узнать о будущем popover, dialog и новых элементов, таких как selectmenu. Возможность анимировать свойства, включая анимирование display: none и анимирование верхнего слоя, пока недоступна в браузерах. Однако они запланированы в ближайшей версии Chromium, которая выйдет сразу после этого релиза. С возможностью анимировать свойства, а также используя :popover-open и @starting-style, вы сможете установить стили до и после изменения, чтобы обеспечить плавные переходы при открытии и закрытии всплывающих окон. Возьмем предыдущий пример. Анимация при открытии и закрытии выглядит намного плавнее: CodePen Реализация этой функции в настоящее время находится в процессе разработки, но перейдите к демонстрации codepen для получения последней версии синтаксиса и опробуйте ее с включенным флагом #experimental-web-platform-features в Chrome Canary. Всплывающие окна отлично подходят для размещения оповещения, модального окна или уведомления в зависимости от области просмотра. Но всплывающие окна также полезны для меню, всплывающих подсказок и других элементов, которые необходимо позиционировать относительно других элементов. Здесь на помощь приходит CSS anchoring. В следующем демонстрационном примере меню используется popover API вместе с CSS anchor positioning для того, чтобы всплывающее меню #menu-items всегда было привязано к своему триггеру переключения - кнопке #menu-toggle. Настройка якорей аналогична настройке всплывающих окон: Вы устанавливаете якорь, присваивая ему id (в данном примере #menu-toggle), а затем используете anchor="menu-toggle" для соединения двух элементов. Теперь вы можете использовать anchor() для стилизации всплывающего меню. Центрированное всплывающее меню может быть оформлено следующим образом: CodePen Теперь у вас есть полнофункциональное всплывающее меню, которое привязано к кнопке переключения и обладает всеми встроенными функциями всплывающего меню, без необходимости использования JavaScript! Есть еще более захватывающие новые возможности привязки CSS, такие как выражение @try для изменения положения меню в зависимости от доступного пространства области просмотра. Эта реализация зависит от случая. Изучите демонстрацию Codepen выше с включенным флагом #experimental-web-platform-features в Chrome Canary, чтобы узнать больше. Popover API - это первый шаг в серии новых возможностей, призванных облегчить управление созданием веб-приложений и сделать их более доступными по умолчанию. Мне не терпится увидеть, как вы будете использовать всплывающие окна!