Interfejs Popover API jest teraz dostępny jako nowa podstawa

Data publikacji: 7 lutego 2025 r.

W kwietniu 2024 r. w poście na tej stronie ogłosiliśmy, że interfejs Popover API jest dostępny w wersji podstawowej. Popełniliśmy jednak błąd i od 27 stycznia 2025 r. popover jest uwzględniany w podstawie. Z tego posta dowiesz się, dlaczego popełniliśmy błąd i co się zmieniło, aby w przyszłości uniknąć takich błędów.

Czym jest interfejs Popover API?

Interfejs Popover API zapewnia wbudowany sposób tworzenia różnych typów wyskakujących okienek używanych w aplikacjach internetowych. Wcześniej wymagały one użycia JavaScriptu i wymagały szczególnej uwagi, aby wdrożyć je w sposób dostępny. Interfejs API udostępnia te wszystkie funkcje przeglądarce, a prosty wyskakujący element można utworzyć w deklaratywny sposób w HTML-u.

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

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

Dlaczego nie było to „Punkt odniesienia” w kwietniu 2024 r.?

Gdy w kwietniu 2024 roku Firefox wprowadził implementację wyskakujących okienek, nie wiedzieliśmy jeszcze, że występuje poważna wada w iOS i iPadOS. W tych przeglądarkach mobilnych kliknięcie poza wyskakującym oknem nie powoduje jego zamknięcia. Jest to funkcja łatwego zamknięcia. To problem, który uniemożliwia większości programistów korzystanie z wyskakujących okienek. Oznacza to, że w kwietniu nie powinna ona zostać uwzględniona jako wartość domyślna. Trzeba było poczekać, aż błąd zostanie naprawiony w Safari 18.3.

Dlaczego popełniliśmy błąd?

Punkt odniesienia korzysta z funkcji web-features do obliczania, kiedy funkcje są w punkcie odniesienia lub poza nim. Jeśli otworzysz plik z poszczególną funkcją w tym projekcie, np. plik dla wyskakujących okienek, zobaczysz poszczególne funkcje z danych kompatybilności przeglądarki Mozilla. Jedna funkcja internetowa zawiera zwykle kilka takich elementów. Dzieje się tak, ponieważ funkcja w internecie to nie tylko jedna właściwość lub metoda, ale wiele komponentów, które muszą ze sobą współpracować. Funkcja nie jest też całą specyfikacją. Specyfikacje CSS często zawierają podfunkcje, które nigdy nie zostały zaimplementowane lub są używane tylko w określonym kontekście. Funkcja funkcji internetowych korzysta z kombinacji istniejących danych o dostępności i danych wprowadzonych przez człowieka, aby określić, co stanowi funkcję platformy internetowej, oraz, co jest kluczowe, czy częściowa implementacja jest na tyle poważna, aby nie uwzględniać jej w podstawie.

W lutym praca nad funkcjami internetowymi była jeszcze daleka od ukończenia. Aby pokazać, jak działa Baseline, chcieliśmy przedstawić najważniejsze funkcje, które miały znaleźć się w Baseline 2024, ale nie mieliśmy wszystkich potrzebnych danych. Na papierze, a ściślej mówiąc w danych o zgodnności przeglądarek, które nie zostały zaktualizowane do września, gdy problem został wykryty, pojawiło się wyskakujące okienko. Jednak ze względu na to, że błąd w iOS był na tyle poważny, że uniemożliwiał używanie wyskakujących okienek, nie udało się tego zrobić.

Brakowało też infrastruktury testowej dla urządzeń mobilnych. Projekt Web Platform Tests umożliwia nam testowanie działania funkcji platformy internetowej we wszystkich przeglądarkach. Gdyby problem z zamykaniem karty miał miejsce w przeglądarce na komputerze, testy zakończyłyby się niepowodzeniem, ale nie było tak w przypadku urządzeń mobilnych.

Jak uniknąć tego w przyszłości?

Dane są już znacznie lepsze. Dane o funkcjach internetowych są prawie kompletne, więc możemy mieć większą pewność co do wszystkich funkcji, które deklarujemy jako podstawowe.

W tym przypadku częścią problemu było zidentyfikowanie błędu, który występował tylko na urządzeniach mobilnych z systemem iOS. W przyszłości łatwiej będzie rozpoznawać problemy z współdziałaniem na urządzeniach mobilnych. Trwają prace nad ulepszaniem testów mobilnych w Testach platformy internetowej, abyśmy mogli lepiej identyfikować problemy w przeglądarce mobilnej, oddzielnie od problemów na komputerach. W tym roku chcemy też udostępnić te dane na pulpicie webstatus.dev. Jeśli w przyszłości wystąpi podobny problem, powinniśmy otrzymać szybsze sygnały o jego wystąpieniu, najlepiej zanim wprowadzimy tę funkcję w ramach Baseline.

Zawsze wiedzieliśmy, że zmapowanie całej platformy internetowej jako zestawu funkcji nie będzie łatwe. Jednak dyskusje na temat częściowych wdrożeń, błędów i tego, co tak naprawdę składa się na daną funkcję, są niezwykle cenne. Pomaga nam to określić, co jest dla Ciebie naprawdę ważne, i daje nam lepsze sygnały do wykorzystania podczas planowania działań takich jak Interop 2025.