Baru di Chrome 110

Adriana Jara

Berikut hal yang perlu Anda ketahui:

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

Saya Adriana Jara. Mari kita pelajari 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 di bagian atas agar pengguna terus menikmati media, sambil berinteraksi dengan konten lain.

Dengan kelas semu css :picture-in-picture, Anda kini 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 pseudo-class lagi pada elemen video, untuk membuat elemen transparan agar menampilkan pesan dengan benar.

Mainkan contoh dan tingkatkan pengalaman video picture-in-picture Anda.

anggota manifes launch_handler.

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

Mari kita lihat contohnya: di lingkungan desktop, jika Anda menginstal aplikasi, lalu membukanya di browser, akan ada tombol untuk berpindah ke jendela aplikasi mandiri. Sebelumnya, satu-satunya perilaku yang mungkin adalah meluncurkan aplikasi di jendela baru.

Sekarang, penggunaan 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 ada dan membukanya (jika ada), bukan selalu meluncurkan jendela baru.

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

Iframe credentialless.

Salah satu tantangan terbesar dengan 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, halaman ini dimuat tanpa cookie. Iframe dimulai dengan cookie jar kosong.

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

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

Dan banyak lagi!

Dan tentu saja masih banyak lagi.

Web SQL kini dihapus dalam konteks yang tidak aman.

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

FileSystemHandle kini menyertakan metode remove().

Bacaan lebih lanjut

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

Langganan

Untuk terus mendapatkan 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 ada di sini untuk memberi tahu Anda apa saja yang baru di Chrome.