Peningkatan pada elemen <permission> yang diusulkan

Thomas Steiner

Dipublikasikan: 12 Mei 2025

Elemen HTML <permission> yang diusulkan masih dalam uji coba origin, karena tim Chrome memperbaikinya, dengan membangun fondasi yang diletakkan dalam uji coba origin awal kami. Postingan ini membagikan peningkatan yang bertujuan memberi Anda lebih banyak fleksibilitas dan kontrol saat meminta izin dalam aplikasi web. Untuk ringkasan komprehensif tentang pengenalan elemen <permission> dan kemampuan awalnya, lihat artikel kami sebelumnya, Uji coba origin untuk elemen <permission> HTML baru.

Dukungan konten untuk UX pengganti

Elemen <permission> awalnya ditentukan sebagai elemen kosong tanpa konten hingga Chrome 136. Mulai Chrome 137, konten didukung, yang berarti konten tersebut kini wajib ditandai dengan tag pembuka dan penutup:

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

Perubahan ini memungkinkan Anda menyertakan antarmuka pengguna penggantian dalam konten elemen. Penggantian ini ditampilkan di browser yang tidak mendukung elemen <permission> atau saat atribut type yang tidak didukung ditentukan. Hal ini memastikan penurunan kualitas yang lebih baik dan pengalaman pengguna yang lebih baik di berbagai lingkungan browser.

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

Deteksi fitur terprogram yang lebih mendetail

Untuk membantu Anda menentukan dukungan untuk jenis izin tertentu, kami telah memperkenalkan metode statis, isTypeSupported():

HTMLPermissionElement.isTypeSupported('geolocation');

Metode ini menampilkan boolean yang menunjukkan apakah jenis izin yang ditentukan didukung. Jika digabungkan dengan deteksi fitur yang ada, typeof HTMLPermissionElement !== 'undefined', Anda kini dapat memastikan secara terprogram dukungan untuk elemen <permission> dan dukungan untuk jenis izin tertentu.

Perhatikan bahwa Anda juga dapat meneruskan beberapa jenis izin yang dipisahkan dengan spasi (misalnya, "camera microphone") dan fungsi ini akan menampilkan apakah keseluruhan string adalah nilai "type" yang valid. Misalnya, memanggil isTypeSupported() dengan parameter berikut akan menampilkan hasil ini:

• "camera" → true
• "geolocation" → true
• "camera geolocation" → false (Meskipun jenisnya didukung secara terpisah, kombinasi jenis tersebut tidak didukung.)

Nama acara yang diperbarui

Di Chrome 136, kami memperkenalkan dua peristiwa baru untuk menggantikan peristiwa sebelumnya:

• onpromptdismiss (menggantikan ondismiss)
• onpromptaction (menggantikan onresolve)

Peristiwa baru ini memberikan semantik yang lebih jelas dan lebih selaras dengan perilaku elemen. Peristiwa yang lebih lama akan dihentikan penggunaannya di Chrome 138, jadi sebaiknya perbarui pengendali peristiwa Anda.

Dukungan ikon

Kami sedang berupaya mengaktifkan dukungan ikon dalam elemen <permission>, yang ditargetkan untuk Chrome 138. Fitur ini akan memungkinkan Anda menampilkan ikon yang telah ditentukan sebelumnya yang sesuai dengan jenis izin, dengan opsi gaya visual terbatas seperti penyesuaian warna dan ukuran. Detail API yang tepat masih dalam tahap penyelesaian. 

Contoh berikut menunjukkan default, warna pengisi yang berbeda, dan tanpa warna pengisi tetapi dengan garis hitam.

Gaya default

Warna default ikon sama dengan warna teks elemen izin.

Gaya yang dimodifikasi

Contoh berikut menunjukkan modifikasi teladan pada gaya default.

Perubahan warna ikon

::permission-icon {
  fill: black;
}

Perubahan garis luar ikon

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

Menonaktifkan ikon

Setelah diluncurkan, ikon akan diaktifkan secara default. Jika Anda ingin menonaktifkan ikon, hal ini dapat dilakukan menggunakan CSS berikut

::permission-icon {
  display: none;
}

Pedoman gaya

Untuk panduan komprehensif tentang gaya elemen <permission>, termasuk praktik terbaik dan batasan, lihat panduan gaya <permission>. Referensi ini memberikan petunjuk mendetail untuk membantu Anda menata gaya elemen secara efektif dalam aplikasi Anda.

Dukungan platform dan kemampuan yang diperluas

Elemen <permission> kini mendukung platform dan kemampuan tambahan:

• Dukungan Android: Elemen ini kini berfungsi di perangkat Android, sehingga memperluas penerapannya di berbagai platform pengguna.
• Dukungan geolokasi: Anda kini dapat meminta izin type="geolocation" menggunakan elemen <permission> dengan atribut boolean preciselocation tambahan. Meskipun atribut preciselocation hanya memengaruhi kata-kata perintah, kami sedang berupaya secara aktif untuk membedakan izin lokasi umum dan akurat dalam update mendatang.

Kesimpulan

Peningkatan pada elemen <permission> ini adalah bagian dari upaya berkelanjutan kami untuk menyederhanakan permintaan izin dan meningkatkan pengalaman pengguna di web. Kami mendorong Anda untuk bereksperimen dengan fitur baru ini dan memberikan masukan untuk membantu kami menyempurnakan dan mengembangkan kemampuan ini.