Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 130

Pete LePage

Berikut hal yang perlu Anda ketahui:

Dokumentasi picture-in-picture memberi Anda lebih banyak kontrol atas jendela picture-in-picture.
Deklarasi Bertingkat CSS memperbaiki beberapa kasus ekstrem yang rumit.
Anda dapat menentukan perilaku dekorasi pada elemen yang dibagi di beberapa baris.
Dan masih banyak lainnya.

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

Mendokumentasikan Picture-in-Picture

API picture-in-picture sangat cocok jika Anda ingin memunculkan video dari tab browser agar dapat memantau video saat berinteraksi dengan situs atau aplikasi lain. Namun, fitur ini hanya berfungsi untuk video.

Jendela picture-in-picture Spotify

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

Untuk menggunakannya, minta jendela gambar-dalam-gambar dokumen baru. promise yang ditampilkan akan di-resolve dengan objek JavaScript jendela Picture-in-Picture. Kemudian, gunakan untuk menambahkan konten 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, bukan 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 Picture-in-Picture untuk Elemen apa pun dari François untuk mengetahui detail selengkapnya.

Pernyataan bertingkat CSS

Penetasan CSS memungkinkan pemilih yang lebih pendek, pembacaan yang lebih mudah, dan lebih modular dengan menyusun aturan di dalam aturan lainnya. Penyusunan CSS adalah Dasar Pengukuran yang Baru tersedia, dan telah tersedia selama hampir satu tahun.

Ada beberapa kasus ekstrem yang tidak berfungsi seperti yang diharapkan. Misalnya, dengan blok CSS berikut, Anda akan mengharapkan warna latar belakang menjadi hijau, karena warna ini muncul terakhir, tetapi warnanya 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 menghasilkan latar belakang hijau, seperti yang diharapkan. Jika Anda menyisipkan deklarasi kosong dengan aturan bertingkat, Anda harus memeriksa kembali kode Anda.

Lihat artikel Bramus Peningkatan tingkatan CSS dengan 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 jika semuanya berada di satu baris.

Pemisah baris dengan slice

Saat konten dibagi menjadi beberapa baris, dekorasi seperti latar belakang, bayangan kotak, batas, dan sebagainya akan dipotong, sehingga menghasilkan tampilan yang cukup drastis.

Pemisah baris dengan clone

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

Meskipun tidak sepenuhnya Baseline, fitur ini tersedia di Chrome dan Firefox, serta diawali dengan 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 Properti box-decoration-break di Chrome 130 untuk mengetahui detail selengkapnya.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Setelah beberapa kali gagal, penampung scroll yang dapat difokuskan keyboard akhirnya muncul.
WebGPU mendapatkan penggabungan sumber ganda.
Dan serial web mendapatkan atribut yang terhubung.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Lihat link berikut untuk mengetahui perubahan tambahan di Chrome 130.

Untuk terus 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 langsung memberi tahu Anda tentang yang baru di Chrome.