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 Anda 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, yang selalu berada di atas sehingga pengguna dapat terus menikmati media, sambil berinteraksi dengan konten lain.

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

Cuplikan di bawah menunjukkan cara menggunakan class picture-in-picture untuk menambahkan pesan ke penampung video yang mengingatkan pengguna bahwa video kini 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 aplikasi web diluncurkan. Misalnya, apakah aplikasi menggunakan jendela yang ada atau yang baru, dan apakah jendela yang dipilih diarahkan 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, dengan menggunakan anggota manifes launch_handler, aplikasi web 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. Hal ini memungkinkan penghapusan batasan 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 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 ditekan huruf awalnya ke baris teks berikutnya.

FileSystemHandle kini menyertakan metode remove().

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui 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 segera memberi tahu Anda tentang yang baru di Chrome.