Ulepszenia w zaproponowanym elemencie <permission>

Thomas Steiner

Opublikowano: 12 maja 2025 r.

Proponowany element HTML <permission> jest nadal w wersji próbnej origin, ponieważ zespół Chrome go udoskonala, opierając się na podstawach stworzonych w ramach naszej pierwszej wersji próbnej origin. W tym poście opisujemy ulepszenia, które mają zapewnić większą elastyczność i kontrolę podczas wysyłania próśb o uprawnienia w aplikacjach internetowych. Szczegółowe informacje o wprowadzeniu elementu <permission> i jego początkowych możliwościach znajdziesz w naszym wcześniejszym artykule Testowanie w ramach programu Origin Trial nowego elementu HTML <permission>.

Obsługa treści w przypadku interfejsu zastępczego

Element <permission> był początkowo zdefiniowany jako element pusty bez zawartości aż do Chrome 136. Od wersji Chrome 137 obsługuje treść, co oznacza, że wymagane jest teraz oznaczenie jej za pomocą tagów otwierających i zamykających:

<permission>
  <!-- optional content -->
</permission>

Ta zmiana umożliwia umieszczanie interfejsów użytkownika w treści elementu. Te elementy zastępcze są wyświetlane w przeglądarkach, które nie obsługują elementu <permission>, lub gdy określony jest nieobsługiwany atrybut type. Zapewnia to płynniejsze działanie i większą wygodę użytkowników w różnych środowiskach przeglądarek.

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

Bardziej szczegółowe wykrywanie funkcji automatyzacji

Aby ułatwić Ci określenie obsługi konkretnych typów uprawnień, wprowadziliśmy metodę statyczną isTypeSupported():

HTMLPermissionElement.isTypeSupported('geolocation');

Ta metoda zwraca wartość logiczną wskazującą, czy obsługiwany jest określony typ uprawnień. W połączeniu z dotychczasową funkcją wykrywania funkcji typeof HTMLPermissionElement !== 'undefined' możesz teraz programowo sprawdzać, czy przeglądarka obsługuje zarówno element <permission>, jak i określone typy uprawnień.

Pamiętaj, że możesz też przekazać kilka typów uprawnień rozdzielonych spacjami (np. "camera microphone"), a funkcja zwróci informację, czy cały ciąg znaków jest prawidłową wartością "type". Na przykład wywołanie funkcji isTypeSupported() z tymi parametrami zwraca te wyniki:

• "camera" → true
• "geolocation" → true
• "camera geolocation" → false (Mimo że poszczególne typy są obsługiwane, ich kombinacja nie jest).

Zaktualizowane nazwy wydarzeń

W Chrome 136 wprowadziliśmy 2 nowe zdarzenia, które zastąpiły wcześniejsze:

• onpromptdismiss (zastępuje ondismiss)
• onpromptaction (zastępuje onresolve)

Te nowe zdarzenia mają bardziej przejrzystą semantykę i lepiej odzwierciedlają zachowanie elementu. Starsze zdarzenia zostaną wycofane w Chrome 138, dlatego zalecamy odpowiednie zaktualizowanie modułów obsługi zdarzeń.

Obsługa ikon

Pracujemy nad włączeniem obsługi ikon w elemencie <permission>. Planujemy wprowadzić tę zmianę w Chrome 138. Ta funkcja umożliwia wyświetlanie predefiniowanych ikon odpowiadających typowi uprawnień z ograniczonymi opcjami stylizacji, takimi jak dostosowanie koloru i rozmiaru. Szczegóły interfejsu API są jeszcze dopracowywane. 

Poniższe przykłady pokazują domyślny kolor wypełnienia, inny kolor wypełnienia oraz brak koloru wypełnienia, ale z czarnym obrysem.

Styl domyślny

Domyślny kolor ikony jest taki sam jak kolor tekstu elementu uprawnień.

Zmodyfikowany styl

Poniższe przykłady pokazują przykładowe modyfikacje domyślnego stylu.

Zmiana koloru ikony

::permission-icon {
  fill: black;
}

Zmiana konturu ikony

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

Wyłączanie ikony

Po uruchomieniu ikona będzie domyślnie włączona. Jeśli chcesz wyłączyć ikonę, możesz to zrobić za pomocą tego kodu CSS:

::permission-icon {
  display: none;
}

Wytyczne dotyczące stylu

Szczegółowe wskazówki dotyczące stylu elementu <permission>, w tym sprawdzone metody i ograniczenia, znajdziesz w <permission>wytycznych dotyczących stylu. W tym artykule znajdziesz szczegółowe instrukcje, które pomogą Ci skutecznie dostosować styl elementu w aplikacjach.

Rozszerzona obsługa platform i funkcji

Element <permission> obsługuje teraz dodatkowe platformy i funkcje:

• Obsługa Androida: element działa teraz na urządzeniach z Androidem, co zwiększa jego zastosowanie na różnych platformach użytkowników.
• Obsługa geolokalizacji: możesz teraz prosić o type="geolocation" uprawnienia za pomocą elementu <permission> z dodatkowym atrybutem logicznym preciselocation. Atrybut preciselocation wpływa tylko na sformułowanie promptu, ale pracujemy nad tym, aby w przyszłych aktualizacjach rozróżniać uprawnienia do przybliżonej i dokładnej lokalizacji.

Podsumowanie

Te ulepszenia elementu <permission> są częścią naszych ciągłych działań mających na celu uproszczenie próśb o uprawnienia i poprawę komfortu użytkowników w internecie. Zachęcamy do wypróbowania tych nowych funkcji i przesłania opinii, aby pomóc nam udoskonalić tę funkcję.