Baru di Chrome 121

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari selami dan lihat hal-hal baru untuk developer di Chrome 121.

Pembaruan CSS.

Mari kita mulai dengan pembaruan CSS:

Properti scrollbar-color dan scrollbar-width kini tersedia. Dengan tombol ini, Anda dapat menyesuaikan scrollbar dan mengubah—seperti yang mungkin Anda duga—warna dan lebarnya.

Properti font-palette memungkinkan Anda memilih palet tertentu untuk merender font warna. Properti ini sekarang mendukung animasi, sehingga peralihan di antara palet menjadi transisi yang mulus di antara dua palet yang dipilih.

Elemen pseudo ::spelling-error dan ::grammar-error memungkinkan Anda menyesuaikan warna untuk kesalahan ejaan dan tata bahasa, menyoroti kata yang salah eja dengan warna latar belakang atau dekorasi lainnya, serta menerapkan pemeriksaan ejaan kustom dengan tampilan yang lebih terintegrasi.

Penyamaran CSS untuk SVG telah ditingkatkan, ini adalah tindak lanjut dari peningkatan dukungan mask CSS di Chrome 120, dengan menambahkan dukungan mask baru ke SVG (beberapa mask, serta mask-mode, mask-composite, mask-position, dan mask-repeat). Selain itu, mask SVG jarak jauh (misalnya, mask: url(masks.svg#star)) kini didukung.

Koreksi: Versi sebelumnya dari artikel ini menyebutkan penambahan dukungan untuk kondisi supports() ke @import, dan sebenarnya tidak demikian. Perubahan tersebut disertakan dalam Chrome 122.

Update Speculation Rules API

Situs dapat menggunakan Speculation Rules API, untuk secara terprogram memberi tahu Chrome halaman mana yang akan dipra-render, sehingga menciptakan pengalaman pengguna yang lebih baik dengan mengurangi waktu navigasi halaman.

Sekarang API menyertakan dukungan untuk aturan dokumen: aturan ini merupakan ekstensi untuk sintaksis aturan spekulasi yang memungkinkan browser mendapatkan daftar URL untuk pemuatan spekulatif dari elemen di suatu halaman. Aturan dokumen dapat menyertakan kriteria yang dapat menggunakan link ini. Hal ini, ditambah dengan kolom "eagerness" baru, memungkinkan Anda mengambil data atau melakukan pra-render secara otomatis pada halaman dengan segera, saat mengarahkan kursor atau mengarahkan mouse ke bawah.

Berikut adalah contoh aturan dokumen:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Perubahan terpisah memungkinkan penentuan aturan spekulasi menggunakan header respons HTTP Speculation-Rules. Header adalah alternatif untuk menggunakan elemen <script> inline. Nilai header ini harus berupa URL yang mengarah ke resource teks dengan jenis MIME "application/speculationrules+json". Aturan resource akan ditambahkan ke kumpulan aturan dokumen.

Selain itu, petunjuk No-Vary-Search memungkinkan pengambilan data spekulatif agar cocok meskipun parameter kueri URL berubah. Header respons HTTP No-Vary-Search mendeklarasikan bahwa beberapa atau semua bagian kueri URL dapat diabaikan untuk tujuan pencocokan. Fungsi ini dapat mendeklarasikan bahwa urutan kunci parameter kueri tidak boleh mencegah kecocokan, parameter kueri tertentu tidak boleh mencegah kecocokan, atau bahwa hanya parameter kueri tertentu yang diketahui yang harus menyebabkan ketidakcocokan.

Buka Peningkatan pada Speculation Rules API untuk mengetahui informasi selengkapnya tentang perubahan ini.

Uji coba origin Element Capture API

Element Capture API tersedia dalam uji coba origin. API ini memungkinkan Anda mengambil dan merekam elemen HTML tertentu. Fungsi ini mengubah tangkapan seluruh tab, menjadi tangkapan subhierarki DOM tertentu, dan hanya menangkap turunan langsung elemen target. Dengan kata lain, fitur ini akan memangkas dan menghapus konten yang mengganggu dan yang tersumbat.

Contoh penggunaan Element Capture API adalah aplikasi konferensi video yang memungkinkan Anda menyematkan aplikasi pihak ketiga dalam iframe. Dalam skenario ini, Anda mungkin ingin menangkap iframe tersebut sebagai video dan mengirimkannya ke peserta yang bergabung dari jarak jauh.

Screenshot panggilan konferensi video di Chrome.
Elad menggunakan aplikasi pihak ketiga dalam panggilan konferensi video bersama François.

Perlu diperhatikan bahwa Anda dapat menggunakan Region Capture untuk melakukannya, tetapi jika beberapa konten, seperti menu drop-down, tergambar di atas konten yang dipilih, drop-down tersebut akan menjadi bagian dari rekaman.

Screenshot menu drop-down yang diambil.
Daftar drop-down Elad muncul di atas konten yang diterima oleh François.

Element Capture API memecahkan masalah ini, dengan memungkinkan Anda menargetkan elemen yang ingin dibagikan.

Screenshot elemen target tanpa daftar dropdown yang terlihat.
François tidak melihat menu drop-down dari Elad.

Lihat artikel Merekam streaming video dari elemen apa pun untuk mengetahui contoh kode dan mendaftar ke uji coba origin ElementCapture

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Metode resizeBy() dan resizeTo(), bagian dari Document Picture-in-Picture API, kini memerlukan gestur pengguna.

  • Anda dapat membuka pemilih opsi elemen <select> secara terprogram dengan metode showPicker() dari HTMLSelectElement.

  • scope_extensions, berada dalam uji coba origin, fitur ini memungkinkan perluasan perilaku aplikasi web untuk menyertakan origin lainnya, jika ada kesepakatan antara origin utama aplikasi web dan origin terkait.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link berikut untuk melihat perubahan tambahan di Chrome 121.

Langganan

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

Halo Adriana Jara, dan segera setelah Chrome 122 dirilis, saya akan segera memberi tahu Anda apa saja yang baru di Chrome!