Chrome 133 beta

Rachel Andrew

Dipublikasikan: 15 Januari 2024

Kecuali jika dinyatakan lain, perubahan berikut berlaku untuk rilis saluran Chrome beta 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 adalah versi beta mulai 15 Januari 2024. Anda dapat mendownload versi terbaru 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

Mengimplementasikan penambahan ke attr() yang ditentukan di CSS Level 5, yang memungkinkan jenis selain <string> dan digunakan di semua properti CSS (selain dukungan yang ada untuk elemen pseudo content).

Cari tahu selengkapnya di CSS attr() mendapatkan upgrade.

Pseudo-class :open CSS

Class pseudo :open cocok dengan <dialog> dan <details> saat berada dalam status terbuka, dan cocok dengan <select> dan <input> saat berada dalam mode yang memiliki pemilih dan pemilih ditampilkan.

Kueri penampung status scroll CSS

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

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

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

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 scroll-state() CSS.

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 singkatan 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 spasi vertikal secara akurat menggunakan metrik font. Cari tahu lebih lanjut di text-box-trim CSS.

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 tumpukan popover bertingkat. Jadi, Anda dapat membuka popover hint yang tidak terkait saat tumpukan popover auto yang ada tetap terbuka.

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

Peningkatan posisi anchor dan pemanggil pop-up

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

Popover yang disusun bertingkat di dalam pemanggil tidak boleh memanggilnya kembali

Dalam kasus berikut, mengklik tombol akan mengaktifkan popover dengan benar, tetapi 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 klik popover memunculkan balon ke <button> dan mengaktifkan pemanggil, yang mengalihkan popover ke posisi tertutup. Hal ini kini telah berubah menjadi perilaku yang diharapkan.

Web API

Animation.overallProgress

Memberikan representasi yang mudah dan konsisten kepada developer tentang sejauh mana animasi telah berkembang di seluruh iterasinya dan terlepas dari sifat linimasanya. Tanpa properti overallProgress, Anda harus menghitung secara manual seberapa jauh animasi telah maju, dengan mempertimbangkan jumlah iterasi animasi dan apakah currentTime animasi adalah persentase dari total waktu (seperti dalam kasus animasi yang didorong scroll) atau jumlah waktu absolut (seperti dalam kasus animasi yang didorong waktu).

Metode pause() dari objek Atomics

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

Pelaporan hash CSP untuk skrip

Aplikasi web yang kompleks sering kali perlu melacak sub-resource yang didownload, untuk tujuan keamanan.

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

Fitur ini dibuat berdasarkan CSP dan Reporting API untuk melaporkan URL dan hash (untuk CORS/origin yang sama) 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 akan dipertahankan:

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

Mengekspos atribut attributionsrc di <area>

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

Selain itu, sebaiknya dukung atribut di <area>, karena elemen tersebut adalah platform navigasi kelas satu, dan Chrome sudah mendukungnya di platform lain <a> dan window.open

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

Waktu elemen dan entri LCP memiliki atribut renderTime, yang selaras dengan frame pertama tempat gambar atau teks di-paint.

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

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

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 Sistem File Bucket (juga dikenal sebagai Sistem File Pribadi Asal), 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 asal yang sama di dalamnya yang melebihi batas penggunaan CPU, kecuali jika:

  • Memberikan 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).
  • Menyimpan Kunci Web atau koneksi IndexedDB yang memblokir update versi atau transaksi pada koneksi lain.

Pembekuan terdiri dari menjeda eksekusi. Hal ini ditentukan secara formal di Page Lifecycle API.

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

Beberapa peta impor

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

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

Header Akses Penyimpanan

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

Mendukung pembuatan ClipboardItem dengan Promise<DOMString>

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

WebAssembly Memory64

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

​​Web Authentication API: Metode getClientCapabilities() PublicKeyCredential

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

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

Menambahkan format vertex tambahan yang tidak ada dalam rilis awal WebGPU karena kekurangan dukungan atau versi macOS lama (yang tidak lagi didukung oleh browser apa pun). Format vertex 1 komponen memungkinkan aplikasi hanya meminta data yang diperlukan, sedangkan sebelumnya aplikasi harus meminta setidaknya dua kali lebih banyak untuk jenis data 8 dan 16-bit. Format unorm8x4-bgra membuatnya sedikit lebih mudah untuk memuat warna vertex yang dienkode BGRA sekaligus 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 asal baru

Di Chrome 133, Anda dapat memilih untuk ikut serta dalam uji coba origin baru berikut.

Memilih untuk tidak membekukan tab dalam mode Penghemat Energi

Uji coba pilihan tidak ikut ini memungkinkan situs memilih untuk tidak membekukan perilaku Penghemat Energi yang disertakan dalam Chrome 133.

Penghentian dan penghapusan

Versi Chrome ini memperkenalkan penghentian 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 tidak lagi menggunakan satu fitur.

Menghentikan penggunaan batas maxInterStageShaderComponents WebGPU

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

  • Redundansi dengan maxInterStageShaderVariables: Batas ini sudah memiliki tujuan yang serupa, yaitu mengontrol jumlah data yang diteruskan di antara tahap shader.
  • Perbedaan kecil: Meskipun ada sedikit perbedaan dalam cara penghitungan kedua batas, perbedaan ini bersifat kecil dan dapat dikelola secara efektif dalam batas maxInterStageShaderVariables.
  • Penyederhanaan: Menghapus maxInterStageShaderComponents akan menyederhanakan antarmuka shader dan mengurangi kompleksitas bagi developer. Daripada mengelola dua batas terpisah dengan perbedaan yang halus, mereka dapat berfokus pada maxInterStageShaderVariables yang lebih lengkap dan diberi nama yang sesuai.

Rilis Chrome ini menghapus dua fitur.

Sebelumnya, saat resource diambil sebelumnya 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 perlu menyertakan header penyimpanan ke dalam cache yang sesuai (Cache-Control atau Expires) untuk melihat manfaat dari <link rel=prefetch>.

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

Menghapus pemicu halaman Sambutan Chrome dengan tab preferensi awal saat pertama kali dijalankan

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