Popovery są wszędzie w sieci. Propozycje te pojawiają się w menu, w linkach i oknach dialogowych, które mogą się pojawić jako ustawienia konta, widżety z komunikatami i podglądy kart produktów. Chociaż są one tak powszechne, tworzenie ich w przeglądarkach w dalszym ciągu jest zaskakująco niewygodne. Musisz dodać skrypty, które pozwolą Ci zarządzać fokusem, stanami otwarcia i zamknięcia, łatwo dostępne punkty zaczepienia komponentów oraz powiązaniami klawiatury, aby rozpocząć lub wyjść z oglądania – wszystko to jeszcze przed utworzeniem przydatnej, niepowtarzalnej i podstawowej funkcji wyskakującego okienka.
Aby rozwiązać ten problem, udostępnimy w przeglądarkach nowy zestaw deklaratywnych interfejsów API HTML służących do tworzenia wyskakujących okienek, zaczynając od interfejsu popover API w Chromium 114.
Atrybut popover
Zamiast samodzielnie zarządzać złożonością, możesz pozwolić przeglądarce, aby zajmie się nią za pomocą atrybutu popover i kolejnego zestawu funkcji. Obsługa wyskakujących okienek HTML:
- Promocja na górną warstwę. Wyskakujące okienka pojawiają się w osobnej warstwie powyżej pozostałej części strony, więc nie musisz zmieniać kolejności nakładania elementów.
- Funkcja zamykania lampkami. Kliknięcie poza obszarem wyskakującego okienka spowoduje zamknięcie wyskakującego okienka i powrót do niego.
- Domyślne zarządzanie fokusem. Otwarcie wyskakującego okienka sprawia, że następna karta się w nim zatrzymuje.
- Ułatwienia dostępu w postaci wiązań klawiatury. Naciśnięcie klawisza
esczamyka wyskakujące okienko i zwraca zaznaczenie. - Powiązania ułatwień dostępu. Łączenie elementu wyskakującego okienka z wyzwalaniem wyskakującego okienka w sposób semantyczny.
Teraz możesz tworzyć wyskakujące okienka ze wszystkimi tymi funkcjami bez używania JavaScriptu. Wyskakujące okienko wymaga 3 czynników:
- Atrybut
popoverelementu zawierającego wyskakujące okienko. idw elemencie zawierającym okienko wyskakujące.- Element
popovertargetz wartościąidwyskakującego okienka w elemencie, który otwiera wyskakujące okienko.
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
Teraz masz w pełni funkcjonalny, podstawowy wyskakujące okienko.
Wyskakujące okienko może służyć do przekazywania dodatkowych informacji lub jako widżet powiadomienia o zbieraniu danych.
Domyślne i zastąpienia
Tak jak w poprzednim fragmencie kodu, domyślnie skonfigurowanie wyskakującego okienka z elementem popovertarget spowoduje, że przycisk lub element, który otwiera wyskakujące okienko, będzie go otwierać i zamykać. Możesz jednak utworzyć również wyskakujące okienka dla pełnoletnich za pomocą popovertargetaction. Zastępuje to domyślne działanie przełącznika. Dostępne opcje (popovertargetaction):
popovertargetaction="show": wyświetla wyskakujące okienko.
popovertargetaction="hide": ukrywa wyskakujące okienko.
Za pomocą popovertargetaction="hide" możesz utworzyć przycisk „zamknij” w wyskakującym okienku, jak w tym fragmencie:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
Automatyczne a ręczne wyskakujące okienko
Samodzielne użycie atrybutu popover jest w rzeczywistości skrótem do popover="auto". Po otwarciu domyślny popover wymusza zamknięcie innych automatycznych wyskakujących okienek, z wyjątkiem wyskakujących okienek nadrzędnych. Można go zamknąć za pomocą przycisku zamykania lub podświetlenia.
Z drugiej strony ustawienie popover=manual powoduje utworzenie innego rodzaju wyskakującego okienka: ręczne wyskakujące okienko. Nie wymuszają one zamknięcia żadnego innego typu elementu i nie zamykają się po zamknięciu lampy. Musisz je zamknąć za pomocą licznika czasu lub wyraźnego zamknięcia. Wyskakujące okienka odpowiednie dla elementu popover=manual to elementy, które pojawiają się i znikają, ale nie powinny wpływać na pozostałą część strony (np. nie powinny wyświetlać się w formie powiadomienia toastu).
Po zapoznaniu się z powyższym komentarzem widać, że kliknięcie poza obszarem wyskakującego okienka nie powoduje jego zamknięcia. Poza tym, jeśli będą otwarte inne wyskakujące okienko, nie zostaną one zamknięte.
Aby przejrzeć różnice:
Przerwy w podróży z: popover=auto:
- Po otwarciu wymuś zamknięcie innych wyskakujących okienek.
- Może znikać diodami.
Przerwy w podróży z: popover=manual:
- Nie wymuszaj zamknięcia elementów innego typu.
- Nie zamykaj. Zamknij je za pomocą przełącznika lub działania zamykającego.
Wyskakujące okienka w stylu
Omówiliśmy już podstawowe okienka wyskakujące w kodzie HTML. popover oferuje też jednak inne przydatne funkcje stylistyczne. Jedną z nich jest możliwość stylizacji elementu ::backdrop.
W przypadku wyskakujących okienek auto jest to warstwa znajdująca się bezpośrednio pod górną warstwą (w której znajduje się wyskakujące okienko), która znajduje się nad pozostałą częścią strony. W przykładzie poniżej ::backdrop ma półprzezroczysty kolor:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
Różnica między wartościami popover i dialog
Pamiętaj, że atrybut popover nie określa własnej semantyki. Chociaż możesz teraz tworzyć elementy modalne przypominające okna modalne za pomocą popover="auto", występuje między nimi kilka kluczowych różnic:
Element dialog otwarty za pomocą dialog.showModal (okno modalne) to doświadczenie, które wymaga wyraźnej interakcji użytkownika w celu jego zamknięcia.
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.
Powyższa prezentacja przedstawia semantyczne okno z funkcją wyskakującego okienka. Oznacza to, że reszta strony nie jest bezwładna, a wyskakujące okienko dialogowe znika. Możesz utworzyć to okno z opcją wyskakującego okienka, korzystając z tego kodu:
<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>
Wkrótce
Interaktywne otwieranie i zamykanie
W przeglądarkach nie można jeszcze animować właściwości dyskretnych, w tym animowanie do i z elementu display: none oraz animowanie do i z górnej warstwy. Są one jednak planowane w nadchodzącej wersji Chromium, tuż po tej aktualizacji.
Dzięki możliwości animowania właściwości dyskretnych i używaniu :popover-open i @starting-style możesz konfigurować style przed zmianą i po niej, aby umożliwić płynne przejścia podczas otwierania i zamykania wyskakujących okienek. Przeanalizujmy poprzedni przykład. Ich animowanie wygląda płynniej i zapewnia większą płynność działania:
Pozycjonowanie zakotwiczenia
Wyskakujące okienka są szczególnie przydatne, gdy chcesz umieścić alert, okno modalne lub powiadomienie na podstawie widocznego obszaru. Wyskakujące okienka są jednak przydatne również w przypadku menu, etykietek i innych elementów, które trzeba umieścić względem innych elementów. Właśnie tu do akcji wkracza kotwica CSS.
Poniższa prezentacja z menu promieniowym wykorzystuje interfejs API wyskakującego okienka w połączeniu z pozycjonowaniem kotwicy CSS, aby zapewnić, że wyskakujące okienko #menu-items jest zawsze zakotwiczone do przełącznika przełącznika – przycisku #menu-toggle.
Konfigurowanie reklam zakotwiczonych przebiega podobnie do konfigurowania wyskakujących okienek:
<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>
Aby skonfigurować kotwicę, przypisz jej element id (w tym przykładzie #menu-toggle), a potem użyj anchor="menu-toggle", by połączyć te elementy. Teraz możesz użyć anchor(), by dostosować styl wyskakującego okienka. Wyśrodkowane wyskakujące menu zakotwiczone w punkcie bazowym przełącznika kotwicy może mieć taki styl:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
Teraz masz w pełni funkcjonalne wyskakujące menu zakotwiczone do przycisku przełączania i zawierające wszystkie wbudowane funkcje wyskakującego okienka. Nie musisz używać JavaScriptu.
Podsumowanie
Interfejs API popover stanowi pierwszy krok z serii nowych funkcji ułatwiających tworzenie aplikacji internetowych i zapewnia ich domyślną dostępność. Nie mogę się doczekać, aż zobaczę, jak wykorzystujecie wyskakujące okienka.