Berikut hal yang perlu Anda ketahui:
- Pewarisan Sorotan CSS berubah.
- Gaya CSS lainnya untuk elemen
<details>
. - Tata letak cetak yang lebih mudah dengan kotak margin halaman.
- Dan masih banyak lagi.
Saya Marik Kosaka. Mari kita lihat apa saja yang baru untuk developer di Chrome 131.
Pewarisan sorotan CSS
Pewarisan sorotan CSS berubah untuk pseudo-class ::selection
dan ::target-text
. Hal ini menciptakan model yang lebih intuitif untuk pewarisan gaya dan selaras dengan pseudo-class ::highlight
, ::spelling-error
, dan ::grammar-error
yang baru ditambahkan.
Pikirkan tentang cuplikan kode ini dengan teks yang ditekankan.
p {
color: deeppink;
}
.blue::selection {
color: blue;
}
<p class="blue">
This is
<em>emphasized</em>
text.
</p>
Di versi Chrome sebelumnya, saat Anda memilih teks yang ditekankan, warna teks tidak berubah menjadi biru meskipun menetapkan pseudo-class ::selection
pada elemen paragraf induk.
Hal ini karena diterapkan menggunakan model pewarisan elemen asal. Jadi, class semu ::selection
dalam kasus ini hanya mencocokkan elemen dengan class biru, yang tidak dimiliki oleh elemen di dalam paragraf ini.
Dengan perubahan pewarisan sorotan, saat teks yang sama dipilih di Chrome 131, warna teks akan berubah menjadi biru.
Ada beberapa perubahan lainnya yang terkait dengan hal ini, jadi pastikan untuk membaca Perubahan pewarisan untuk gaya visual pemilihan CSS yang ditulis oleh Stephen Chenney dari Igalia, yang mengerjakan fitur ini.
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 menata gaya bagian yang diperluas dan diciutkan.
Secara historis, mengubah jenis tampilan elemen details
tidak mungkin dilakukan.
Pembatasan ini sekarang telah dilonggarkan, memungkinkan Anda 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 isi kotak margin ditentukan dengan properti CSS di dalam at-rules 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 resource 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
Artikel ini hanya mencakup beberapa sorotan utama. Periksa link berikut untuk melihat 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.