Dipublikasikan: 28 Juli 2026
Chrome 151 diluncurkan sekarang, dan postingan ini membagikan beberapa fitur utama dari rilis tersebut. Baca catatan rilis Chrome 151 selengkapnya.
Sorotan dari rilis ini:
- Elemen kemampuan
<usermedia>menyediakan kontrol deklaratif yang diaktifkan pengguna untuk streaming kamera dan mikrofon. - Penetapan slot shadow DOM deklaratif memungkinkan komponen web menggunakan penetapan slot manual tanpa JavaScript imperatif.
- Navigasi Lembut dan metrik performa interaksi melacak latensi yang didorong interaksi dan perubahan rute dalam aplikasi halaman tunggal.
Elemen kemampuan: MVP <usermedia>
Elemen <usermedia> adalah elemen terbaru yang diluncurkan dalam rangkaian Elemen Kemampuan, setelah <geolocation>. Transisi dari proposal <permission> asli ini—bagian dari inisiatif PEPC—memungkinkan browser menangani kompleksitas dan perilaku unik dari berbagai kemampuan hardware secara lebih efektif. Meskipun proposal awal berfokus terutama pada pengelolaan status izin, seperti izinkan versus tolak, Elemen Kemampuan berfungsi sebagai perantara data.
Elemen <geolocation> menyediakan objek lokasi ke situs Anda, dan <usermedia> mengelola seluruh alur untuk akses kamera dan mikrofon. API ini menangkap niat pengguna, mengelola dialog browser, dan mengirimkan objek MediaStream ke aplikasi. Perubahan ini menghilangkan kebutuhan akan panggilan getUserMedia() terpisah, menyederhanakan penerapan, dan memastikan browser memiliki sinyal tepercaya tentang niat pengguna.
Cari tahu selengkapnya di Memperkenalkan elemen HTML <usermedia>.
Shadow DOM deklaratif: atribut shadowrootslotassignment
Chrome 151 menambahkan dukungan untuk atribut shadowrootslotassignment pada elemen <template>. Dengan demikian, Anda dapat membuat akar shadow deklaratif yang menggunakan penetapan slot manual langsung di HTML Anda.
Hingga saat ini, penetapan slot manual hanya tersedia secara imperatif. Dengan update ini, Anda dapat menentukan shadowrootslotassignment="manual" pada template shadow root
Atribut ini menerima named (perilaku default) dan manual, serta tercermin oleh properti shadowRootSlotAssignment di HTMLTemplateElement. Untuk mengetahui detail selengkapnya, lihat dokumentasi HTMLTemplateElement.shadowRootSlotAssignment di MDN.
Atribut ini sudah tersedia di Firefox dan di Safari 27 beta, sehingga akan segera tersedia sebagai Baseline Baru.
Navigasi Ringan dan metrik performa interaksi
Chrome 151 memperluas linimasa performa web dengan memperkenalkan dua jenis PerformanceEntry baru: soft-navigation dan interaction-contentful-paint. Entri ini membantu developer melacak performa dan latensi yang didorong oleh interaksi di aplikasi halaman tunggal (SPA), yang dibangun berdasarkan metrik Core Web Vitals yang sudah ada seperti Largest Contentful Paint (LCP) dan Interaction to Next Paint (INP).
Dalam SPA, transisi rute yang didorong JavaScript tidak memicu pemuatan halaman browser tradisional. Entri soft-navigation mencatat perubahan status histori dalam dokumen yang sama yang diprakarsai oleh interaksi pengguna. Saat navigasi ringan terjadi, browser menetapkan asal waktu baru, sehingga Anda dapat secara akurat mengatribusikan data performa berikutnya ke rute SPA aktif, bukan URL dokumen awal.
Entri interaction-contentful-paint mengukur paint konten baru dalam region DOM yang diubah oleh interaksi pengguna. Hal ini memberikan visibilitas ke latensi pemuatan interaksi, bahkan saat pembaruan konten bergantung pada operasi asinkron seperti permintaan fetch().
Anda dapat mengamati entri baru ini di aplikasi menggunakan PerformanceObserver. Cuplikan kode berikut yang mencatat entri navigasi ringan ke konsol—termasuk navigasi ringan sebelumnya di halaman ini menggunakan opsi yang di-buffer:
const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });
Untuk mempelajari lebih lanjut cara menerapkan dan mengukur navigasi SPA, baca dokumentasi Navigasi ringan di Chrome untuk Developer.
Bacaan lebih lanjut
Hal ini hanya mencakup beberapa sorotan utama. Lihat link berikut untuk mengetahui perubahan tambahan di Chrome 151:
Langganan
Untuk mendapatkan info terbaru, subscribe channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru. Atau ikuti kami di X atau LinkedIn untuk membaca artikel dan postingan blog baru.
Segera setelah Chrome 152 dirilis, kami akan memberi tahu Anda tentang hal-hal baru di Chrome.