Baru di Chrome 110

Adriana Jara

Berikut hal yang perlu Anda ketahui:

  • Tambahkan gaya kustom ke elemen picture-in-picture dengan class semu :picture-in-picture yang baru.
  • Tetapkan perilaku peluncuran aplikasi web dengan launch_handler dalam manifes Anda.
  • gunakan atribut credentialless di iframe untuk menyematkan konten pihak ketiga yang tidak menetapkan Kebijakan Penyemat Lintas Asal
  • Dan masih banyak lagi.

Saya Adriana Jara. Mari selami dan lihat apa saja yang baru untuk developer di Chrome 110.

:class pseudo picture-in-picture

Dengan Picture-in-Picture API, situs dapat membuat jendela video mengambang, selalu berada di atas sehingga pengguna terus menggunakan media, sambil berinteraksi dengan konten lain.

Kini dengan class pseudo css :picture-in-picture, Anda dapat menambahkan gaya ke elemen untuk meningkatkan pengalaman.

Cuplikan di bawah ini menunjukkan cara menggunakan class picture-in-picture untuk menambahkan pesan ke penampung video yang mengingatkan pengguna bahwa video sekarang diputar di tempat lain.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Gunakan class pseudo lagi pada elemen video untuk membuat elemen transparan agar menampilkan pesan dengan benar.

Bermainlah dengan contoh dan tingkatkan pengalaman video picture-in-picture Anda.

anggota manifes launch_handler.

Launch Handler API memungkinkan Anda mengontrol cara aplikasi web diluncurkan. Misalnya, apakah aplikasi menggunakan jendela yang sudah ada atau jendela baru, dan apakah jendela yang dipilih akan diarahkan ke URL peluncuran.

Mari kita lihat contohnya: di lingkungan desktop, jika Anda menginstal aplikasi dan kemudian membukanya di browser, ada tombol untuk berpindah ke jendela aplikasi {i>standalone<i}. Sebelumnya, satu-satunya perilaku yang memungkinkan adalah meluncurkan aplikasi di jendela baru.

Sekarang, aplikasi web anggota manifes launch_handler dapat menyesuaikan perilaku peluncurannya.

Misalnya, cuplikan di bawah menyebabkan semua peluncuran aplikasi web ini berfokus pada jendela aplikasi yang sudah ada dan membuka jendela aplikasi tersebut (jika ada), bukan selalu meluncurkan jendela baru.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

Iframe credentialless.

Salah satu tantangan terbesar pada isolasi lintas origin adalah semua iframe lintas origin harus men-deploy COEP dan CORP . Iframe tanpa header tersebut tidak akan dimuat oleh browser.

Atribut credentialless membantu menyematkan iframe pihak ketiga yang tidak menetapkan header ini.

Dengan credentialless, iframe dimuat dari konteks kosong yang berbeda. Secara khusus, URL dimuat tanpa cookie. Iframe dimulai dengan stoples cookie kosong.

Demikian pula, API penyimpanan seperti LocalStorage, CacheStorage, dan sebagainya, memuat dan menyimpan data di partisi efemeral baru. Semua penyimpanan ini akan dihapus setelah dokumen tingkat atas dihapus muatannya. Tindakan ini memungkinkan penghapusan pembatasan COEP.

Temukan informasi selengkapnya di artikel ini untuk menggunakan credentialless dengan aman guna memuat konten pihak ketiga ke iframe Anda.

Dan banyak lagi!

Dan tentu masih banyak lagi.

Web SQL kini dihapus dalam konteks yang tidak aman.

Properti initial-letter CSS menyediakan cara untuk menetapkan jumlah baris yang harus dimasukkan huruf awal ke dalam baris teks berikutnya.

FileSystemHandle kini menyertakan metode remove().

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 110.

Langganan

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

Saya Adriana Jara, dan segera setelah Chrome 111 dirilis, saya akan berada di sini untuk memberi tahu Anda apa saja yang baru di Chrome.