Jalur gerakan CSS, Back/forward cache NotRestoreAlasan API, Document Picture-in-Picture, dan lainnya.
Kecuali jika dinyatakan lain, perubahan yang dijelaskan berlaku pada rilis saluran beta Chrome terbaru untuk Android, ChromeOS, Linux, macOS, dan Windows. Pelajari lebih lanjut fitur yang tercantum di sini melalui link yang disediakan atau dari daftar di ChromeStatus.com. Chrome 116 masih dalam versi beta mulai 19 Juli 2023. Anda dapat mendownload aplikasi terbaru di Google.com untuk desktop atau di Google Play Store di Android.
CSS
Rilis ini menambahkan dua fitur CSS baru.
Jalur Gerak CSS
Jalur gerakan memungkinkan penulis memosisikan objek grafis apa pun dan menganimasikannya di sepanjang jalur yang ditentukan oleh developer. Hal ini memungkinkan sejumlah kemungkinan transformasi baru yang kuat, seperti pemosisian menggunakan koordinat kutub (dengan fungsi ray()
), bukan koordinat persegi panjang standar yang digunakan oleh fungsi translate()
, atau menganimasikan elemen di sepanjang jalur yang ditentukan. Fitur ini memudahkan penentuan transisi spasial 2D yang kompleks dan indah. Jalur dapat ditentukan sebagai circle()
, ellipse()
, rect()
, inset()
, xywh()
, polygon()
, ray()
, dan url()
.
Animasi tampilan dan visibilitas konten
Chrome 116 mendukung properti display
dan content-visibility
dalam animasi keyframe. Dukungan ini memungkinkan developer membuat animasi keluar yang setelahnya elemen akan otomatis menjadi display: none
atau content-visibility: hidden
tanpa perlu menulis JavaScript untuk menangani peralihan tersebut setelah animasi selesai. Ini memungkinkan animasi keluar untuk elemen yang hanya ditambahkan di CSS.
Web API
AbortSignal.any()
Menampilkan sinyal yang dibatalkan jika salah satu sinyal sumber dibatalkan. Developer dapat menggunakan ini untuk menggabungkan sumber pembatalan independen, misalnya, waktu tunggu yang ditentukan dengan AbortSignal.timeout()
dan sinyal yang terkait dengan AbortController, lalu meneruskannya ke API asinkron seperti fetch()
.
Dukungan BYOB untuk Fetch
Implementasi ReadableStream di Chrome mendukung pembaca bring your own buffer (BYOB) untuk streaming byte yang dapat dibaca. Sekarang, Response.body
juga merupakan aliran byte yang dapat dibaca, bukan "default" aliran data yang dapat dibaca. Hal ini memungkinkan Fetch API digunakan dengan pembaca BYOB, mengurangi overhead dan salinan sampah memori, serta meningkatkan responsivitas bagi pengguna. Blob.stream()
kini juga mendapatkan manfaat dari pengoptimalan ini.
Back/forward cache NotRecoverAlasan API
NotRestoreAlasan API akan melaporkan daftar alasan halaman tidak ditayangkan dari BFcache dalam struktur hierarki frame, melalui PerformanceNavigationTiming API.
Picture-in-Picture Dokumen
Document Picture-in-Picture menambahkan API baru untuk membuka jendela selalu di atas yang dapat diisi dengan HTMLElements
arbitrer. Ini adalah perluasan dari HTMLVideoElement
API yang ada yang hanya memungkinkan HTMLVideoElement
untuk dimasukkan ke jendela Picture-in-Picture (PiP). Dengan begitu, developer web dapat memberikan pengalaman PiP yang lebih baik kepada pengguna.
Karakter pengganti yang Diperluas dalam Origin Kebijakan Izin
Karakter pengganti subdomain dalam daftar yang diizinkan memberikan beberapa fleksibilitas yang berharga, tetapi berbeda dengan parser karakter pengganti yang ada dan memerlukan kode serta fungsi spesifikasi baru. Intent ini akan mengurangi overhead tersebut dengan menggunakan kembali bagian spesifikasi Kebijakan Keamanan Konten yang ada serta mengizinkan scheme + wildcard domain
dan wildcard port
dalam daftar yang diizinkan. Secara khusus, intent ini akan menggunakan definisi sumber host dan sumber skema, bukan origin dalam definisi Daftar yang diizinkan, sekaligus mewajibkan bagian jalur kosong (karena Kebijakan Izin berlaku untuk origin yang cocok).
Paket FedCM: Login Hint API, User Info API, dan RP Context API
Update paket ini memungkinkan penyesuaian alur login gabungan yang menggunakan Federated Credential Management API (FedCM).
Dengan Login Hint API, pihak tepercaya (RP) dapat menentukan petunjuk tentang akun pengguna yang ingin ditampilkan di UI FedCM. Hal ini utamanya digunakan untuk memberikan UX yang lebih baik bagi pengguna yang kembali.
User Info API memungkinkan penyedia identitas (IdP) mengambil informasi pengguna sehingga mereka dapat mempersonalisasi pengalaman login untuk pengguna yang kembali, misalnya melalui tombol “Login dengan IdP” yang dipersonalisasi.
Dengan RP Context API, RP dapat meminta dialog FedCM untuk mengganti judul "Login" dengan "Daftar", "Gunakan" atau "Continue", untuk menyelaraskan intent yang sebenarnya bagi pengguna.
Peristiwa masuk/keluar Kursor dan Kursor yang tidak disusun
Buat properti event.composed
di peristiwa mouseenter
, mouseleave
, pointerenter
, dan pointerleave
"false"
agar sesuai dengan spesifikasi dan untuk memperbaiki kekurangan interoperabilitas. Baik spesifikasi Peristiwa UI untuk Peristiwa Mouse dan spesifikasi Peristiwa Pointer menentukan peristiwa ini sebagai tidak disusun. Kedua spesifikasi ini beralih dari definisi aslinya beberapa tahun lalu: https://github.com/w3c/uievents/pull/210 https://github.com/w3c/pointerevents/pull/461 Selain mengatasi kesenjangan interop, perubahan ini juga memperbaiki kesalahan pengiriman dua atau tiga kali peristiwa yang salah ke host shadow DOM di Chromium saat shadow DOM juga memproses shadow DOM di Chromium.
Menghapus pewarisan sandbox document.open
Saat ini tanda Sandbox pemanggil saat ini diterapkan ke tujuan panggilan ketika document.open
menargetkan jendela yang berbeda. Setelah perubahan ini, hal ini tidak akan berlaku lagi..
Melaporkan Kritis-CH menyebabkan mulai ulang di NavigationTiming
Situs dapat menunjukkan bahwa Petunjuk Klien tertentu sangat penting untuk halaman dengan menyertakannya dalam header respons HTTP Critical-CH
. Tindakan tersebut akan memicu mulai ulang koneksi jika petunjuk yang tercantum di header respons HTTP Critical-CH
dapat (tetapi tidak) disertakan dalam permintaan HTTP yang awalnya dikirim. Intent ini menyarankan penambahan readonly attribute DOMHighResTimeStamp criticalCHRestart;
ke antarmuka PerformanceNavigationTiming
.
Uji coba origin sedang berlangsung
Di Chrome 116, Anda dapat memilih untuk mengikuti uji coba origin baru berikut.
COOP: membatasi properti
Cross-Origin-Opener-Policy digunakan untuk memutuskan hubungan antara pop-up dan pembuka, untuk meningkatkan keamanan. "restrict-properties" adalah nilai yang diusulkan yang membatasi hubungan, bukan memutuskan hubungan sepenuhnya. Metode ini akan mengaktifkan crossOriginIsolated saat disambungkan dengan COEP.
Daftar ke uji coba origin pembatasan properti COOP.
API Status Login FedCM
IdP Sign-in Status API dari Federated Credential Management API (FedCM) memungkinkan penyedia identitas (IdP) memberi sinyal ke browser saat pengguna login/out, sehingga FedCM dapat meningkatkan properti privasinya dengan mengoptimalkan UX-nya.
Daftar untuk uji coba origin Status Login FedCM
API EditContext
EditContext API menyederhanakan proses mengintegrasikan aplikasi web dengan metode input teks lanjutan seperti penulisan bentuk VK, panel tulisan tangan, pengenalan ucapan, dan Komposisi IME. API ini meningkatkan aksesibilitas dan performa, serta membuka kemampuan baru untuk editor berbasis web.
Daftar ke uji coba origin EditContext API
Waktu Frame Animasi Panjang
Ini adalah perpanjangan dari tugas yang berjalan lama. Ini mengukur tugas bersama dengan update rendering berikutnya, menambahkan informasi seperti skrip yang berjalan lama, waktu rendering, dan waktu yang dihabiskan dalam tata letak dan gaya paksa, yang dikenal sebagai layout thrashing.
Developer dapat menggunakannya sebagai diagnostik untuk "kelambatan", yang diukur oleh INP, dengan menemukan penyebab kemacetan thread utama yang sering menjadi penyebab INP yang buruk.