Baru di Chrome 116

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari kita lihat apa saja yang baru untuk developer di Chrome 116.

Mendokumentasikan Picture-in-Picture API.

Document Picture-in-Picture API memungkinkan Anda membuka jendela yang selalu berada di atas yang dapat diisi dengan konten HTML arbitrer.

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

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

  • Jendela Picture-in-Picture mengambang di atas jendela lain.
  • Jendela Picture-in-Picture tidak pernah lebih lama dari jendela pembuka.
  • Jendela Picture-in-Picture tidak dapat dibuka.
  • Posisi jendela Picture-in-Picture tidak dapat ditetapkan oleh situs.

HTML berikut menyiapkan pemutar video kustom 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 yang 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 terkait stylesheet yang tidak ada.

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

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

Pernyataan yang digarisbawahi dengan tooltip di panel Sumber.

  • Konsol, selain link ke permintaan yang gagal, kini menyediakan link ke baris yang tepat yang mereferensikan stylesheet yang gagal dimuat.

Konsol menyediakan link ke baris yang sama persis dengan pernyataan yang bermasalah.

Panel Network secara konsisten mengisi kolom Initiator dengan link ke baris persis yang merujuk ke 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 mengetahui semua detail dan informasi selengkapnya tentang DevTools di Chrome 116.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Jalur gerakan 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 untuk ditambahkan hanya dalam CSS.
  • Fetch API kini dapat digunakan dengan pembaca Buffer Bawa Sendiri, sehingga mengurangi overhead dan salinan pembersihan sampah, serta meningkatkan responsivitas bagi pengguna.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 116.

Langganan

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

Saya Adriana Jara, dan segera setelah Chrome 117 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.