Baru di Chrome 129

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage. Mari kita pelajari lebih lanjut dan lihat apa yang baru untuk developer di Chrome 129.

Membagi tugas yang panjang dengan scheduler.yield()

Tugas yang lama akan menunda kemampuan browser untuk merespons input pengguna, sehingga menimbulkan persepsi bahwa situs lambat, dan memengaruhi metrik performa penting seperti INP. Dengan scheduler.yield(), Anda dapat membagi tugas yang panjang menjadi potongan-potongan kecil, sehingga meningkatkan responsivitas dengan kembali ke thread utama secara eksplisit.

Hal ini memungkinkan Anda memberi tahu browser:

"HALO! Pekerjaan yang akan saya lakukan mungkin memerlukan waktu beberapa saat. Jika Anda perlu melukis bingkai, merespons input pengguna, atau memiliki tugas penting lainnya, tidak apa-apa, saya bisa menunggu"

Penggambaran tentang bagaimana memecah tugas dapat memfasilitasi interaksi pengguna. Di bagian atas, tugas yang lama akan memblokir pengendali peristiwa agar tidak berjalan hingga tugas selesai. Di bagian bawah, tugas yang dipisah memungkinkan pengendali peristiwa berjalan lebih cepat dari yang seharusnya.

Tambahkan baris berikut ke kode JavaScript Anda secara rutin untuk memberi browser waktu istirahat, dan menghindari masalah INP.

await scheduler.yield();

Yang penting, hal ini memungkinkan kelanjutan kode Anda diprioritaskan sehingga Anda tidak akan kehilangan dengan memberikan. Sebaiknya gunakan scheduler.yield() secara bebas dalam fungsi di antara bagian tugas yang lebih besar.

Lihat Mengoptimalkan tugas yang lama untuk mengetahui detail selengkapnya.

Animasi dengan ukuran intrinsik

Animasi CSS cukup menarik, tetapi biasanya memerlukan ukuran eksplisit, Anda tidak dapat menggunakan kata kunci ukuran intrinsik seperti auto, min-content, atau fit-content.

Properti CSS interpolate-size membuka kumpulan animasi baru yang tidak mungkin dilakukan saat menggunakan kata kunci ukuran intrinsik.

Tanpa interpolate-size, tombol dalam video berikut tidak memiliki transisi.

Setelah menambahkan interpolate-size: allow-keywords, tombol dalam video akan mendapatkan efek animasi transisi yang indah.

Menentukan interpolate-size: allow-keywords pada elemen root akan menetapkan perilaku baru untuk seluruh halaman. Sebaiknya lakukan hal ini jika kompatibilitas tidak menjadi masalah.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Untuk kontrol yang lebih baik, fungsi calc-size() CSS, mirip dengan calc(), juga mendukung operasi pada salah satu kata kunci ukuran intrinsik yang didukung. Saat melakukan penghitungan tata letak, kata kunci size dievaluasi ke ukuran asli calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Lihat Menganimasikan ke tinggi: auto; (dan kata kunci ukuran intrinsik lainnya) di CSS untuk mengetahui detail lengkapnya.

Perubahan pada penentuan posisi anchor CSS

Positioning anchor CSS hadir di Chrome 125, tetapi setelah beberapa diskusi tambahan dalam kelompok kerja CSS, ada beberapa perubahan pada spesifikasi dan penerapannya. Jika sudah menggunakan posisi anchor CSS, Anda harus memperbarui kode sesegera mungkin.

Pertama, inset-area telah diganti namanya menjadi position-area. Hal ini lebih disukai karena frasa position- membantu Anda mengingat bahwa properti ini diterapkan ke elemen yang diposisikan, bukan elemen anchor.

Kedua, position-try-options diganti namanya menjadi position-try-fallbacks. Hal ini membantu Anda mengingat bahwa ini hanyalah penggantian ke posisi utama, yang ditentukan oleh gaya dasar.

Terakhir, sintaksis fungsional inset-area() dihapus dari position-try. Oleh karena itu, gunakan position-try-fallbacks: top, bukan position-try-fallbacks: inset-area(top).

Dan banyak lagi!

Tentu saja masih banyak lagi.

Ada metode Intl baru untuk memformat durasi, dengan dukungan untuk beberapa lokalitas.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Kanvas GPU web kini dapat menggunakan tampilan penuh untuk gambar HDR.

Selain itu, ada beberapa penghentian dan penghapusan yang dapat memengaruhi beberapa developer.

Baca catatan rilis lengkap.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Periksa link berikut untuk perubahan tambahan di Chrome 129.

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, yang akan menggantikan Adriana. Segera setelah Chrome 130 dirilis, kami akan segera memberi tahu Anda tentang hal-hal baru di Chrome.