Всплывающие окна повсюду в Интернете. Вы можете увидеть их в меню, подсказках и диалогах, используемых для таких функций, как настройки учетной записи, виджеты раскрытия информации и предварительные просмотры карточек продуктов. Несмотря на то, насколько распространены эти компоненты, их создание в браузерах по-прежнему удивительно обременительно. Чтобы решить эту проблему, в браузерах появляется новый набор декларативных API HTML для создания всплывающих окон, первым из которых является API Popover .
Popover является частью Baseline Newly Available .
Всплывающее окно часто путают с диалоговым окном. Однако в их поведении есть некоторые ключевые различия. Элемент dialog , открытый с помощью dialog.showModal (модальное диалоговое окно), — это опыт, требующий явного взаимодействия с пользователем для закрытия модального окна. popover поддерживает функцию light-dismiss. Модальное dialog — нет. Модальное диалоговое окно делает остальную часть страницы инертной. popover — нет. Подробнее о различиях читайте .
Эта статья является частью серии , в которой обсуждается, как компании электронной коммерции улучшили свой веб-сайт с помощью новых функций CSS и UI. В этой статье вы узнаете, как Tokopedia реализовала и извлекла выгоду из API Popover.
Токопедия
Использование атрибутов popover сократило до 70% строк кода в React. Модальное окно может управляться HTML, а не требовать обработки событий в JavaScript и использовать
React.createPortalдля перемещения модального DOM в конецdocument.body. Мы также можем использовать@starting-styleдля анимации открытия и закрытия popover. — Энди Вихалим , старший инженер-программист, Tokopedia .
Страницы описания продукта Tokopedia (PDP) содержат несколько изображений для каждого продукта. При щелчке по миниатюре продукта открывается модальное окно, показывающее увеличенное изображение. Это распространенный шаблон, используемый на веб-сайтах электронной коммерции.
Код
Tokopedia использует React для разработки фронтенда. Перед реализацией API popover для этого модального окна они использовали модальное окно DOM и кнопку. Кнопка изменяла состояние React для открытия модального окна. С API popover они указывают атрибут popovertarget в элементе, который открывает popover со значением, совпадающим с идентификатором элемента popover.
При такой базовой реализации поповер работает, но появляется и исчезает без анимации. Чтобы создать плавную анимацию входа и выхода для поповера, используйте :popover-open и @starting-style и разрешите анимацию дискретных свойств. В следующем примере кода поповер масштабируется с помощью свойства transform: 'scale()' .
В этом примере кода показано, как реализовать анимацию входа и выхода для API всплывающего окна.
<Thumbnail popovertarget="medialightbox" /> <MediaLightbox popover id="medialightbox" /> export const cssModalWrapper = css({ background: NN0, border: 'none', borderRadius: '.625rem', width: 1024, padding: 24, '&::backdrop': { opacity: 0, transitionProperty: 'opacity, display', transition: '.25s ease-out', transitionBehavior: 'allow-discrete', }, transitionProperty: 'transform, opacity, display', transition: '.25s ease-out', transitionBehavior: 'allow-discrete', transform: 'scale(0.8)', opacity: 0, '@starting-style': { transform: 'scale(1)', opacity: 1, }, '&:popover-open': { transform: 'scale(1)', opacity: 1, '@starting-style': { transform: 'scale(0.8)', opacity: 0, }, }, }); Чтобы удовлетворить запросы браузеров, не поддерживающих API popover, Tokopedia реализовала popover-polyfill от oddbird, который занимает всего 3,2 КБ с сжатием gzip. Они остались довольны полифиллом, поскольку он хорошо работал и не вызывал снижения производительности. В целом, им удалось сократить до 70% строк кода в React с API popover.
Что следует учитывать при использовании API Popover
Tokopedia использует React, и команда добилась разделения кода, демонтировав компонент popover для страниц, которые его не используют, а затем выполнив разделение кода для содержимого popover. Таким образом, они уменьшили размер своего первоначального запроса.
Рассмотрите возможность объединения всплывающих окон с позиционированием якорей CSS ( скоро в Chrome ), чтобы расположить их относительно других элементов. Это полезно, например, для меню и подсказок.
Ресурсы
- Представляем API всплывающих окон
- Разница между всплывающим окном и диалоговым окном
- Хотите сообщить об ошибке или запросить новую функцию? Мы хотим услышать от вас .
Ознакомьтесь с другими статьями этой серии, в которых рассказывается о том, как компании электронной коммерции получили выгоду от использования новых функций CSS и пользовательского интерфейса, таких как анимация с прокруткой, всплывающие окна, контейнерные запросы и селектор has() .