Beta Chrome 150

Rachel Andrew

Dipublikasikan: 3 Juni 2026

Kecuali dinyatakan lain, perubahan berikut berlaku untuk rilis saluran beta Chrome terbaru untuk Android, ChromeOS, Linux, macOS, dan Windows. Pelajari lebih lanjut fitur yang tercantum di sini melalui link yang disediakan atau dari daftar di ChromeStatus.com. Chrome dalam versi beta mulai 2 Juni 2026. Anda dapat mendownload versi terbaru di Google.com untuk desktop atau di Google Play Store di Android.

CSS dan UI

Warna sistem AccentColor dan AccentColorText

Warna sistem AccentColor dan AccentColorText dapat digunakan di CSS untuk mengakses warna aksen sistem yang ditentukan di perangkat pengguna. Kemampuan ini memungkinkan developer menerapkan gaya seperti aplikasi ke konten web mereka dalam konteks saat pengguna mengharapkan integrasi tema sistem operasi, seperti aplikasi web yang diinstal. Pengguna harus berada di aplikasi web yang diinstal pada profil awal untuk melihat warna aksen sistem yang dirender.

Mengizinkan parameter pembulatan opsional untuk polygon()

Memungkinkan Anda menentukan parameter pembulatan sudut opsional dalam fungsi bentuk CSS polygon(). Developer dapat menentukan nilai panjang untuk membulatkan sudut poligon tanpa menghitung kurva bezier secara manual.

Zoom yang dapat dianimasikan

Properti CSS zoom dapat dianimasikan dan diinterpolasi sebagai <number>. Developer dapat melakukan transisi dan menganimasikan zoom untuk menskalakan elemen dan tata letaknya dengan lancar, melengkapi penskalaan berbasis transformasi yang ada.

Pengubah permintaan URL CSS

Fungsi CSS url() menerima pengubah permintaan opsional setelah string URL yang dikutip: cross-origin(), integrity(), dan referrer-policy(). Pengubah ini mengontrol perilaku pengambilan resource yang dirujuk langsung dari CSS, tanpa memerlukan perubahan pada markup HTML atau JavaScript.

Misalnya, background-image: url("image.png" cross-origin(anonymous)) mengambil gambar menggunakan mode anonim CORS.

Properti text-fit CSS

Menskalakan ukuran font node teks agar pas dengan lebar kotak yang memuatnya.

Properti ini memungkinkan developer memastikan judul atau konten dinamis mengisi ruang horizontal yang tersedia tanpa perhitungan ukuran font manual atau solusi sementara JavaScript yang rumit. Properti ini memberikan solusi native CSS yang andal untuk tipografi responsif yang mempertahankan keselarasan visual di berbagai ukuran layar dan panjang teks yang bervariasi.

CSS background-clip: border-area

Menerapkan nilai border-area untuk properti CSS background-clip, seperti yang ditentukan dalam CSS Backgrounds Level 4. Nilai background-clip memangkas latar belakang elemen ke area yang dilukis oleh goresan batasnya, dengan memperhitungkan border-width dan border-style sekaligus mengabaikan transparansi dari border-color. Nilai ini memungkinkan Anda membuat batas gradien tanpa border-image.

Fungsi image(<color>) CSS

Fungsi image() memungkinkan developer membuat gambar berwarna solid dari warna apa pun. Sintaksisnya adalah: image() = image( <color> ).

CSS light-dark() dengan nilai gambar

Memperluas fungsi CSS light-dark() untuk menerima nilai gambar, seperti url(), image-set(), dan none, dalam stylesheet penulis, sehingga properti gambar seperti background-image, list-style-image, border-image-source, cursor, dan content dapat otomatis beralih antar-gambar berdasarkan skema warna pilihan pengguna. Sebelumnya, perilaku ini hanya diizinkan dalam stylesheet Agen Pengguna. Perubahan ini selaras dengan spesifikasi CSS Color 5 dan cocok dengan penerapan yang ada di Firefox.

Meng-clone ke semua elemen turunan selectedcontent

Beberapa perubahan kecil dilakukan pada kasus ekstrem elemen selectedcontent:

  • Jika beberapa elemen selectedcontent dimasukkan ke dalam elemen <select> secara bersamaan, semuanya akan terus diperbarui, bukan hanya elemen pertama dalam urutan DOM.
  • Pembaruan elemen selectedcontent ditangguhkan saat dijalankan selama langkah-langkah penyisipan, penghapusan, atau pemindahan untuk memperbaiki masalah keamanan. Pembaruan ditangguhkan dengan menggunakan langkah-langkah pasca-penyisipan atau microtask.

Kueri container yang dipisahkan koma

Mendukung beberapa kueri per aturan @container. Aturan @container berlaku jika setidaknya salah satu kueri cocok.

Kemampuan ini memungkinkan adanya kueri penggantian untuk fitur yang tidak didukung di semua browser, misalnya.

Contoh:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

Selain dukungan untuk beberapa kueri, model objek diperluas untuk mendukung atribut conditions di CSSContainerRule API.

Mengekspos area yang tidak dapat dicetak ke CSS

Printer biasanya memiliki area kecil di setiap empat tepi lembar kertas yang tidak dapat ditandai dengan andal, biasanya karena mekanisme penanganan kertas printer. Margin halaman default diharapkan lebih besar daripada area ini, tetapi jika penulis menetapkan margin sendiri, dan bahkan ingin menambahkan kotak margin @page, misalnya, untuk header dan footer kustom, mereka memerlukan cara untuk menentukan tempat yang aman untuk mencetak.

Deskriptor CSS page-margin-safety dapat digunakan untuk menghindari area yang tidak dapat dicetak tersebut.

Atribut focusgroup

Memungkinkan penulis memberikan navigasi tombol panah, penghentian tab yang dijamin, dan memori fokus terakhir untuk widget komposit secara deklaratif, menggantikan skrip roving tabindex yang dikodekan secara manual. Contoh:

<div focusgroup="toolbar wrap" aria-label="Formatting">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

Pseudo-class elemen media

Class semu CSS :playing, :paused, :seeking, :buffering, :stalled, :muted, dan :volume-locked cocok dengan elemen <audio> dan <video> berdasarkan statusnya.

Fitur ini adalah salah satu area fokus dalam Interop 2026.

Perubahan perilaku popover=hint

Perubahan ini menerapkan model penumpukan yang direvisi dan disederhanakan untuk atribut popover=hint dan interaksinya dengan popover=auto. Sebelumnya, interaksi antara kedua jenis popover ini bisa menjadi rumit dalam beberapa situasi kasus sudut, seperti menyusun popover=auto di dalam popover=hint, dan dapat menyebabkan perilaku yang tidak terduga. Dengan model baru, membuka popover=hint tidak lagi menutup elemen popover=auto yang tidak terkait secara tidak sengaja. Popover petunjuk hanya disembunyikan saat popover=auto induknya disembunyikan, atau saat popover=auto baru yang tidak terkait dibuka. Selain itu, developer dapat menyusun popover otomatis dengan aman di dalam popover saran; alih-alih memunculkan pengecualian atau merusak stack, popover=auto yang disusun akan di-downgrade dengan baik dan berperilaku seperti popover=hint. Kemampuan ini memungkinkan developer menempatkan <select> yang dapat disesuaikan dalam popover=hint.

Untuk lebih meningkatkan prediktabilitas dan mencegah mutasi status yang kompleks, Chrome juga memperketat perilaku seputar pembukaan dan penutupan popover dari dalam peristiwa beforetoggle. Sebelumnya, ada pengamanan untuk beberapa kasus yang mungkin terjadi, tetapi tidak untuk semua kasus. Perubahan ini mengubah mekanisme yang digunakan untuk mendeteksi kasus ini agar dapat memunculkan InvalidStateError dengan lebih andal untuk semua kasus tersebut. Perubahan ini memastikan bahwa pengelolaan status popover tetap stabil dan mencegah bug reentrancy perulangan.

Perubahan ini didorong oleh diskusi standar dengan Mozilla terkait permintaan pull spesifikasi HTML di GitHub.

Warna alfa relatif

Warna alfa relatif memberikan cara CSS langsung untuk mendapatkan versi transparan dari warna yang ada tanpa menulis ulang saluran warnanya. Saat ini, developer perlu menduplikasi nilai komponen atau membuat token yang telah dihitung sebelumnya secara terpisah jika menginginkan warna yang sama dengan opasitas yang berbeda. Fungsi CSS Color 5 alpha() mempertahankan komponen warna asli dan hanya mengubah alfa, yang mengurangi overhead penulisan dan membuat token warna lebih mudah digunakan kembali dan dipertahankan.

Berukuran responsif <iframe>

Memungkinkan situs memilih untuk menggunakan iframe dengan ukuran responsif, yang mengukur elemen <iframe> dalam dokumen induk ke ukuran overflow tata letak dokumen iframe untuk menghindari scrolling dalam dokumen turunan.

flex-wrap:balance

flex-wrap:balance memungkinkan developer mendistribusikan konten di antara garis fleksibel sehingga tampilannya lebih seimbang, mirip dengan text-wrap:balance.

fungsi named-feature() untuk CSS @supports

Fungsi named-feature() memungkinkan aturan CSS @supports mengkueri sekumpulan kecil fitur bernama tertentu yang tidak dapat diuji menggunakan mekanisme @supports lainnya, tetapi dianggap sangat berharga untuk diuji.

overscroll-behavior: chain

overscroll-behavior memiliki tiga nilai: none, auto, dan contain. Nilai ini memengaruhi dua efek independen: propagasi scroll dan efek batas lokal. Misalnya, regangan overscroll.

  • none: tidak ada propagasi scroll, tidak ada efek batas lokal.
  • auto: propagasi scroll, efek batas lokal.
  • contain: tidak ada propagasi scroll, efek batas lokal.

Rilis ini melacak nilai baru untuk melengkapi set: chain: propagasi scroll, tanpa efek batas lokal.

Nilai ini berguna untuk efek seperti menu samping yang diterapkan sebagai scroller. Anda dapat memunculkan menu, dan saat mencapai tepi, menu tidak akan di-overscroll, atau diregangkan dan diterjemahkan. Namun, scroll kemudian di-chain ke ancestor.

Web API

Menonaktifkan filter SVG pada plugin dan iframe lintas origin atau yang dibatasi

Chrome 150 mencegah filter Scalable Vector Graphics (SVG) diterapkan ke iFrame lintas origin atau yang dibatasi, misalnya, yang di-sandbox, dan plugin yang disematkan, misalnya, PDF. Saat frame atau plugin digambar dengan efek filter SVG, pohon efek akan dilalui untuk menemukan ancestor tertinggi tanpa filter SVG, dan efek tersebut akan diterapkan.

IndexedDB: Backend SQLite

Implementasi IndexedDB Chromium ditulis ulang di atas SQLite untuk menggantikan implementasi sebelumnya yang menggunakan kombinasi LevelDB dan file datar. Perubahan ini tidak memengaruhi Web API.

Penulisan ulang ini diharapkan dapat meningkatkan keandalan dan, pada tingkat yang lebih rendah, performa.

Untuk saat ini, perubahan ini berlaku untuk penyimpanan data baru. Perubahan ini adalah langkah 2 dari rilis progresif multi-fase. Lihat halaman fitur ChromeStatus untuk konteks dalam memori SQLite yang melacak langkah 1.

MediaStreamTrackProcessor penghitung frame

Menambahkan atribut discardedFrames dan totalFrames ke antarmuka MediaStreamTrackProcessor. Penghitung ini memungkinkan developer web memantau kualitas pipeline pemrosesan media mereka dengan melacak jumlah frame yang diterima dan dihilangkan oleh prosesor.

Origin buram untuk URL data:

Chrome 150 memperbarui cara DedicatedWorker dan SharedWorker menangani URL data:. Daripada mewarisi origin keamanan skrip atau halaman yang membuatnya secara otomatis, worker ini diberi origin buram yang unik.

Perubahan ini sesuai dengan spesifikasi HTML worker dan meningkatkan keamanan dengan mengisolasi worker ini dari status origin yang sama dengan pembuatnya, sehingga mencegah mereka mengakses data sensitif melalui mekanisme seperti BroadcastChannel atau penyimpanan origin yang sama. Untuk mempertahankan batas isolasi yang benar, worker ini tetap berada dalam partisi penyimpanan yang sama (misalnya, dengan mempertahankan situs tingkat teratas atau nonce) dengan pembuatnya.

Penyesuaian keamanan ini diaktifkan secara default di seluruh platform desktop dan seluler. Administrator dapat meninjau atau memverifikasi batas keamanan melalui konfigurasi terpusat mereka. Untuk mengetahui detail penerapan teknis dan referensi spesifikasi, lihat Langkah 3 dari Setelan Worker Standar Aktif HTML.

Migrasi origin PWA

Saat pengguna menginstal Progressive Web App (PWA), identitas dan konteks keamanannya terikat erat dengan origin webnya, misalnya, app.example.com. Ikatan ini menimbulkan tantangan yang signifikan bagi developer yang perlu mengubah origin PWA mereka karena rebranding, penataan ulang domain, atau arsitektur ulang teknis. Perubahan tersebut memaksa pengguna menguninstal aplikasi lama secara manual dan menginstal ulang aplikasi baru, sehingga menyebabkan pengalaman yang mengganggu dan potensi kehilangan pengguna. Chrome 150 memperkenalkan mekanisme bagi developer untuk memigrasikan PWA yang diinstal ke origin situs yang sama yang baru, sehingga mempertahankan kepercayaan dan izin pengguna.

Kebijakan WebAppInstallForceList memblokir migrasi. Karena kebijakan Enterprise terkait aplikasi web utamanya didasarkan pada URL dan origin, ada risiko bahwa migrasi mungkin mengabaikan kebijakan tertentu yang mungkin telah dikonfigurasi oleh admin. Chrome tidak menawarkan migrasi kepada pengguna saat aplikasi diinstal otomatis oleh administrator perusahaan mereka. Sebagai gantinya, Chrome menampilkan banner yang menjelaskan hal ini kepada pengguna.

Mem-parsing petunjuk pemrosesan di HTML

Petunjuk pemrosesan (sintaksis: <?target data>) adalah konstruksi DOM yang ada, yang diekspos dalam XML, yang memungkinkan objek node yang bukan elemen tetapi dapat memiliki makna semantik untuk pemrosesan dokumen.

Misalnya, Anda dapat menggunakannya untuk menunjukkan rentang streaming atau penyorotan tanpa memerlukan elemen DOM baru dan mengubah struktur DOM sejauh CSS yang bersangkutan, atau sebagai direktif untuk parser HTML tentang cara melakukan buffering dan streaming.

Streaming yang tidak berurutan

Streaming di luar urutan memungkinkan Anda menggunakan <template for> dan rentang petunjuk pemrosesan (<?start> dan <?end>) untuk mengirimkan HTML dalam urutan non-sekuensial dan memperbarui bagian dokumen yang ada tanpa JavaScript.

Janji scroll terprogram

Kemampuan ini memberikan sinyal yang andal untuk status penyelesaian scroll lancar terprogram. Semua metode scroll di Element dan Window menampilkan objek Promise yang diselesaikan setelah scroll selesai, dan nilai yang diselesaikan menunjukkan apakah scroll terganggu.

WebGPU Immediates

Menambahkan ruang alamat langsung baru di WGSL dan metode setImmediateData() pada encoder render pass, compute pass, dan render bundle yang memungkinkan pengiriman sejumlah kecil data yang sering diupdate langsung ke shader tanpa membuat objek buffer GPU atau grup binding. Hal ini sangat berguna untuk aplikasi yang perlu mengupdate parameter per-draw seperti indeks objek, indeks materi, atau matriks transformasi setiap panggilan gambar, sehingga memungkinkan peningkatan performa yang signifikan dengan menghindari overhead pengelolaan buffer dan grup binding.

Web Speech API: Kualitas pengenalan di perangkat

Memperluas antarmuka SpeechRecognition dengan menambahkan properti quality ke SpeechRecognitionOptions. Properti ini memungkinkan developer menentukan kemampuan semantik yang diperlukan untuk pengenalan di perangkat dengan menggunakan processLocally: true.

Enum quality yang diusulkan mendukung tiga tingkat—command, dictation, dan conversation—yang dipetakan ke peningkatan kompleksitas tugas dan persyaratan hardware. Kemampuan ini memungkinkan developer menentukan apakah perangkat lokal dapat menangani kasus penggunaan yang sangat penting (seperti transkripsi rapat) atau apakah mereka perlu melakukan penggantian ke layanan cloud, sehingga mengatasi sifat kemampuan model di perangkat yang tidak jelas.

Uji coba origin baru

Di Chrome 150, Anda dapat memilih untuk mengikuti uji coba origin baru berikut.

Protokol Verifikasi Email (EVP)

Protokol Verifikasi Email (EVP) membantu pengguna membuat, mengakses, dan memulihkan akun dengan memberikan bukti kepemilikan kriptografi secara lancar, bukan OTP email secara manual.

Penghentian penggunaan dan penghapusan

Rilis Chrome ini memperkenalkan penghentian penggunaan dan penghapusan berikut.

Menghapus [LegacyNoInterfaceObject] dari IDL FontFaceSet

IDL FontFaceSet Chromium sebelumnya salah menggunakan [LegacyNoInterfaceObject], yang menyembunyikan FontFaceSet sebagai properti global dan menghapus properti konstruktor dari prototipenya. Perilaku ini menyimpang dari spesifikasi Pemuatan Font CSS dan berbeda dengan perilaku Safari dan Firefox.

Penghapusan ini menghapus [LegacyNoInterfaceObject] dari IDL FontFaceSet, sehingga FontFaceSet dapat diakses dengan benar sebagai properti global. Karena tidak ada constructor() yang ditentukan dalam IDL, memanggil FontFaceSet() baru dari JavaScript akan memunculkan TypeError: Illegal constructor dengan benar, yang sesuai dengan perilaku yang diwajibkan spesifikasi.