Yang baru di Chrome 137

Rachel Andrew

Dipublikasikan: 27 Mei 2025

Chrome 137 diluncurkan sekarang, dan postingan ini membagikan beberapa fitur utama dari rilis tersebut. Baca catatan rilis Chrome 137 selengkapnya.

Sorotan dari rilis ini:

Gunakan reading-flow dan reading-order untuk memastikan urutan tab yang logis melalui tata letak yang kompleks. Fungsi CSS if() memberikan cara ringkas untuk mengekspresikan nilai bersyarat. Integrasi Promise JavaScript (JSPI) memungkinkan aplikasi WebAssembly terintegrasi dengan promise JavaScript.

CSS 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 cara elemen tersebut mendapatkan fokus menggunakan metode navigasi berurutan linear. Hal ini memecahkan masalah lama pada tata letak petak dan fleksibel, di mana urutan tab dapat terputus dari urutan penataan item.

Fungsi ini mengambil satu nilai kata kunci, dengan default normal, yang mempertahankan perilaku pengurutan elemen dalam urutan DOM. Untuk menggunakannya di dalam penampung flex, tetapkan nilainya ke flex-visual atau flex-flow. Untuk menggunakannya di dalam penampung petak, tetapkan nilainya ke grid-rows, grid-columns, atau grid-order.

Properti CSS reading-order memungkinkan Anda mengganti urutan item secara manual dalam container alur baca. Untuk menggunakan properti ini di dalam container petak, flex, atau blok, tetapkan nilai reading-flow pada container ke source-order dan tetapkan reading-order item individual ke nilai bilangan bulat.

Untuk mempelajari lebih lanjut, baca Menggunakan CSS reading-flow untuk navigasi fokus berurutan logis.

Fungsi if() CSS

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.

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>

Integrasi Promise JavaScript WebAssembly (JSPI)

JavaScript Promise Integration (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 mendukung promise.

Khususnya, saat aplikasi menggunakan JSPI untuk memanggil API yang memiliki promise (JavaScript), kode WebAssembly akan ditangguhkan; dan pemanggil asli ke program WebAssembly akan diberi promise yang akan dipenuhi saat program WebAssembly akhirnya selesai.

Dan banyak lagi!

Tentu saja masih banyak lagi:

  • Untuk melanjutkan Partisi Penyimpanan, Chrome telah menerapkan partisi akses URL Blob menurut kunci penyimpanan.
  • Format piksel floating point Canvas kini diterapkan.
  • offset-path: shape() didukung sehingga Anda dapat menggunakan bentuk responsif untuk menetapkan jalur animasi.

Bacaan lebih lanjut

Hal ini hanya mencakup beberapa sorotan utama. Lihat link berikut untuk mengetahui perubahan tambahan di Chrome 137.

Langganan

Agar tetap mendapatkan info terbaru, subscribe ke 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 138 dirilis, kami akan memberi tahu Anda tentang fitur baru di Chrome.