Berikut hal yang perlu Anda ketahui:
- Gaya CSS lainnya untuk elemen
<details>. - Tata letak cetak yang lebih mudah dengan kotak margin halaman.
- Dan masih banyak fitur lainnya.
Saya Mariko Kosaka. Mari kita lihat apa saja yang baru untuk developer di Chrome 131.
Peningkatan Gaya untuk <details> dan <summary>
Anda kini memiliki lebih banyak opsi untuk menata gaya struktur elemen <details> dan <summary> guna membuat widget pengungkapan atau akordeon.
Perubahan yang diperkenalkan dalam rilis ini memungkinkan penggunaan properti display, dan menambahkan elemen pseudo ::details-content untuk mengubah gaya bagian yang diperluas dan diciutkan.
Secara historis, tidak mungkin mengubah jenis tampilan elemen details.
Batasan ini kini telah dilonggarkan, sehingga Anda dapat menggunakan hal-hal seperti tata letak petak atau fleksibel.
Dalam contoh akordeon eksklusif ini, yang dibuat dari beberapa elemen details, saat salah satu elemen details diperluas, kontennya akan ditempatkan di samping summary.
Hal ini dicapai dengan menggunakan tata letak fleksibel pada elemen details. Anda juga dapat mencoba lebih banyak pola tata letak dengan nilai tampilan lainnya seperti grid.
Baca artikel Bramus Opsi lainnya untuk menata gaya <details> untuk mendapatkan penjelasan yang lebih mendalam.
@page kotak margin
Dukungan untuk kotak margin halaman, saat mencetak dokumen web, atau mengekspornya sebagai PDF, telah ditambahkan.
Kotak margin halaman memungkinkan Anda menentukan konten di area margin halaman. Jadi, Anda dapat memberikan header dan footer kustom, bukan menggunakan header dan footer bawaan yang dihasilkan oleh browser.
Margin halaman ditentukan menggunakan aturan @page di CSS.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Tampilan dan konten kotak margin ditentukan dengan properti CSS di dalam aturan at yang mewakili 16 kotak margin menggunakan konten yang dihasilkan.
Untuk penomoran halaman, penghitung juga didukung dengan page untuk nomor halaman saat ini, dan pages untuk jumlah total halaman.
Baca artikel Rachel Menambahkan konten ke margin halaman web saat dicetak menggunakan CSS untuk mengetahui penjelasan yang lebih mendalam.
Dan banyak lagi!
Dan tentu saja masih banyak lagi.
- Dukungan untuk aset SVG eksternal untuk 'clip-path', 'fill', 'stroke', dan 'marker'.
- WebHID diaktifkan di dalam konteks pekerja khusus.
- Kontrol perilaku Emoji dengan properti CSS
font-variant-emoji.
Bacaan lebih lanjut
Bagian ini hanya membahas beberapa sorotan utama. Lihat link berikut untuk mengetahui perubahan tambahan di Chrome 131.
- Catatan rilis untuk Chrome 131.
- Yang baru di Chrome DevTools (131)
- Daftar perubahan repositori sumber Chromium
- Kalender rilis Chrome
Langganan
Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.
Saya Mariko Kosaka, dan segera setelah Chrome 132 dirilis, kami akan segera memberi tahu Anda tentang yang baru di Chrome.