Berikut hal yang perlu Anda ketahui:
- Tambahkan sentuhan unik pada teks Anda dengan animasi
font-palette
dan update CSS lainnya. - Terdapat sejumlah peningkatan pada Speculation Rules API.
- Anda dapat mencoba Element Capture API dalam uji coba origin.
- Dan masih banyak lagi.
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.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/1.png?authuser=19&hl=id)
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.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/3.png?authuser=19&hl=id)
Element Capture API mengatasi masalah ini, dengan memungkinkan Anda menargetkan elemen yang ingin dibagikan.
![Screenshot elemen target tanpa tampilan daftar dropdown.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/4.png?authuser=19&hl=id)
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()
danresizeTo()
, yang merupakan bagian dari Document Picture-in-Picture API, kini memerlukan gestur pengguna.Anda dapat membuka pemilih opsi secara terprogram untuk elemen
<select>
dengan metodeshowPicker()
dariHTMLSelectElement
.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.
- Yang baru di Chrome DevTools (121)
- Penghentian dan penghapusan Chrome 121
- Update ChromeStatus.com untuk Chrome 121
- Daftar perubahan repositori sumber Chromium
- Kalender rilis Chrome
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!