Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 130

Pete LePage

Berikut hal yang perlu Anda ketahui:

Gambar dalam gambar dokumen 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 fitur lainnya.

Saya Pete LePage. Mari kita selami dan lihat apa 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 picture-in-picture 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

Penyusunan bertingkat 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 tanpa awalan www dengan aturan bertingkat, Anda harus memeriksa kembali kode Anda.

Baca artikel Bramus Peningkatan bertingkat CSS dengan CSSNestedDeclarations untuk mendapatkan 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 dalam satu baris.

Jeda 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.

Jeda 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 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 membahas 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.