Perubahan pewarisan untuk gaya pilihan CSS

Stephen Chenney

Dipublikasikan: 8 Oktober 2024

Mulai dari Chrome 131, pewarisan sorotan CSS berubah untuk ::selection dan Class semu ::target-text. Hal ini untuk menciptakan model yang lebih intuitif untuk pewarisan dan selaras dengan ::highlight, ::spelling-error yang baru ditambahkan dan Class pseudo ::grammar-error. Postingan ini menjelaskan perubahan tersebut, yang seharusnya tidak menyebabkan dampak yang terlihat untuk sebagian besar situs.

Gaya visual pilihan

Gaya tampilan teks yang dipilih dapat menyampaikan makna kepada pengguna, seperti tujuan konten yang dipilih atau ketidakmampuan untuk memilih teks sama sekali. GitHub, misalnya, memberi warna pada kode yang dipilih secara berbeda dari direktori yang dipilih karena ada berbagai struktur penetapan harga.

CSS mendukung gaya pilihan dengan ::selection elemen semu, salah satu dari seperangkat elemen semu yang dikenal sebagai menandai elemen semu. Elemen pseudo ini mengontrol cara teks muncul di berbagai tindakan yang didorong oleh pengguna, browser, atau skrip. Selain pilihan, Anda dapat menata gaya ejaan error (::spelling-error), error tata bahasa (::grammar-error), teks URL yang disematkan target (::target-text), dan sorotan yang dihasilkan skrip (::highlight).

Seperti halnya kumpulan properti CSS, perilaku pewarisan adalah hal penting yang perlu dipertimbangkan saat mendesain sebuah situs. Secara umum, developer mengharapkan properti CSS diwarisi melalui hierarki elemen DOM (misalnya, font), atau tidak diwarisi sama sekali (misalnya, background).

Perubahan pada perilaku pemilihan di Chrome 131

Pertimbangkan fragmen dokumen ini:

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

Deklarasi gaya fragmen memodifikasi warna teks yang dipilih, dengan satu aturan cocok dengan semua elemen dan satu aturan cocok dengan class "blue". Jika dipilih di Chrome 130 atau yang lebih lama, hasilnya adalah:

Jika dipilih di Chrome 131, hasilnya akan berubah menjadi:

Apa saja yang berubah? Perilaku pewarisan properti pilihan secara historis telah diterapkan melalui pewarisan elemen asal, dengan pemilihan menggunakan properti dari ::selection yang cocok dengan elemen yang dipilih. Chrome versi 130 dan yang lebih lama menggunakan model ini, dengan teks yang ditekankan tidak memiliki ::selection yang cocok karena .blue::selection hanya mencocokkan elemen dengan class "blue", yang tidak dimiliki oleh elemen <em>.

Chrome 131 memungkinkan perilaku baru dengan elemen mewarisi perilaku pemilihan dari induk. Dalam contoh sebelumnya, elemen <em> tidak memiliki ::selection cocok dengan dirinya sendiri, sehingga mewarisi warna pilihan elemen <p>. Ini adalah disebut sebagai pewarisan sorotan CSS dan Anda dapat mencobanya di langkah sebelumnya Versi Chrome dengan mengaktifkan fitur Platform Web Eksperimental di chrome://flags.

Situs yang mengandalkan properti pilihan yang tidak mewarisi cenderung akan mengalami perubahan dalam penampilan teks yang dipilih, tetapi bukti dari laporan {i>bug<i} menunjukkan adanya adalah beberapa kasus penggunaan untuk perilaku tersebut.

Properti Kustom CSS untuk dipilih masih berfungsi

Banyak situs menyimulasikan pewarisan sorotan CSS melalui penggunaan CSS kustom properti baru. Properti kustom diwarisi melalui hierarki elemen, sehingga memberikan hasil "inherit from parent" dengan cuplikan kode seperti ini:

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

Berikut adalah hasil saat dipilih di Chrome 130 dan 131:

Di sini, setiap elemen mewarisi beberapa nilai untuk properti --selection-color melalui hierarki elemen, dan warna ini digunakan saat teks dipilih. Elemen dengan class .blue dan turunannya berwarna biru saat dipilih, dan elemen lainnya berwarna hijau muda. Banyak situs menggunakan teknik ini dan ini adalah metode yang direkomendasikan di Stack Overflow.

Untuk mempertahankan kompatibilitas, model pewarisan sorotan CSS menetapkan bahwa ::selection (dan elemen semu sorotan CSS lainnya) mewarisi properti kustom nilai dari elemen asalnya (elemen yang sedang diterapkan ). Situs yang menggunakan metode ini seharusnya tidak terpengaruh oleh perubahan di Chrome 131.

Properti kustom yang ditentukan pada elemen pseudo ::selection itu sendiri diabaikan untuk menghindari perilaku pewarisan yang bersaing. Anda harus menentukan properti pada elemen itu sendiri, lalu mereferensikannya dalam elemen pseudo.

Pemilih Universal untuk ::selection menonaktifkan pewarisan sorotan

Situs yang tidak menggunakan properti kustom CSS mungkin telah menggunakan pemilih universal untuk menetapkan warna teks yang dipilih. Seperti CSS berikut, misalnya:

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Ini adalah hasilnya jika dipilih di Chrome 130 (dan yang lebih lama) serta Chrome 131 (dan yang lebih baru):

Pewarisan sorotan CSS tidak menyebabkan teks kedua yang ditekankan mewarisi warna biru dari induknya karena pemilih universal cocok dengan elemen <em> dan menerapkan warna sorotan universal, hijau muda.

Untuk mendapatkan manfaat pewarisan sorotan CSS, ubah pemilih universal agar hanya cocok dengan root, yang kemudian akan diwarisi oleh turunannya:

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Hasilnya di Chrome 131 akan terlihat seperti ini:

Jika situs Anda mengubah warna pilihan, tetapi tidak menggunakan properti kustom, kemungkinan Anda memiliki pemilih universal untuk pseudo ::selection. Kabar baik adalah situs Anda tidak akan rusak dengan perubahan ini di Chrome, tetapi Anda akan kehilangan manfaat ergonomis dari pewarisan sorotan.

Gaya visual ::target-text juga berubah

Semua perilaku dan perubahan yang dijelaskan di sini berlaku untuk elemen pseudo ::target-text seperti halnya untuk ::selection. Kasus penggunaan untuk lebih dari satu gaya teks target di satu situs terbatas, dan fitur ini cukup baru, sehingga perilaku ::target-text situs Anda kemungkinan besar tidak akan berubah.

Mengapa perubahan ini dilakukan?

Saat pseudo-elemen sorotan lainnya sedang dalam pengembangan, CSS Working Group memutuskan untuk menerapkan pewarisan dengan model pewarisan sorotan. Ini sudah menjadi metode dalam spesifikasi ::selection elemen semu, namun browser tidak menerapkannya. Pseudo-elemen non-pilihan menggunakan pewarisan sorotan, dengan pseudo-elemen diwariskan seolah-olah merupakan properti. Artinya, elemen mewarisi sorotan elemen pseudo dari induk dokumennya.

Demi konsistensi di semua pseudo sorotan, CSS Working Group menegaskan kembali dukungan untuk pewarisan sorotan untuk ::selection, dan browser berupaya meluncurkan perilaku baru, sambil mencoba untuk tidak merusak situs yang ada.

Cobalah

CodePen berikut menunjukkan perubahan tersebut. Coba di Chrome 131.