Popover API trafia do Baseline

Una Kravets

Zaczęło się! Jedna z funkcji, która mnie najbardziej interesuje, została właśnie udostępniona we wszystkich nowoczesnych przeglądarkach i oficjalnie uwzględniona w programie Baseline w 2024 roku. Jest to Popover API. Popover oferuje wiele świetnych elementów podstawowych i programistycznych do tworzenia warstwowych interfejsów, takich jak etykietki, menu czy interfejsy nauczania.

Najważniejsze funkcje wyskakującego okienka to m.in.:

• Promocja na górną warstwę. Wyskakujące okienka pojawiają się w górnej warstwie nad pozostałymi obszarami strony, więc nie musisz już korzystać z z-index.
• 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 esc lub dwukrotne przełączenie spowoduje zamknięcie wyskakującego okienka i powrócenie zaznaczenia.
• Powiązania ułatwień dostępu. Łączenie elementu wyskakującego okienka z wyzwalaniem wyskakującego okienka w sposób semantyczny.

Tworzenie wyskakujących okienek

Tworzenie wyskakujących okienek w wyskakującym okienku jest całkiem łatwe. Aby używać wartości domyślnych, potrzebujesz tylko elementu button, który aktywuje wyskakujące okienko, i odpowiedniego elementu.

• Najpierw ustaw atrybut popover dla elementu, który będzie wyskakującego okienka.
• Następnie dodaj unikalny id do elementu wyskakującego okienka.
• Aby połączyć przycisk z wyskakującym okienkiem, ustaw popovertargetprzycisku na wartość id elementu wyskakującego okienka.

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>

Aby mieć dokładniejszą kontrolę nad wyskakującym okienkiem, możesz bezpośrednio ustawić ich typy. Na przykład użycie atrybutu bez wartości popover jest równoznaczne z użyciem atrybutu popover="auto". Wartość auto umożliwia zniknięcie światła i automatyczne zamykanie innych wyskakujących okienek. Użyj funkcji popover="manual" i dodaj przycisk zamykania. Ręcznie używane wyskakujące okienka nie zamykają innych wyskakujących okienek ani nie pozwalają użytkownikom na zamknięcie wyskakującego okienka przez kliknięcie przycisku w interfejsie. Samodzielnie tworzysz wyskakujące okienko za pomocą:

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

Wyskakujące okienko a okno modalne

Być może zastanawiasz się, czy w otwartym oknie dialogowym powinno pojawić się wyskakujące okienko. Odpowiedź brzmi: możesz nie mieć takiej możliwości.

Pamiętaj, że atrybut popover nie określa własnej semantyki. O ile można teraz tworzyć okna modalne za pomocą wyskakującego okienka, występują między nimi pewne kluczowe różnice:

Wnioski i dalsze lektury

popover udostępnia na platformie wiele ciekawych funkcji. Jeśli chcesz dowiedzieć się więcej o tym interfejsie API, w tym o dostępności tej funkcji oraz o dokumentacji dotyczącej zestawu funkcji, poniżej znajdziesz więcej informacji na ten temat:

• Semantyki i atrybut popover: czego używać, kiedy? Autor: Hidde de Vries
• Ułatwienia dostępu w wyskakującym okienku: co robi przeglądarka, a czego nie – Hidde de Vries
• Dokumentacja w MDN na temat wyskakującego okienka