Yang baru di Chrome 137

Rachel Andrew

Dipublikasikan: 27 Mei 2025

Chrome 137 kini diluncurkan, 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 if() CSS menyediakan cara ringkas untuk mengekspresikan nilai bersyarat. Integrasi Promise JavaScript (JSPI) memungkinkan aplikasi WebAssembly berintegrasi dengan promise JavaScript.

reading-flow dan reading-order CSS

Properti CSS reading-flow mengontrol urutan elemen dalam tata letak flex, grid, atau blok yang diekspos ke alat aksesibilitas dan cara elemen tersebut difokuskan menggunakan metode navigasi berurutan linear. Hal ini menyelesaikan masalah lama dengan tata letak petak dan fleksibel, saat urutan tab dapat terputus dari urutan tata letak item.

Kode ini memerlukan satu nilai kata kunci, dengan default normal, yang mempertahankan perilaku pengurutan elemen dalam urutan DOM. Untuk menggunakannya di dalam penampung fleksibel, 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 penampung alur membaca. Untuk menggunakan properti ini di dalam penampung petak, fleksibel, atau blok, tetapkan nilai reading-flow pada penampung ke source-order dan tetapkan reading-order setiap item ke nilai bilangan bulat.

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

Fungsi if() CSS

Fungsi if() CSS memberikan cara ringkas untuk mengekspresikan nilai bersyarat. Fungsi ini menerima serangkaian pasangan nilai kondisi, yang dibatasi dengan 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.

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 terintegrasi 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 berisi promise, kode WebAssembly akan ditangguhkan; dan pemanggil asli ke program WebAssembly diberi promise yang akan dipenuhi saat program WebAssembly akhirnya selesai.

Dan banyak lagi!

Tentu saja masih banyak lagi:

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

Bacaan lebih lanjut

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

Langganan

Untuk mendapatkan info terbaru, subscribe ke channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru. Atau, ikuti kami di X atau LinkedIn untuk artikel dan postingan blog baru.

Segera setelah Chrome 138 dirilis, kami akan segera memberi tahu Anda tentang yang baru di Chrome.