Yang baru di Chrome 131

Mariko Kosaka
X

Berikut hal yang perlu Anda ketahui:

Saya Marik Kosaka. Mari kita lihat apa saja yang baru untuk developer di Chrome 131.

Pewarisan sorotan CSS

Pewarisan sorotan CSS berubah untuk class semu ::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 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.

Teks yang ditandai dengan warna merah muda

Hal ini karena diterapkan menggunakan model pewarisan elemen asal. Jadi, pseudo-class ::selection dalam hal ini hanya mencocokkan elemen dengan class biru, yang tidak dimiliki elemen di dalam paragraf ini.

Dengan perubahan pewarisan sorotan, saat teks yang sama dipilih di Chrome 131, warna teks akan berubah menjadi biru.

Teks yang ditandai dengan warna 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, Anda tidak dapat 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.

Widget akordeon dengan tata letak Flex

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

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

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.