Popover API trafia do Baseline

Una Kravets

Zaczęło się! Jedna z funkcji, które najbardziej mnie ekscytują, została właśnie wprowadzona we wszystkich nowoczesnych przeglądarkach i oficjalnie jest częścią wersji podstawowej 2024. Ta funkcja to interfejs Popup API. Popover udostępnia wiele świetnych prymitywów i funkcji dla programistów, które ułatwiają tworzenie interfejsów warstwowych, takich jak etykiety, menu, interfejsy edukacyjne itp.

Obsługa przeglądarek

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

Źródło

Oto kilka najważniejszych funkcji wyskakujących okienek:

  • Promocja do warstwy najwyższej. Pop-upy będą się pojawiać w górnej warstwie nad resztą strony, więc nie musisz bawić się z-index.
  • Funkcja szybkiego zamykania Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie fokusu.
  • 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 lub dwukrotne kliknięcie spowoduje zamknięcie wyskakującego okienka i przywrócenie fokusu.
  • Dostępne powiązania komponentów. Element popover połączony z aktywatorem popover semantycznie.

Tworzenie wyskakujących okienek

Tworzenie wyskakujących okienek jest dość proste. Aby użyć wartości domyślnych, wystarczy użyć elementu button do wywołania wyskakującego okienka i elementu do wywołania.

  • Najpierw ustaw atrybut popover elementu, który ma być wyskakującym oknem.
  • Następnie dodaj unikalny parametr id do elementu wyskakującego okienka.
  • Aby połączyć przycisk z wyskakującym oknem, ustaw wartość właściwości popovertarget przycisku na wartość właściwości id elementu wyskakującego okna.

Przykładowy kod:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Przykład podstawowego użycia atrybutu pop-up.

Aby mieć większą kontrolę nad wyskakującymi okienkami, możesz wyraźnie określić ich typy. Na przykład użycie samego atrybutu popover bez wartości jest równoznaczne z użyciem atrybutu popover="auto". Wartość auto umożliwia szybkie zamknięcie i automatyczne zamykanie innych wyskakujących okienek. Użyj popover="manual" i dodaj przycisk zamykania. Ręczne wyskakujące okienka nie zamykają innych wyskakujących okienek ani nie pozwalają użytkownikom zamknąć okienka przez kliknięcie w interfejsie. Ręczne wyskakujące okienko możesz utworzyć, korzystając z tych elementów:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
Przykład ręcznego wyskakującego okienka.

Wyskakujące okienko a okno modalne

Możesz się zastanawiać, czy potrzebujesz wyskakującego okienka, gdy masz okno dialogowe. Odpowiedź brzmi: niekoniecznie.

Pamiętaj, że atrybut popover nie zapewnia semantyki samodzielnie. Chociaż możesz teraz tworzyć modalne dialogi za pomocą wyskakujących okienek, istnieją między nimi pewne kluczowe różnice:

Element modalny <dialog>

  • Otwarto: dialog.showModal().
  • Zamknięte przez dialog.close().
  • Pozostała część strony jest nieaktywna.
  • Nie obsługuje zamykania światła.
  • Stylowanie stanu otwartego możesz wykonać za pomocą atrybutu [open].
  • Semantycznie reprezentuje interaktywny komponent, który blokuje interakcję z resztą strony.

Atrybut [popover]

  • Możliwość otwarcia za pomocą deklaratywnego wywoływacza (popovertarget).
  • Zamknięto popovertarget (wyskakujące okienko automatyczne) lub popovertargetaction=hide (wyskakujące okienko ręczne).
  • Nie powoduje, że reszta strony jest nieaktywna.
  • Obsługuje zachowanie polegające na cichym zamykaniu.
  • Styl otwartego stanu możesz zdefiniować za pomocą pseudoklasy :popover-open.
  • Brak semantyki.

Wnioski i informacje dodatkowe

popover wprowadza na platformę wiele ciekawych funkcji. Aby dowiedzieć się więcej o tym interfejsie API, w tym o dostępności tej funkcji i dokumentacji dotyczącej zestawu funkcji, przeczytaj te artykuły: