Baru di Chrome 130

Pete LePage

Berikut ini hal yang perlu Anda ketahui:

Saya Pete LePage. Mari kita lihat apa saja yang baru untuk developer di Chrome 130.

Mendokumentasikan Picture-in-Picture

API picture-in-picture sangat berguna saat Anda ingin memisahkan video dari tab browser agar Anda dapat terus menonton video sambil berinteraksi dengan situs atau aplikasi lain. Namun, aplikasi ini hanya dapat memutar video.

Jendela picture-in-picture Spotify

Document picture-in-picture API menghilangkan batasan tersebut, sehingga Anda dapat membuat jendela picture-in-picture tempat Anda memiliki kontrol atas konten. Fitur ini sangat cocok untuk hal-hal seperti pemutar video kustom, konferensi video, dan aplikasi produktivitas. Saya menyukai apa yang telah dilakukan Spotify dengan fitur ini di pemutar web mereka. Saya mendapatkan jendela dengan gambar album untuk lagu saat ini, kontrol pemutaran, dan dapat dengan mudah menambahkan lagu ke favorit saya.

Untuk menggunakannya, minta jendela picture-in-picture dokumen baru. promise yang ditampilkan akan di-resolve dengan objek JavaScript jendela Picture-in-Picture. Kemudian, gunakan itu untuk menambahkan konten Anda ke jendela.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

Dengan properti preferInitialWindowPlacement baru, Anda dapat memberi tahu Chrome untuk selalu membuka jendela picture-in-picture di posisi dan ukuran defaultnya, alih-alih menggunakan kembali posisi atau ukuran jendela sebelumnya.

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

Lihat postingan François yang berjudul Picture-in-Picture for any Element untuk mengetahui detail selengkapnya.

Pernyataan bertingkat CSS

Penyusunan CSS memungkinkan selektor yang lebih pendek, pembacaan yang lebih mudah, dan lebih banyak modularitas dengan menyusun aturan di dalam aturan lainnya. Penyusunan CSS adalah Baseline Baru tersedia, dan telah tersedia selama hampir setahun.

Ada beberapa kasus ekstrem yang tidak berfungsi seperti yang diharapkan. Misalnya, dengan blok CSS berikut, Anda akan mengharapkan warna latar belakang menjadi hijau, karena muncul terakhir, tetapi ternyata merah.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Untuk memperbaiki kasus ekstrem seperti ini, grup kerja CSS memperkenalkan aturan deklarasi bertingkat, yang diterapkan di Chrome 130. Sekarang, blok CSS yang sama akan menghasilkan latar belakang hijau, seperti yang diharapkan. Jika Anda menyisipkan deklarasi kosong dengan aturan bertingkat, Anda harus memeriksa kembali kode Anda.

Baca artikel Bramus CSS nesting improves with CSSNestedDeclarations untuk penjelasan yang lebih mendalam.

box-decoration-break

Properti CSS box-decoration-break memungkinkan Anda menentukan cara fragmen elemen harus dirender saat dipecah di beberapa baris, kolom, atau halaman.

Tidak ada jeda baris

Misalnya, elemen ini terlihat bagus saat semuanya berada dalam satu baris.

Pemisah baris dengan slice

Saat konten dibagi di beberapa baris, dekorasi seperti latar belakang, bayangan kotak, batas, dan sebagainya akan terpotong, sehingga menciptakan tampilan yang cukup drastis.

Pemisah baris dengan clone

Dengan menambahkan box-decoration-break: clone, setiap fragmen dirender secara independen, sehingga menciptakan tampilan yang jauh lebih bagus.

Meskipun belum sepenuhnya Baseline, fitur ini tersedia di Chrome dan Firefox, serta memiliki awalan vendor di Safari.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Lihat dokumen box-decoration-break di MDN dan postingan Rachel The box-decoration-break property in Chrome 130 untuk mengetahui detail selengkapnya.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Periksa link berikut untuk mengetahui perubahan tambahan di Chrome 130.

Langganan

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

Saya Pete LePage, dan segera setelah Chrome 131 dirilis, kami akan hadir di sini untuk memberi tahu Anda tentang hal-hal baru di Chrome.