Chrome 137 beta

Rachel Andrew

Dipublikasikan: 1 Mei 2025

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 130 masih dalam versi beta mulai 30 April 2025. Anda dapat mendownload versi terbaru di Google.com untuk desktop atau di Google Play Store di Android.

CSS dan UI

Rilis ini menambahkan tujuh fitur CSS dan UI baru.

Fungsi if()

Fungsi CSS if() memberikan cara ringkas untuk mengekspresikan nilai bersyarat. Fungsi ini menerima serangkaian pasangan nilai kondisi, yang dibatasi oleh titik koma. Fungsi ini mengevaluasi setiap kondisi secara berurutan dan menampilkan nilai yang terkait dengan kondisi benar pertama. Jika tidak ada kondisi yang bernilai benar, fungsi akan menampilkan aliran token kosong. Hal ini memungkinkan Anda mengekspresikan logika bersyarat yang kompleks dengan cara yang sederhana dan ringkas. Contoh:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

Properti reading-flow dan reading-order

Properti CSS reading-flow mengontrol urutan elemen dalam tata letak fleksibel, petak, atau blok yang diekspos ke alat aksesibilitas dan difokuskan menggunakan navigasi fokus keyboard tab. Properti ini menggunakan salah satu nilai kata kunci berikut:

  • normal
  • flex-visual
  • flex-flow
  • grid-rows
  • grid-columns
  • grid-order
  • source-order

Properti CSS reading-order memungkinkan Anda mengganti urutan secara manual dalam penampung alur baca. Nilainya adalah bilangan bulat dengan nilai default 0.

Untuk mempelajari lebih lanjut, baca Menggunakan alur baca CSS untuk navigasi fokus berurutan logis dan coba beberapa contoh alur baca.

offset-path: shape()

Fungsi shape() sudah didukung di clip-path, dan memungkinkan pemangkasan responsif. Mengaktifkannya juga untuk offset-path menutup celah kecil tempat jenis bentuk yang sama dapat digunakan untuk properti tersebut.

Mendukung atribut transformasi di SVGSVGElement

Fitur ini memungkinkan penerapan properti transformasi—seperti penskalaan, rotasi, translasi, dan kemiringan—langsung ke elemen root <svg> menggunakan atribut transformasinya. Peningkatan ini memungkinkan Anda memanipulasi seluruh sistem koordinat SVG atau kontennya secara keseluruhan, sehingga memberikan fleksibilitas yang lebih besar dalam membuat grafik vektor yang dinamis, responsif, dan interaktif. Dengan mendukung atribut ini, elemen SVG dapat diubah tanpa memerlukan elemen wrapper tambahan atau solusi CSS yang rumit, sehingga menyederhanakan proses pembuatan grafik web yang dapat diskalakan dan dianimasikan.

Izinkan <use> mereferensikan elemen root dokumen eksternal dengan menghilangkan fragmen.

Dalam fitur ini, kami menyederhanakan elemen SVG <use> dengan melonggarkan persyaratan perujukan. Saat ini, Anda harus secara eksplisit mereferensikan fragmen dalam dokumen SVG. Jika tidak ada ID fragmen yang diberikan, <use> tidak akan dapat menyelesaikan target dan tidak ada yang akan dirender atau dirujuk.

Dengan fitur ini, menghilangkan fragmen atau hanya memberikan nama file SVG eksternal akan otomatis merujuk ke elemen root, sehingga Anda tidak perlu mengubah dokumen yang dirujuk hanya untuk menetapkan ID ke root. Peningkatan ini menyederhanakan proses pengeditan manual dan meningkatkan efisiensi.

Warna aksen sistem untuk properti accent-color diperluas ke Windows dan ChromeOS

Dengan begitu, Anda dapat menggunakan warna aksen sistem operasi untuk elemen formulir. Dengan menggunakan properti CSS accent-color, Anda dapat memastikan bahwa elemen formulir seperti kotak centang, tombol pilihan, dan status progres otomatis mengadopsi warna aksen yang ditentukan oleh sistem operasi pengguna. Fitur ini telah didukung di macOS sejak tahun 2021, dan kini didukung di Windows dan ChromeOS.

view-transition-name: match-element

Nilai match-element untuk properti view-transition menghasilkan ID unik berdasarkan identitas elemen dan tetap sama untuk elemen ini. Ini digunakan dalam kasus Aplikasi Halaman Tunggal saat elemen dipindahkan dan Anda ingin menganimasikannya dengan transisi tampilan.

Web API

Menyesuaikan jenis error yang ditampilkan untuk pembuatan kredensial WebAuthn 'payment'

Memperbaiki jenis error yang ditampilkan selama pembuatan kredensial WebAuthn untuk kredensial payment pembayaran. Karena ketidakcocokan spesifikasi historis, pembuatan kredensial payment di iframe lintas origin tanpa aktivasi pengguna akan menampilkan SecurityError, bukan NotAllowedError, sebagaimana yang ditampilkan untuk kredensial non-payment. Ini adalah perubahan yang dapat menyebabkan gangguan. Kode yang sebelumnya mendeteksi jenis error yang ditampilkan (misalnya, e instanceof SecurityError) akan terpengaruh. Kode yang secara umum hanya menangani error selama pembuatan kredensial (misalnya, catch (e)) akan terus berfungsi dengan benar.

Partisi URL Blob: Pengambilan/Navigasi

Untuk melanjutkan Partisi Penyimpanan, hal ini akan menerapkan partisi akses URL Blob menurut Kunci Penyimpanan (situs tingkat teratas, origin frame, dan boolean has-cross-site-ancestor), kecuali navigasi tingkat teratas yang akan tetap dipartisi hanya menurut origin frame.

Perubahan ini dapat dikembalikan untuk sementara dengan menetapkan kebijakan PartitionedBlobURLUsage. Kebijakan ini tidak akan lagi digunakan saat kebijakan Enterprise terkait partisi penyimpanan lain tidak digunakan lagi.

Stack panggilan dalam laporan error dari halaman web yang tidak merespons

Fitur ini merekam stack panggilan JavaScript saat halaman web menjadi tidak responsif karena kode JavaScript menjalankan loop tak terbatas atau komputasi yang sangat panjang. Hal ini membantu developer mengidentifikasi penyebab tidak responsifnya aplikasi dan memperbaikinya dengan lebih mudah. Stack panggilan JavaScript disertakan dalam API pelaporan error saat alasannya adalah tidak responsif.

Jenis Warna Floating Point Canvas

Memperkenalkan kemampuan untuk menggunakan format piksel floating point (bukan fixed point 8-bit) dengan CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, dan ImageData. Hal ini diperlukan untuk aplikasi presisi tinggi (misalnya, visualisasi medis), konten rentang dinamis tinggi, dan ruang warna kerja linear.

Tidak mengizinkan pra-rendering HTTP teks biasa yang tidak tepercaya

Saat ini, pra-render diizinkan melalui HTTP dan HTTPS, sedangkan pengambilan data sebelumnya hanya berfungsi melalui HTTPS. Batasi pra-render agar konsisten dengan pengambilan data awal.

Document-Isolation-Policy

Document-Isolation-Policy memungkinkan dokumen mengaktifkan crossOriginIsolation untuk dirinya sendiri, tanpa harus men-deploy COOP atau COEP, dan terlepas dari status crossOriginIsolation halaman. Kebijakan ini didukung oleh isolasi proses. Selain itu, subresource lintas asal non-CORS dokumen akan dimuat tanpa kredensial atau harus memiliki header CORP.

Pelajari lebih lanjut di Kebijakan Isolasi Dokumen: Aktifkan fitur web yang canggih dengan mudah.

Ed25519 di Web Cryptography

Fitur ini menambahkan dukungan untuk algoritma Curve25519 di Web Cryptography API, yaitu algoritma tanda tangan Ed25519

Logging dan pelaporan alamat IP

Chrome Enterprise meningkatkan kemampuan pemantauan keamanan dan respons insiden dengan mengumpulkan dan melaporkan alamat IP lokal dan jarak jauh serta mengirimkan alamat IP tersebut ke Log Investigasi Keamanan (SIT). Selain itu, Chrome Enterprise akan memungkinkan admin mengirim alamat IP ke penyedia SIEM pihak pertama dan pihak ketiga menggunakan konektor Pelaporan Chrome Enterprise. Fitur ini akan tersedia untuk pelanggan Chrome Enterprise Core.

Integrasi Promise JavaScript

JavaScript Promise Integration (JSPI) adalah API yang memungkinkan aplikasi WebAssembly berintegrasi dengan JavaScript Promise. Hal ini memungkinkan program WebAssembly bertindak sebagai generator Promise, dan memungkinkan program WebAssembly berinteraksi dengan API yang mendukung Promise. Khususnya, saat aplikasi menggunakan JSPI untuk memanggil API (JavaScript) yang mendukung Promise, kode WebAssembly akan ditangguhkan; dan pemanggil asli ke program WebAssembly akan diberi Promise yang akan dipenuhi saat program WebAssembly akhirnya selesai.

Language Detector API

Language Detector API adalah JavaScript API yang mengidentifikasi bahasa dari string yang diberikan. API ini didukung oleh model dasar yang disesuaikan untuk melakukan tugas deteksi bahasa.

Dengan string tertentu, Language Detector API akan menampilkan daftar bahasa yang terdeteksi secara berurutan, beserta skor keyakinan untuk setiap hasil.

Jika ingin, developer dapat meneruskan daftar bahasa input yang diharapkan saat membuat instance Language Detector untuk membantu mengoptimalkan kasus penggunaan saat deteksi diharapkan dilakukan pada bahasa tertentu.

Membatasi atribut dan argumen float di SVGMatrix, SVGRect, dan SVGPoint

Saat menetapkan atribut atau argumen float pada SVGMatrix, SVGRect, dan SVGPoint, Anda tidak dapat lagi menetapkannya sebagai Infinity atau Nan. Pengecualian JavaScript akan diberikan jika Anda mencoba menyetelnya, seperti yang ditentukan dalam spesifikasi SVG.

Selection API getComposedRanges dan direction

Fitur ini menyediakan dua metode API baru untuk Selection API:

  • Selection.direction yang menampilkan arah pilihan sebagai "none", "forward", atau "backward"
  • Selection.getComposedRanges() yang menampilkan daftar 0 atau 1 "tersusun" StaticRange

StaticRange "gabungan" diizinkan untuk melintasi batas bayangan, yang tidak dapat dilakukan oleh Rentang normal.

Contoh:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Jika pilihan melintasi batas root shadow yang tidak disediakan dalam daftar shadowRoots, maka titik akhir StaticRange akan "diubah cakupannya" agar berada di luar pohon tersebut. Hal ini memastikan kita tidak mengekspos pohon bayangan yang tidak diketahui.

Ekstensi cakupan aplikasi web

Menambahkan kolom manifes aplikasi web scope_extensions yang memungkinkan aplikasi web memperluas cakupannya ke origin lain.

Contoh:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

Hal ini memungkinkan situs yang mengontrol beberapa subdomain dan domain tingkat teratas ditampilkan sebagai satu aplikasi web.

Mewajibkan origin yang tercantum untuk mengonfirmasi pengaitan dengan aplikasi web menggunakan file konfigurasi .well-known/web-app-origin-association.

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

Petunjuk Cabang WebAssembly

Meningkatkan performa kode WebAssembly yang dikompilasi dengan memberi tahu mesin bahwa instruksi cabang tertentu kemungkinan besar akan mengambil jalur tertentu. Hal ini memungkinkan mesin membuat keputusan yang lebih baik untuk tata letak kode (meningkatkan hit cache instruksi) dan alokasi register.

WebGPU: GPUTextureView untuk binding externalTexture

GPUTextureView kini diizinkan untuk digunakan untuk binding externalTexture saat membuat GPUBindGroup.

WebGPU: Overload copyBufferToBuffer

Metode GPUCommandEncoder copyBufferToBuffer() kini menyertakan cara yang lebih sederhana untuk menyalin seluruh buffer menggunakan overload baru dengan parameter ukuran dan offset opsional.

Uji coba origin baru

Di Chrome 137, Anda dapat memilih untuk ikut serta dalam uji coba origin baru berikut.

Atribut pemblokiran rendering kecepatan frame penuh

Menambahkan token pemblokiran rendering baru dengan kecepatan frame penuh ke atribut pemblokiran. Jika diblokir dengan token kecepatan frame penuh, perender akan berfungsi pada kecepatan frame yang lebih rendah sehingga dapat mencadangkan lebih banyak resource untuk pemuatan.

Menjeda pemutaran media di iframe yang tidak dirender

Menambahkan kebijakan izin "media-playback-while-not-rendered" untuk mengizinkan situs penyematan menjeda pemutaran media iframe yang disematkan yang tidak dirender—yaitu, yang properti "display"-nya disetel ke "none". Hal ini akan memungkinkan developer membangun pengalaman yang lebih mudah digunakan dan juga meningkatkan performa dengan membiarkan browser menangani pemutaran konten yang tidak terlihat oleh pengguna.

Rewriter API

Rewriter API mengubah dan menyusun ulang teks input dengan cara yang diminta, yang didukung oleh model bahasa AI di perangkat. Developer dapat menggunakan API ini untuk menghilangkan redundansi dalam teks agar sesuai dengan batas kata, menyusun ulang pesan agar sesuai dengan target audiens atau agar lebih konstruktif jika pesan ditemukan menggunakan bahasa yang tidak sopan, menyusun ulang postingan atau artikel agar menggunakan kata dan konsep yang lebih sederhana, dan banyak lagi.

Writer API

Writer API dapat digunakan untuk menulis materi baru berdasarkan perintah tugas penulisan, yang didukung oleh model bahasa AI di perangkat. Developer akan dapat menggunakan API ini untuk membuat penjelasan tekstual tentang data terstruktur, menyusun postingan tentang produk berdasarkan ulasan atau deskripsi produk, memperluas daftar pro dan kontra menjadi tampilan lengkap, dan banyak lagi.