Chrome 137 beta

Rachel Andrew

Dipublikasikan: 1 Mei 2025

Kecuali jika dinyatakan lain, perubahan berikut berlaku untuk rilis saluran Chrome beta 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 adalah 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 if() CSS memberikan cara ringkas untuk mengekspresikan nilai bersyarat. Fungsi ini menerima serangkaian pasangan nilai kondisi, yang dipisahkan oleh titik koma. Fungsi ini mengevaluasi setiap kondisi secara berurutan dan menampilkan nilai yang terkait dengan kondisi pertama yang benar. Jika tidak ada kondisi yang bernilai benar, fungsi akan menampilkan streaming token kosong. Hal ini memungkinkan Anda mengekspresikan logika kondisional 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 flex, grid, atau blok yang ditampilkan ke alat aksesibilitas dan difokuskan menggunakan navigasi fokus keyboard tab. Properti ini memerlukan 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 membaca. Ini adalah bilangan bulat dengan nilai default 0.

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

offset-path: shape()

Fungsi shape() sudah didukung di clip-path, dan memungkinkan pemangkasan responsif. Mengaktifkannya juga untuk offset-path akan 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, terjemahan, 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 ditransformasi tanpa memerlukan elemen wrapper tambahan atau solusi CSS yang kompleks, sehingga menyederhanakan proses mem-build grafik web yang skalabel dan animasi.

Mengizinkan <use> mereferensikan elemen root dokumen eksternal dengan menghapus fragmen.

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

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

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

Tindakan ini memungkinkan Anda 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 secara otomatis mengadopsi warna aksen yang ditentukan oleh sistem operasi pengguna. Fitur ini telah didukung di macOS sejak 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 Web Satu Halaman saat elemen dipindahkan dan Anda ingin menganimasikannya dengan transisi tampilan.

Web API

Menyelaraskan jenis error yang ditampilkan untuk pembuatan kredensial WebAuthn 'pembayaran'

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

Partisi URL Blob: Pengambilan/Navigasi

Sebagai kelanjutan dari Partisi Penyimpanan, ini 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 perusahaan terkait partisi penyimpanan lain tidak digunakan lagi.

Stack panggilan dalam laporan error dari halaman web yang tidak responsif

Fitur ini menangkap stack panggilan JavaScript saat halaman web menjadi tidak responsif karena kode JavaScript menjalankan loop tanpa batas atau komputasi yang sangat lama lainnya. Hal ini membantu developer mengidentifikasi penyebab tidak responsifnya aplikasi dan memperbaikinya dengan lebih mudah. Stack panggilan JavaScript disertakan dalam API pelaporan error jika alasannya tidak responsif.

Jenis Warna Floating Point Kanvas

Memperkenalkan kemampuan untuk menggunakan format piksel floating point (bukan titik tetap 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 hanya berfungsi melalui HTTPS. Batasi pra-rendering agar konsisten dengan pengambilan data.

Document-Isolation-Policy

Document-Isolation-Policy memungkinkan dokumen mengaktifkan crossOriginIsolation untuk dirinya sendiri, tanpa harus men-deploy COOP atau COEP, dan apa pun 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: Mengaktifkan fitur web yang canggih dengan mudah.

Ed25519 di Kriptografi Web

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 mengirim alamat IP tersebut ke Log Investigasi Keamanan (SIT). Selain itu, Chrome Enterprise juga memungkinkan admin mengirim alamat IP ini ke penyedia SIEM pihak pertama dan ketiga secara opsional menggunakan konektor Pelaporan Chrome Enterprise. Fitur ini akan tersedia untuk pelanggan Chrome Enterprise Core.

Integrasi Promise JavaScript

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

Language Detector API

Language Detector API adalah API JavaScript yang mengidentifikasi bahasa 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.

Secara opsional, 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 kini tidak dapat menetapkannya sebagai Infinity atau Nan. Pengecualian JavaScript akan ditampilkan jika Anda mencoba menetapkannya, seperti yang ditentukan dalam spesifikasi SVG.

Selection API getComposedRanges dan direction

Fitur ini mengirimkan 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 "composed" StaticRange

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

Contoh:

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

Jika pilihan melintasi batas root bayangan yang tidak diberikan dalam daftar shadowRoots, endpoint StaticRange akan "diperluas cakupannya" agar berada di luar hierarki tersebut. Hal ini memastikan bahwa kita tidak mengekspos hierarki 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 level teratas untuk ditampilkan sebagai satu aplikasi web.

Memerlukan 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 petunjuk cabang tertentu sangat mungkin mengambil jalur tertentu. Hal ini memungkinkan mesin membuat keputusan yang lebih baik untuk tata letak kode (meningkatkan hit cache petunjuk) 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 buffering menggunakan overload baru dengan parameter offset dan ukuran 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 render baru dengan kecepatan frame penuh ke atribut pemblokiran. Jika perender diblokir dengan token kecepatan frame penuh, perender akan berfungsi pada kecepatan frame yang lebih rendah untuk mencadangkan lebih banyak resource untuk pemuatan.

Menjeda pemutaran media pada iframe yang tidak dirender

Menambahkan kebijakan izin "media-playback-while-not-rendered" untuk mengizinkan situs penyematan menjeda pemutaran media iframe tersemat yang tidak dirender—yaitu, memiliki properti "display" yang disetel ke "none". Hal ini akan memungkinkan developer membuat pengalaman yang lebih mudah digunakan dan juga meningkatkan performa dengan memungkinkan 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 menghapus redundansi dalam teks agar sesuai dengan batas kata, menyusun ulang pesan agar sesuai dengan audiens yang dituju atau menjadi lebih konstruktif jika pesan ditemukan menggunakan bahasa negatif, menyusun ulang postingan atau artikel untuk menggunakan kata dan konsep yang lebih sederhana, dan banyak lagi.

Writer API

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