Popovery są wszędzie w sieci. Możesz je zobaczyć w menu, na przełącznikach i w oknach używanych w funkcjach takich jak ustawienia konta, widżety powiadomień i podgląd kart produktów. Pomimo tego, że są one tak powszechne, tworzenie ich w przeglądarkach jest nadal zaskakująco niewygodne. Aby rozwiązać ten problem, wkrótce wprowadzimy do przeglądarek nowy zestaw deklaratywnych interfejsów API HTML do tworzenia wyskakujących okienek. Pierwszymi z nich będzie Popover API.
Wyskakujące okienko jest częścią kampanii Baseline Newly available.
Wyskakujące okienko jest często mylone z oknem. Istnieją jednak pewne zasadnicze różnice w ich zachowaniu. Element dialog
otwarty za pomocą dialog.showModal
(okno modalne) to doświadczenie, które wymaga wyraźnej interakcji użytkownika w celu zamknięcia okna. popover
obsługuje wyłączanie światła. Element modalny dialog
tego nie robi.
Okno modalne sprawia, że reszta strony jest bezwładna. popover
tego nie robi.
Więcej informacji o różnicach
Ten artykuł jest częścią serii, która opisuje, jak firmy e-commerce ulepszyły swoje witryny za pomocą nowych funkcji CSS i interfejsu. Z tego artykułu dowiesz się, jak Tokopedia wdrożyła i wykorzystała interfejs Popover API.
Tokopedia
Zastosowanie atrybutów wyskakującego okienka zredukowało do 70% wierszy kodu w React. Elementem modalnym można sterować natywnie przez kod HTML, zamiast wymagać obsługi zdarzeń w języku JavaScript oraz używać elementu
React.createPortal
do przenoszenia modalnego DOM na koniec elementudocument.body
. Możemy też użyć narzędzia@starting-style
do animacji otwarcia i zamknięcia wyskakującego okienka. – Andy Wihalim, starszy inżynier oprogramowania w Tokopedii.
Strony z informacjami o produkcie firmy Tokopedia zawierają wiele zdjęć każdego produktu. Po kliknięciu miniatury produktu otwiera się okno z powiększonym obrazem. To wzorzec często używany w witrynach e-commerce.
Kod
Tokopedia używa React do programowania frontendu. Przed wdrożeniem interfejsu Popover API w tym widoku użyliśmy okna DOM i przycisku. Ten przycisk zmienił stan reakcji, aby otworzyć okno modalne. Za pomocą interfejsu API popover określają atrybut popovertarget
w elemencie, który otwiera wyskakujące okienko z wartością taką samą jak identyfikator elementu popover.
Przy takiej implementacji wyskakujące okienko działa, ale pojawia się i znika bez animacji. Aby utworzyć płynną animację wejścia i wyjścia dla wyskakującego okienka, użyj elementów :popover-open
i @starting-style
oraz zezwól na animację właściwości dyskretnych.
W poniższym przykładowym kodzie wyskakujące okienko skaluje się do wewnątrz i w górę za pomocą właściwości transform: 'scale()'
.
Ten przykładowy kod pokazuje, jak wdrożyć animacje wejścia i wyjścia dla interfejsu API popover.
<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',
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
transform: 'scale(0.8)',
opacity: 0,
'&:popover-open': {
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
transform: 'scale(1)',
opacity: 1,
},
});
Aby zaspokoić potrzeby przeglądarek, które nie obsługują interfejsu API popover, firma Tokopedia wdrożyła popover-polyfill przez firmę oddbird, który ma rozmiar 3,2 KB po zastosowaniu kompresji gzip. Byli zadowoleni z polyfill, ponieważ sprawdzał się i nie spowodował pogorszenia wydajności. Ogólnie udało się im ograniczyć do 70% wierszy kodu w React za pomocą wyskakującego interfejsu API.
Co wziąć pod uwagę podczas korzystania z interfejsu Popover API
Zespół Tokopedii wykorzystał React, a zespół przeprowadził podział kodu przez odłączenie komponentu popover ze stron, które go nie używają, a następnie podział kodu dla treści popover. W ten sposób zmniejszyły się rozmiary początkowego żądania.
Rozważ połączenie wyskakujących okienek z pozycjonowaniem zakotwiczonych CSS (już wkrótce dostępne w Chrome), aby umieścić je względem innych elementów. Jest to przydatne np. w przypadku menu i etykiet.
Zasoby
- Przedstawiamy interfejs Popover API
- Czym różni się wyskakujące okienko od okna
- Czy chcesz zgłosić błąd czy poprosić o dodanie nowej funkcji? Chętnie poznamy Twoją opinię.
Zapoznaj się z innymi artykułami z tej serii, które przedstawiają korzyści dla firm z branży e-commerce dzięki zastosowaniu nowych funkcji CSS i interfejsu, takich jak animacje przewijane, wyskakujące okienka, zapytania o kontenery i selektor has()
.