Baru di Chrome 121

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari kita lihat apa saja yang baru untuk developer di Chrome 121.

Pembaruan CSS.

Mari kita mulai dengan update 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 kini mendukung animasi, sehingga peralihan antar-palet menjadi transisi yang lancar 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.

Masking CSS untuk SVG ditingkatkan, ini adalah tindak lanjut dari dukungan mask CSS yang ditingkatkan di Chrome 120, yang 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, yang sebenarnya tidak demikian. 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 untuk link mana yang dapat digunakan. Hal ini, ditambah dengan kolom "eagerness" baru, memungkinkan Anda melakukan pramuat atau pra-rendering link di halaman secara otomatis, saat mengarahkan kursor atau saat mouse ditekan.

Berikut adalah contoh aturan dokumen:

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

Perubahan terpisah memungkinkan Anda menentukan 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 spekulatif 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. Ini dapat mendeklarasikan bahwa urutan kunci parameter kueri tidak boleh mencegah kecocokan, bahwa parameter kueri tertentu tidak boleh mencegah kecocokan, atau bahwa hanya parameter kueri tertentu yang diketahui yang boleh 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 pengambilan seluruh tab menjadi pengambilan subpohon DOM tertentu, yang hanya mengambil turunan langsung dari elemen target. Dengan kata lain, metode ini memangkas dan menghapus konten yang menghalangi dan terhalang.

Contoh penggunaan Element Capture API yang berguna 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 kepada peserta jarak jauh.

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

Perlu diperhatikan 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 daftar drop-down yang diambil.
Menu drop-down Elad 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 daftar dropdown yang terlihat.
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 elemen <select> secara terprogram dengan metode showPicker() dari HTMLSelectElement.

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

Bacaan lebih lanjut

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

Langganan

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

Yo soy Adriana Jara, dan segera setelah Chrome 122 dirilis, saya akan segera hadir untuk memberi tahu Anda yang baru di Chrome.