Penambahan kecil pada sintaksis pemilih CSS ini akan berdampak besar.
Saat menulis CSS, terkadang Anda akan memiliki daftar pemilih yang panjang untuk ditargetkan
beberapa elemen dengan aturan gaya yang sama. Misalnya, jika Anda ingin menyesuaikan warna tag <b>
yang ditemukan di dalam elemen judul, Anda dapat menulis:
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
color: hotpink;
}
Sebagai gantinya, Anda dapat menggunakan :is()
dan meningkatkan keterbacaan sekaligus menghindari
pemilih:
:is(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
Kejelasan dan kemudahan pemilih yang lebih pendek hanyalah sebagian dari nilai yang
:is()
dan :where()
dibawa ke CSS. Dalam posting ini, Anda akan
menemukan {i>syntax<i}
dan nilai dari kedua pemilih
pseudo fungsional ini.
Kompatibilitas browser
:is()
:where()
Temui :is()
dan :where()
Ini adalah pemilih class semu fungsional. Perhatikan ()
di bagian akhir dan
mereka memulainya dengan :
. Anggap ini sebagai panggilan fungsi dinamis runtime yang
mencocokkan elemen. Saat menulis CSS, CSS memberi Anda cara untuk mengelompokkan elemen bersama-sama
di tengah, awal atau akhir pemilih. Parameter ini juga dapat mengubah spesifitas,
sehingga Anda dapat membatalkan atau meningkatkan spesifitas.
Pengelompokan pemilih
Apa pun yang dapat dilakukan :is()
terkait pengelompokan, :where()
juga dapat melakukannya. Ini
termasuk digunakan di mana saja dalam pemilih, {i>nesting<i} dan {i>stacking<i}. Fleksibilitas CSS penuh yang Anda kenal dan sukai. Berikut beberapa contohnya:
/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
/* in the middle */
article :is(header,footer) > p {
color: gray;
}
/* at the end */
.dark-theme :where(button,a) {
color: rebeccapurple;
}
/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
color: rebeccapurple;
}
/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
text-transform: uppercase;
}
/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
font-weight: 900;
}
Masing-masing contoh pemilih di atas menunjukkan fleksibilitas dari keduanya
kelas semu fungsional. Untuk menemukan area kode Anda yang bisa mendapatkan manfaat dari
:is()
atau :where()
, cari pemilih dengan beberapa koma dan pemilih
pengulangan.
Menggunakan pemilih yang sederhana dan kompleks dengan :is()
Untuk mempelajari lagi pemilih, lihat modul pemilih di Learn CSS. Berikut beberapa contoh pemilih sederhana dan kompleks untuk membantu menggambarkan kemampuan:
article > :is(p,blockquote) {
color: black;
}
:is(.dark-theme.hero > h1) {
font-weight: bold;
}
article:is(.dark-theme:not(main .hero)) {
font-size: 2rem;
}
Sejauh ini, :is()
dan :where()
dapat dipertukarkan secara sintaksis. Sekarang saatnya
melihat perbedaannya.
Perbedaan antara :is()
dan :where()
Jika menyangkut kekhususan, :is()
dan :where()
sangat berbeda. Untuk
mempelajari kekhususan, lihat modul kekhususan di Belajar
CSS.
Singkatnya
:where()
tidak memiliki kekhususan.:where()
mengurangi semua kekhususan dalam daftar pemilih yang diteruskan sebagai parameter fungsional. Ini adalah peristiwa pertama jenis pemilih.:is()
mengambil kekhususan pemilih yang paling spesifik.:is(a,div,#id)
memiliki skor kekhususan ID, 100 poin.
Menggunakan pemilih spesifitas tertinggi dari daftar hanya menjadi masalah bagi saya saat saya terlalu bersemangat untuk melakukan pengelompokan. Saya selalu dapat meningkatkan keterbacaan dengan memindahkan pemilih dengan spesifitas tinggi ke pemilih sendiri yang tidak akan terlalu berdampak. Berikut adalah contohnya:
article > :is(header, #nav) {
background: white;
}
/* better as */
article > header,
article > #nav {
background: white;
}
Dengan :where()
, saya menunggu untuk melihat library menawarkan versi tanpa
spesifikasi. Kompetisi kekhususan antara gaya penulis dan perpustakaan
{i>style<i} bisa berakhir. Tidak akan ada kekhususan untuk bersaing saat menulis CSS.
CSS telah mengerjakan fitur pengelompokan seperti ini selama beberapa waktu
sekali, tapi masih menjadi wilayah yang belum terjamah. Selamat membuat
stylesheet yang lebih kecil
dan menghapus koma.
Foto oleh Markus Winkler di Unsplash