Przedstawiamy interfejs API popover

Una Kravets

Pop-upy są wszędzie w internecie. Możesz je zobaczyć w menu, podpowiedziach i oknach dialogowych, które mogą mieć postać ustawień konta, widżetów informacji dodatkowych i podglądów kart produktów. Pomimo powszechności tych komponentów ich tworzenie w przeglądarkach jest nadal zaskakująco kłopotliwe. Musisz dodać skrypty do zarządzania fokusem, stanami otwarcia i zamknięcia, dostępne elementy w komponentach oraz przypisania klawiszy do otwierania i zamykania. Wszystko to musisz zrobić jeszcze przed rozpoczęciem tworzenia przydatnej, unikalnej i podstawowej funkcji wyskakującego okienka.

Aby rozwiązać ten problem, wprowadziliśmy w przeglądarkach nowy zestaw deklaratywnych interfejsów API HTML do tworzenia wyskakujących okienek, zaczynając od interfejsu popover w wersji Chromium 114.

Atrybut popover

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

Zamiast samodzielnie zarządzać wszystkimi złożonymi funkcjami, możesz pozwolić przeglądarce zająć się tym za Ciebie za pomocą atrybutu popover i kolejnych funkcji. Obsługa wyskakujących okienek HTML:

  • Promocja do warstwy najwyższej. Pop-upy będą wyświetlane na oddzielnej warstwie nad resztą strony, więc nie musisz się przejmować kolejnością nakładania elementów.
  • Funkcja odrzucenia bez ostrzeżenia. Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie zaznaczenia.
  • Domyślne zarządzanie punktem ostrości. Po otwarciu wyskakującego okienka następny przystanek będzie znajdować się w wyskakującym okienku.
  • Dostęp do skrótów klawiszowych. Naciśnięcie klawisza esc spowoduje zamknięcie wyskakującego okienka i przywrócenie zaznaczenia.
  • Dostępne powiązania komponentów Semantyczne łączenie elementu wyskakującego z aktywatorem wyskakującego okienka

Teraz możesz tworzyć wyskakujące okienka z tymi wszystkimi funkcjami bez użycia JavaScriptu. Podstawowy pop-up wymaga 3 elementów:

  • Atrybut popover elementu zawierającego wyskakujące okienko.
  • id w elemencie zawierającym wyskakujące okienko.
  • Atrybut popovertarget w elemencie <button> (lub typu przycisku, np. <input type="button" />). Atrybut ma wartość pasującą do atrybutu id w elemencie zawierającym wyskakujące okienko, które ma być otwierane przez ten przycisk.
<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ący komunikat.

Ten wyskakujący panel może służyć do przekazywania dodatkowych informacji lub jako widżet wyświetlający informacje.

Ustawienia domyślne i zastępcze

Domyślnie, tak jak w poprzednim fragmencie kodu, skonfigurowanie wyskakującego okienka za pomocą atrybutu popovertarget oznacza, że przycisk otwierający wyskakujące okienko będzie je otwierał i zamykał. Możesz też utworzyć okna wyskakujące za pomocą elementu popovertargetaction. Zastąpi to domyślne działanie przełączania. 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 kodu:

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

Automatyczne i ręczne wyskakujące okienka

Użycie samego atrybutu popover jest w istocie skrótem dla atrybutu popover="auto". Po otwarciu domyślne popover spowoduje przymusowe zamknięcie innych automatycznych wyskakujących okienek, z wyjątkiem okienek otwierających się z poziomu okna nadrzędnego. Można je zamknąć za pomocą przycisku zamknięcia lub przycisku zamknięcia w ramce.

Z kolei ustawienie popover=manual tworzy inny typ wyskakującego okienka: ręczne. Nie powodują przymusowego zamknięcia żadnego innego typu elementu i nie można ich zamknąć za pomocą gestu odrzucenia. Musisz je zamknąć za pomocą minutnika lub wyraźnego działania. Typy wyskakujących okienek odpowiednich dla popover=manual to elementy, które pojawiają się i znikają, ale nie powinny wpływać na pozostałą część strony, np. powiadomienie w pasku.

Jeśli obejrzysz powyższy pokaz, zauważysz, że kliknięcie poza obszarem wyskakującego okienka nie powoduje jego zamknięcia. Dodatkowo, jeśli były otwarte inne wyskakujące okienka, nie byłyby one zamykane.

Aby sprawdzić różnice:

Wyskakujące okienka z popover=auto:

  • Po otwarciu zmusić do zamknięcia innych wyskakujących okienek.
  • Można zamknąć.

Wyskakujące okienka z popover=manual:

  • Nie zamykaj na siłę żadnych innych typów elementów.
  • Nie zamykaj okna. Zamknij je za pomocą przełącznika lub akcji zamknięcia.

Stylowanie wyskakujących okienek

Do tej pory omawialiśmy podstawowe okienka w HTML. Ale popover ma też kilka ciekawych funkcji stylizacji. Jedną z nich jest możliwość stylizowania ::backdrop.

W przypadku auto jest to warstwa bezpośrednio pod najwyższą warstwą (w której znajduje się wyskakujące okienko) i znajdująca się nad resztą strony. W tym przykładzie element ::backdrop ma kolor półprzezroczysty:

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

Różnica między popover a dialog

Pamiętaj, że atrybut popover sam w sobie nie zapewnia semantyki. Chociaż za pomocą popover="auto" możesz teraz tworzyć modalne dialogi, istnieją między nimi pewne kluczowe różnice:

Element dialog otwierany za pomocą dialog.showModal (okno modalne) wymaga wyraźnej interakcji użytkownika, aby zamknąć okno. popover obsługuje funkcję light-dismiss. Okno modalne dialog nie jest wyświetlane. Okno modalne powoduje, że reszta strony staje się nieaktywna. popover tego nie robi.

Powyższe demo to dialog semantyczny z pop-upem. Oznacza to, że reszta strony nie jest nieaktywna i wyskakujące okienko zachowuje się jak zwykłe okienko. Aby utworzyć to okno z wyskakującym elementem, użyj 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

Interakcyjne wejście i wyjście

W przeglądarkach nie można jeszcze animować właściwości dyskretnych, w tym display: none i animacji do i z najwyższej warstwy. Są one jednak zaplanowane w przyszłej wersji Chromium, która zostanie opublikowana wkrótce po tej aktualizacji.

Dzięki możliwości animowania właściwości dyskretnych i użyciu właściwości :popover-open i @starting-style możesz skonfigurować style przed i po zmianie, aby umożliwić płynne przejścia podczas otwierania i zamykania wyskakujących okienek. Weźmy poprzedni przykład. Animacja wstawiania i wyjmowania powoduje płynniejsze działanie aplikacji i daje lepsze wrażenia użytkownikowi:

Umieszczenie kotwicy

Pop-upy są przydatne, gdy chcesz umieścić alert, okno modalne lub powiadomienie w ramach widoku. Pop-upy są też przydatne w przypadku menu, etykiet narzędzia i innych elementów, które trzeba umieścić względem innych elementów. Właśnie w tym przypadku przydaje się osadzanie w CSS.

W tym demonstracyjnym menu radialnym interfejs API popovera jest używany razem z pozycjonowaniem kotwicy CSS, aby zapewnić, że #menu-items będzie zawsze przypięta do swojego przełącznika, czyli przycisku #menu-toggle.

Konfigurowanie kotwic jest podobne 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ę, nadaj jej id (w tym przykładzie #menu-toggle), a następnie użyj anchor="menu-toggle", aby połączyć te 2 elementy. Teraz możesz użyć anchor() do nadania stylu wyskakującemu menu. Wyśrodkowane menu wyskakujące zakotwiczone na linii bazowej 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 menu wyskakujące, które jest zakotwiczone do przycisku przełącznika i zawiera wszystkie wbudowane funkcje menu wyskakującego. Nie wymaga to JavaScriptu.

Podsumowanie

Interfejs popover API to pierwszy krok w drodze do wprowadzenia serii nowych funkcji, które ułatwią tworzenie aplikacji internetowych i zwiększą ich dostępność. Cieszę się, że używasz wyskakujących okienek.

Dodatkowe materiały