Chrome 133 beta

Rachel Andrew

Dipublikasikan: 15 Januari 2024

Kecuali dinyatakan lain, perubahan berikut berlaku untuk 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 133 masih dalam versi beta pada 15 Januari 2024. Anda dapat mendownload versi terbarunya di Google.com untuk desktop atau di Google Play Store di Android.

CSS dan UI

Rilis ini menambahkan tujuh fitur CSS dan UI baru.

Fungsi attr() lanjutan CSS

Menerapkan augmentasi ke attr() yang ditentukan dalam CSS Level 5, yang memungkinkan jenis selain <string> dan penggunaan di semua properti CSS (selain dukungan yang ada untuk elemen semu content).

Cari tahu lebih lanjut di CSS attr() mendapatkan upgrade.

Class pseudo :open CSS

Pseudo-class :open cocok dengan <dialog> dan <details> saat dalam status terbuka, dan cocok dengan <select> dan <input> saat dalam mode yang memiliki pemilih dan pemilih ditampilkan.

Kueri penampung status scroll CSS

Gunakan kueri penampung untuk menentukan gaya turunan penampung berdasarkan status scroll-nya.

Container kueri adalah container scroll, atau elemen yang terpengaruh oleh posisi scroll container scroll. Status berikut dapat dikueri:

  • stuck: Penampung yang diposisikan tetap akan menempel di salah satu tepi kotak scroll.
  • snapped: Penampung yang disejajarkan dengan scroll snap saat ini di-snap secara horizontal atau vertikal.
  • scrollable: Apakah penampung scroll dapat di-scroll ke arah yang ditanyakan.

container-type: scroll-state baru memungkinkan penampung dikueri.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

Pelajari lebih lanjut di CSS scroll-state().

CSS text-box, text-box-trim, dan text-box-edge

Untuk mencapai keseimbangan konten teks yang optimal, properti text-box-trim dan text-box-edge, beserta properti singkat text-box, memungkinkan kontrol yang lebih baik terhadap perataan vertikal teks.

Properti text-box-trim menentukan sisi yang akan dipangkas, di atas atau di bawah, dan properti text-box-edge menentukan cara tepi harus dipangkas.

Properti ini memungkinkan Anda mengontrol jarak vertikal secara tepat menggunakan metrik font. Cari tahu lebih lanjut di CSS text-box-trim.

Nilai hint dari atribut popover

Popover API menentukan perilaku untuk dua nilai atribut popover: auto dan manual. Fitur ini menjelaskan nilai ketiga, popover=hint. Petunjuk, yang paling sering dikaitkan dengan perilaku jenis "tooltip", memiliki perilaku yang sedikit berbeda. Perbedaan utamanya adalah hint berada di bawah auto saat membuka stack popover bertingkat. Jadi, popover hint yang tidak terkait dapat dibuka saat tumpukan popover auto yang ada tetap terbuka.

Contoh kanonis adalah pemilih <select> terbuka (popover=auto) dan tooltip yang dipicu saat mengarahkan kursor (popover=hint) ditampilkan. Tindakan tersebut tidak menutup pemilih <select>.

Peningkatan posisi anchor dan pemanggil popover

Menambahkan cara imperatif untuk menetapkan hubungan pemanggil antara popover dengan popover.showPopover({source}). Memungkinkan hubungan pemanggil untuk membuat referensi elemen anchor implisit.

Popover yang bertingkat di dalam pemanggil tidak boleh memanggilnya kembali

Dalam kasus berikut, mengklik tombol akan mengaktifkan popover dengan benar, namun, mengklik popover itu sendiri setelah itu tidak akan menutup popover.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

Sebelumnya, hal ini terjadi karena popover menggelembungkan klik ke <button> dan mengaktifkan pemanggil, yang mengalihkan popover ke tertutup. Sekarang, hal ini telah diubah menjadi perilaku yang diharapkan.

Web API

Animation.overallProgress

Memberi developer representasi yang mudah dan konsisten tentang seberapa jauh animasi telah berkembang di seluruh iterasinya dan terlepas dari sifat linimasanya. Tanpa properti overallProgress, Anda perlu menghitung secara manual seberapa jauh animasi telah berjalan, dengan memperhitungkan jumlah iterasi animasi dan apakah currentTime animasi adalah persentase dari total waktu (seperti dalam kasus animasi yang digerakkan scroll) atau jumlah waktu absolut (seperti dalam kasus animasi yang digerakkan waktu).

Metode pause() dari objek Atomics

Menambahkan metode pause() ke objek namespace Atomics, untuk memberi petunjuk kepada CPU bahwa kode saat ini sedang menjalankan spinlock.

Pelaporan hash CSP untuk skrip

Aplikasi web yang kompleks sering kali perlu melacak subresource yang didownloadnya untuk tujuan keamanan.

Secara khusus, standar dan praktik terbaik industri yang akan datang (misalnya, PCI-DSS v4) mengharuskan aplikasi web menyimpan inventaris semua skrip yang didownload dan dieksekusi.

Fitur ini dibangun berdasarkan CSP dan Reporting API untuk melaporkan URL dan hash (untuk CORS/same-origin) dari semua resource skrip yang dimuat dokumen.

Pemindahan yang mempertahankan status DOM

Menambahkan primitif DOM (Node.prototype.moveBefore) yang memungkinkan Anda memindahkan elemen di sekitar hierarki DOM, tanpa mereset status elemen.

Saat memindahkan, bukan menghapus dan menyisipkan, status berikut seperti berikut dipertahankan:

  • <iframe> elemen tetap dimuat.
  • Elemen aktif tetap fokus.
  • Pop-over, layar penuh, dan dialog modal tetap terbuka.
  • Transisi dan animasi CSS berlanjut.

Mengekspos atribut attributionsrc di <area>

Menyelaraskan eksposur atribut attributionsrc pada <area> dengan perilaku pemrosesan atribut yang ada, meskipun saat atribut tersebut tidak diekspos.

Selain itu, sebaiknya atribut ini didukung di <area>, karena elemen tersebut adalah platform navigasi utama, dan Chrome sudah mendukungnya di platform <a> dan window.open lainnya

Mengekspos renderTime lintas asal yang dikasarkan dalam pengaturan waktu elemen dan LCP (terlepas dari Timing-Allow-Origin)

Entri LCP dan pengaturan waktu elemen memiliki atribut renderTime, yang selaras dengan frame pertama saat gambar atau teks di-paint.

Atribut ini saat ini dilindungi untuk gambar lintas origin dengan mewajibkan header Timing-Allow-Origin pada resource gambar. Namun, batasan tersebut mudah diatasi (misalnya, dengan menampilkan gambar lintas origin dan origin yang sama dalam frame yang sama).

Karena hal ini telah menjadi sumber kebingungan, kami berencana menghapus batasan ini dan memperkasar semua waktu rendering sebesar 4 mdetik saat dokumen tidak diisolasi lintas origin. Hal ini tampaknya cukup kasar untuk menghindari kebocoran informasi waktu decoding yang berguna tentang gambar lintas origin.

Mengembalikan responseStart dan memperkenalkan firstResponseHeadersStart

Dengan mengaktifkan 103 Early Hints, respons memiliki dua stempel waktu:

  • Saat Early Hints tiba (103)
  • Saat header akhir tiba (mis. 200)

Saat Chrome 115 diluncurkan firstInterimResponseStart untuk memungkinkan pengukuran dua stempel waktu ini, kami juga mengubah arti responseStart (yang digunakan oleh Time to First Byte (TTFB)) menjadi "header akhir". Hal ini menyebabkan masalah kompatibilitas web dengan browser dan alat yang tidak melakukan perubahan serupa untuk metrik yang umum digunakan ini.

Chrome 133 membatalkan perubahan responseStart ini untuk mengatasi masalah kompatibilitas ini dan sebagai gantinya memperkenalkan firstResponseHeadersStart untuk memungkinkan situs mengukur waktu hingga header akhir, sekaligus mempertahankan definisi TTFB asli.

Antarmuka FileSystemObserver

Antarmuka FileSystemObserver memberi tahu situs tentang perubahan pada sistem file. Situs mengamati perubahan pada file dan direktori, yang sebelumnya telah diberi izin oleh pengguna, di perangkat lokal pengguna, atau di Bucket File System (juga dikenal sebagai Origin Private File System), dan diberi tahu tentang info perubahan dasar, seperti jenis perubahan.

Pembekuan dalam mode Penghemat Energi

Saat Penghemat Energi aktif, Chrome akan membekukan "grup konteks penjelajahan" yang telah disembunyikan dan disenyapkan selama lebih dari lima menit jika ada subgrup frame berasal sama di dalamnya yang melampaui batas penggunaan CPU, kecuali jika:

  • Menyediakan fungsi konferensi audio atau video (terdeteksi dengan mengidentifikasi mikrofon, kamera, atau tangkapan layar/jendela/tab atau RTCPeerConnection dengan RTCDataChannel 'terbuka' atau MediaStreamTrack 'live').
  • Mengontrol perangkat eksternal (terdeteksi dengan penggunaan WebUSB, Web Bluetooth, WebHID, atau Web Serial).
  • Memegang Kunci Web atau koneksi IndexedDB yang memblokir update versi atau transaksi pada koneksi yang berbeda.

Pembekuan terdiri dari menjeda eksekusi. Status ini secara formal ditentukan dalam Page Lifecycle API.

Nilai minimum penggunaan CPU akan dikalibrasi untuk membekukan sekitar 10% tab di latar belakang saat Penghemat Energi aktif.

Beberapa peta impor

Peta impor saat ini harus dimuat sebelum modul ES apa pun dan hanya boleh ada satu peta impor per dokumen. Hal ini membuatnya rentan dan berpotensi lambat digunakan dalam skenario kehidupan nyata: Modul apa pun yang dimuat sebelum modul ini akan merusak seluruh aplikasi, dan dalam aplikasi dengan banyak modul, modul ini menjadi resource pemblokiran yang besar, karena seluruh peta untuk semua kemungkinan modul harus dimuat terlebih dahulu.

Fitur ini memungkinkan beberapa peta impor per dokumen, dengan menggabungkannya secara konsisten dan deterministik.

Header Akses Penyimpanan

Menawarkan cara alternatif bagi sematan yang diautentikasi untuk memilih ikut serta dalam cookie yang tidak dipartisi. Header ini menunjukkan apakah cookie yang tidak dipartisi disertakan (atau dapat disertakan) dalam permintaan jaringan tertentu, dan memungkinkan server mengaktifkan izin 'storage-access' yang telah diberikan. Memberikan cara alternatif untuk mengaktifkan izin 'storage-access' memungkinkan penggunaan oleh resource non-iframe, dan dapat mengurangi latensi untuk sematan yang diautentikasi.

Mendukung pembuatan ClipboardItem dengan Promise<DOMString>

ClipboardItem, yang merupakan input ke metode write() clipboard asinkron, sekarang menerima nilai string selain Blob dalam konstruktornya. ClipboardItemData dapat berupa Blob, string, atau Promise yang di-resolve ke Blob atau string.

WebAssembly Memory64

Proposal memory64 menambahkan dukungan untuk memori WebAssembly linear dengan ukuran lebih besar dari 2^32 bit. Perubahan ini tidak memberikan petunjuk baru, tetapi memperluas petunjuk yang ada untuk mengizinkan indeks 64-bit untuk kenangan dan tabel.

​​Web Authentication API: Metode getClientCapabilities()PublicKeyCredential

Metode PublicKeyCredential getClientCapabilities() memungkinkan Anda menentukan fitur WebAuthn mana yang didukung oleh klien pengguna. Metode ini menampilkan daftar kemampuan yang didukung, sehingga developer dapat menyesuaikan pengalaman dan alur kerja autentikasi berdasarkan fungsi spesifik klien.

WebGPU: Format verteks 1 komponen (dan unorm8x4-bgra)

Menambahkan format verteks tambahan yang tidak ada dalam rilis awal WebGPU karena kurangnya dukungan atau versi macOS lama (yang tidak lagi didukung oleh browser mana pun). Format verteks 1 komponen memungkinkan aplikasi hanya meminta data yang diperlukan, sedangkan sebelumnya aplikasi harus meminta data setidaknya dua kali lebih banyak untuk jenis data 8 dan 16 bit. Format unorm8x4-bgra membuatnya sedikit lebih nyaman untuk memuat warna vertex yang dienkode BGRA sambil mempertahankan shader yang sama.

Algoritma X25519 dari Web Cryptography API

Algoritma "X25519" menyediakan alat untuk melakukan perjanjian kunci menggunakan fungsi X25519 yang ditentukan dalam [RFC7748]. ID algoritma "X25519" dapat digunakan di antarmuka SubtleCrypto untuk mengakses operasi yang diterapkan: generateKey, importKey, exportKey, deriveKey, dan deriveBits.

Uji coba origin baru

Di Chrome 133, Anda dapat memilih untuk mengikuti uji coba origin baru berikut.

Memilih tidak ikut pembekuan dalam mode Penghemat Energi

Uji coba penonaktifan ini memungkinkan situs menonaktifkan perilaku pembekuan pada Penghemat Energi yang diluncurkan di Chrome 133.

Penghentian penggunaan dan penghapusan

Chrome versi ini memperkenalkan penghentian penggunaan dan penghapusan yang tercantum di bawah. Buka ChromeStatus.com untuk melihat daftar penghentian penggunaan yang direncanakan, penghentian penggunaan saat ini, dan penghapusan sebelumnya.

Rilis Chrome ini menghentikan penggunaan satu fitur.

Menghentikan penggunaan batas WebGPU maxInterStageShaderComponents

maxInterStageShaderComponents limit tidak digunakan lagi karena kombinasi faktor. Tanggal penghapusan yang dimaksudkan di Chrome 135.

  • Redundansi dengan maxInterStageShaderVariables: Batas ini sudah memiliki tujuan yang serupa, yaitu mengontrol jumlah data yang diteruskan antar-tahap shader.
  • Perbedaan kecil: Meskipun ada sedikit perbedaan dalam cara penghitungan kedua batas tersebut, perbedaan ini kecil dan dapat dikelola secara efektif dalam batas maxInterStageShaderVariables.
  • Penyederhanaan: Menghapus maxInterStageShaderComponents menyederhanakan antarmuka shader dan mengurangi kompleksitas bagi developer. Daripada mengelola dua batas terpisah dengan perbedaan yang tidak terlalu jelas, mereka dapat berfokus pada maxInterStageShaderVariables yang dinamai dengan lebih tepat dan komprehensif.

Rilis Chrome ini menghapus dua fitur.

Sebelumnya, saat resource di-prefetch menggunakan <link rel=prefetch>, Chrome mengabaikan semantik cache-nya (yaitu max-age dan no-cache) untuk penggunaan pertama dalam waktu lima menit, untuk menghindari pengambilan ulang. Sekarang, Chrome menghapus kasus khusus ini dan menggunakan semantik cache HTTP normal.

Artinya, developer web harus menyertakan header caching yang sesuai (Cache-Control atau Expires) untuk mendapatkan manfaat dari <link rel=prefetch>.

Hal ini juga memengaruhi <link rel=prerender> nonstandar.

Menghapus pemicu halaman Selamat Datang Chrome dengan preferensi awal tab yang pertama kali dijalankan

Menyertakan chrome://welcome di properti first_run_tabs dari file initial_preferences kini tidak akan berpengaruh. Halaman ini dihapus karena halaman tersebut redundan dengan Pengalaman Pengaktifan Pertama yang dipicu di platform desktop.