Baru di Chrome 116

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari selami dan lihat hal-hal baru untuk developer di Chrome 116.

API Picture-in-Picture Dokumen.

Document Picture-in-Picture API memungkinkan pengguna membuka jendela yang selalu berada di atas dan bisa diisi dengan konten HTML arbitrer.

Jendela Picture-in-Picture yang memutar video cuplikan Sintel.
Jendela Picture-in-Picture dibuat dengan Document Picture-in-Picture API (demo).

Jendela Picture-in-Picture di Document Picture-in-Picture API mirip dengan jendela asal sama kosong yang dibuka menggunakan window.open(), dengan beberapa perbedaan:

  • Jendela Picture-in-Picture mengambang di atas jendela lain.
  • Jendela Picture-in-Picture tidak pernah aktif lebih lama dibandingkan jendela yang terbuka.
  • Jendela Picture-in-Picture tidak dapat dibuka.
  • Posisi jendela Picture-in-Picture tidak dapat disetel oleh situs.

HTML berikut menyiapkan pemutar video khusus dan elemen tombol untuk membuka pemutar video di jendela Picture-in-Picture.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

JavaScript berikut memanggil documentPictureInPicture.requestWindow() saat pengguna mengklik tombol untuk membuka jendela Picture-in-Picture kosong. Promise yang ditampilkan diselesaikan dengan objek JavaScript jendela Picture-in-Picture. Pemutar video dipindahkan ke jendela tersebut menggunakan append().

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Lihat Picture-in-picture untuk elemen apa pun untuk mengetahui detail dan contoh selengkapnya.

DevTools tidak memiliki peningkatan proses debug stylesheet.

DevTools mendapatkan sejumlah peningkatan untuk mengidentifikasi dan men-debug masalah dengan stylesheet yang tidak ada.

Pertama: hierarki Sumber > Halaman sekarang hanya menampilkan stylesheet yang berhasil di-deploy dan dimuat untuk meminimalkan kebingungan.

Selain itu, Sumber > Editor kini menggarisbawahi dan menampilkan tooltip error inline di samping pernyataan gagal, @import,url(), dan href.

Pernyataan yang digarisbawahi dengan tooltip di panel Sumber.

  • Konsol, selain link ke permintaan yang gagal, sekarang menyediakan link ke baris persis yang mereferensikan stylesheet yang gagal dimuat.

Konsol memberikan link ke baris yang tepat yang berisi pernyataan bermasalah.

Panel Network secara konsisten mengisi kolom Inisiator dengan link ke baris yang tepat yang mereferensikan stylesheet yang gagal dimuat.

Panel Issues mencantumkan semua masalah pemuatan stylesheet, termasuk URL yang rusak, permintaan yang gagal, dan pernyataan @import yang salah tempat.

Panel Masalah dengan link ke sumber dan permintaan.

Lihat yang baru di DevTools untuk semua detail dan informasi selengkapnya tentang DevTools di Chrome 116.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Motion path memungkinkan penulis memosisikan objek grafis apa pun dan menganimasikannya di sepanjang jalur yang ditentukan oleh developer.
  • Properti display dan content-visibility kini didukung dalam animasi keyframe, yang memungkinkan animasi keluar ditambahkan hanya di CSS.
  • Fetch API kini dapat digunakan dengan Bring Your Own Buffer Reader, yang mengurangi overhead dan penyalinan sampah memori, serta meningkatkan responsivitas bagi pengguna.

Bacaan lebih lanjut

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

Langganan

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

Halo Adriana Jara, dan segera setelah Chrome 117 dirilis, saya akan langsung memberi tahu Anda apa yang baru di Chrome!