Baru di Chrome 121

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari kita pelajari lebih lanjut dan lihat apa yang baru untuk developer di Chrome 121.

Pembaruan CSS.

Mari kita mulai dengan pembaruan CSS:

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

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

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

Peningkatan penyamaran CSS untuk SVG. Ini adalah tindak lanjut dari peningkatan dukungan CSS mask di Chrome 120, dengan menambahkan dukungan mask baru ke SVG (multiple mask, serta mask-mode, mask-composite, mask-position, dan mask-repeat). Selain itu, mask SVG jarak jauh (misalnya, mask: url(masks.svg#star)) sekarang didukung.

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

Update Speculation Rules API

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

Sekarang API ini menyertakan dukungan untuk aturan dokumen: aturan ini adalah ekstensi untuk sintaksis aturan spekulasi yang memungkinkan browser mendapatkan daftar URL untuk pemuatan spekulatif dari elemen di halaman. Aturan dokumen dapat mencakup kriteria mengenai link mana yang dapat digunakan. Hal ini, ditambah dengan kolom "eagerness" baru, memungkinkan Anda secara otomatis mengambil data atau melakukan pra-rendering link di halaman secara langsung, saat mengarahkan kursor atau 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 untuk dicocokkan 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 dapat menyebabkan ketidakcocokan.

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

Uji coba origin Element Capture API

Element Capture API tersedia dalam uji coba origin. API ini memungkinkan Anda merekam dan merekam elemen HTML tertentu. Fungsi ini mengubah tangkapan seluruh tab, menjadi tangkapan subpohon DOM tertentu, yang hanya menangkap turunan langsung dari elemen target. Dengan kata lain, fungsi ini memangkas dan menghapus konten yang terhalang dan terhalang.

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

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

Perlu diketahui bahwa Anda dapat menggunakan Region Capture untuk melakukannya, tetapi dalam hal ini jika beberapa konten, seperti daftar drop-down, digambar di atas konten yang dipilih, drop-down tersebut akan menjadi bagian dari rekaman.

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

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

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

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

Dan banyak lagi!

Tentu saja masih banyak lagi.

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

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

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

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa tautan berikut untuk perubahan tambahan di Chrome 121.

Langganan

Untuk mendapatkan info terbaru, berlangganan Channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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