Popover API trafia do Baseline

Una Kravets

Zaczęło się! Jedna z funkcji, o którą jestem najbardziej podekscytowana, pojawiła się właśnie we wszystkich nowoczesnych przeglądarkach i jest oficjalnie częścią programu Baseline 2024. Tą funkcją jest Popover API. Popover oferuje mnóstwo świetnych podstawowych elementów i możliwości programistycznych do tworzenia warstwowych interfejsów, takich jak podpowiedzi, menu, interfejsy nauczania i inne.

Obsługa przeglądarek

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

Źródło

Oto kilka najważniejszych zalet funkcji wyskakujących okienek:

  • Awans do najwyższej warstwy. Popowerki pojawią się w górnej warstwie nad pozostałą częścią strony, więc nie musisz zmieniać się z z-index.
  • Funkcja lekkiego zamknięcia. Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie zaznaczenia.
  • Domyślne zarządzanie ostrością. Otwarcie wyskakującego okienka powoduje, że następna karta zostaje zatrzymana.
  • Dostępne powiązania klawiszy. Naciśnięcie klawisza esc lub podwójne przełączenie powoduje zamknięcie wyskakującego okienka i powrót fokusu.
  • Dostępne powiązania komponentów. Łączenie elementu wyskakującego z wywołaniem okienka w sposób semantyczny.

Tworzenie wyskakujących okienek

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

  • Najpierw ustaw atrybut popover do elementu, który będzie wyskakującym okienkiem.
  • Następnie dodaj unikalny id do elementu w wyskakującym okienku.
  • Na koniec, aby połączyć przycisk z wyskakującym okienkiem, ustaw popovertarget przycisku na wartość id elementu wyskakującego.

Widać to w tym kodzie:

<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>
. .
Podstawowy przykład użycia atrybutu wyskakującego okienka.

Aby uzyskać bardziej szczegółową kontrolę nad wyskakującymi okienkami, możesz określić ich typy. Na przykład użycie bez wartości atrybutu popover jest takie samo jak w atrybucie popover="auto". Wartość auto umożliwia błyskawiczne zamknięcie i automatycznie zamyka inne wyskakujące okienka. Jeśli użyjesz funkcji popover="manual", musisz dodać przycisk zamykania. Wyskakujące okienka utworzone ręcznie nie będą zamykać innych wyskakujących okienek ani umożliwiać użytkownikom ich zamknięcia przez kliknięcie w interfejsie. Wyskakujące okienko ręczne tworzysz w ten sposób:

<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.
.

Okno zastępcze i okno modalne

Być może zastanawiasz się, czy potrzebujesz wyskakującego okienka, gdy takie okno istnieje, a odpowiedź brzmi: być może tak nie jest.

Pamiętaj, że atrybut popover nie zapewnia semantyki. Chociaż za pomocą wyskakujących okienek możesz teraz tworzyć środowisko modalne podobne do okien, jest między nimi kilka kluczowych różnic:

Element modalny <dialog>.

  • Otwarto za pomocą: dialog.showModal().
  • Zamknięte przez: dialog.close().
  • Sprawia, że reszta strony jest bezwładna.
  • Nie obsługuje ignorowania świetlnego ekranu.
  • Styl stanu otwartego możesz zmienić za pomocą atrybutu [open].
  • Semantycznie reprezentuje komponent interaktywny, który blokuje interakcję z pozostałą częścią strony.

Atrybut [popover]

  • Można otworzyć za pomocą deklaratywnego wywołującego (popovertarget).
  • Zamknięte za pomocą popovertarget (automatyczne okienko) lub popovertargetaction=hide (wyskakujące okienko ręczne).
  • Nie powoduje, że reszta strony jest bezwładna.
  • Umożliwia proste zamknięcie.
  • Styl stanu otwartego możesz zmienić za pomocą pseudoklasy :popover-open.
  • Brak charakterystycznej semantyki.

Wnioski i dalsze informacje

Platforma popover udostępnia wiele ciekawych funkcji. Aby dowiedzieć się więcej o tym interfejsie API, w tym o ułatwieniach dostępu do tej funkcji i dokumentacji dotyczącej zestawu funkcji, zapoznaj się z tymi materiałami: