Grafik :has()
kelas semu adalah, hands-down, fitur CSS baru favorit saya. Saya tahu itu untuk banyak dari Anda juga, setidaknya bagi Anda yang mengikuti survei State of CSS. Kemampuan untuk menulis penyeleksi secara terbalik memberi kita lebih banyak kekuatan super yang tidak pernah terpikirkan sebelumnya.
Saya mengatakan "lebih banyak kekuatan super" karena sudah ada banyak sekali ide pintar yang sangat luar biasa yang diterbitkan oleh sekelompok orang super pintar, seperti:
Artikel ini bukan panduan definitif untuk :has()
. Ini juga bukan di sini untuk memuntahkan apa yang sudah dikatakan. Hanya saya (halo ๐) ikut-ikutan sejenak untuk membagikan beberapa cara yang paling mungkin saya gunakan :has()
dalam pekerjaan saya sehari-hariโฆ yaitu, setelah secara resmi didukung oleh Firefox yang sudah dekat.
Ketika itu terjadi, Anda bisa bertaruh saya akan mulai menggunakannya :has()
seluruh tempat. Berikut adalah beberapa contoh dunia nyata dari hal-hal yang saya buat baru-baru ini dan saya berpikir, โWah, ini akan jauh lebih baik sekali :has()
didukung penuh.โ
Hindari harus menjangkau di luar komponen JavaScript Anda
Pernahkah Anda membuat komponen interaktif yang terkadang perlu memengaruhi gaya di tempat lain di halaman? Ambil contoh berikut, di mana <nav>
adalah menu mega, dan membukanya akan mengubah warna file <header>
konten di atasnya.
Saya merasa perlu melakukan hal semacam ini sepanjang waktu.
Contoh khusus ini adalah komponen React yang saya buat untuk sebuah situs. Saya harus "menjangkau" bagian React halaman dengan document.querySelector(...)
dan beralih kelas pada <body>
, <header>
, atau komponen lain. Itu bukan akhir dari dunia, tapi rasanya agak menjijikkan. Bahkan di situs yang sepenuhnya Bereaksi (katakanlah situs Next.js), saya harus memilih antara mengelola a menuIsOpen
nyatakan jauh lebih tinggi di pohon komponen, atau lakukan pemilihan elemen DOM yang sama โ yang tidak terlalu React-y.
Dengan :has()
, masalahnya hilang:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Tidak perlu lagi mengotak-atik bagian lain dari DOM di komponen JavaScript saya!
Tabel striping UX yang lebih baik
Menambahkan "garis" baris alternatif ke tabel Anda bisa menjadi peningkatan UX yang bagus. Mereka membantu mata Anda melacak di baris mana Anda berada saat Anda memindai tabel.
Namun menurut pengalaman saya, ini tidak bekerja dengan baik pada tabel dengan hanya dua atau tiga baris. Jika Anda memiliki, misalnya, tabel dengan tiga baris di dalamnya <tbody>
dan Anda "melucuti" setiap baris "genap", Anda bisa berakhir hanya dengan satu garis. Itu tidak benar-benar layak untuk sebuah pola dan mungkin membuat pengguna bertanya-tanya apa yang istimewa dari satu baris yang disorot itu.
Menggunakan teknik ini di mana Penggunaan Bramus :has()
menerapkan gaya berdasarkan jumlah anak, kita dapat menerapkan garis-garis tabel ketika ada lebih dari, katakanlah, tiga baris:
Apa yang harus lebih menarik? Anda juga dapat memutuskan untuk melakukan ini hanya jika tabel memiliki setidaknya sejumlah kolom tertentu juga:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Hapus logika kelas bersyarat dari template
Saya sering perlu mengubah tata letak halaman tergantung pada apa yang ada di halaman. Ambil tata letak Grid berikut, di mana penempatan konten utama mengubah area grid tergantung pada apakah ada sidebar.
Itu sesuatu yang mungkin bergantung pada apakah ada halaman saudara yang disetel di CMS. Saya biasanya melakukan ini dengan logika templat untuk ditambahkan secara kondisional kelas pengubah BEM ke pembungkus tata letak untuk memperhitungkan kedua tata letak. CSS itu mungkin terlihat seperti ini (aturan responsif dan hal-hal lain dihilangkan untuk singkatnya):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
Dari segi CSS, ini baik-baik saja, tentu saja. Tapi itu membuat kode template sedikit berantakan. Bergantung pada bahasa template Anda, menambahkan banyak kelas secara kondisional bisa sangat buruk, terutama jika Anda harus melakukan ini dengan banyak elemen anak juga.
Bandingkan dengan a :has()
pendekatan berbasis:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
Sejujurnya, itu tidak jauh lebih baik dari segi CSS. Tetapi menghapus kelas pengubah bersyarat dari template HTML adalah kemenangan yang bagus jika Anda bertanya kepada saya.
Sangat mudah untuk memikirkan keputusan desain mikro :has()
- seperti kartu ketika memiliki gambar di dalamnya โ tapi menurut saya ini akan sangat berguna untuk perubahan tata letak makro ini juga.
Manajemen spesifisitas yang lebih baik
Jika Anda membaca artikel terakhir saya, Anda akan tahu bahwa saya adalah orang yang sangat spesifik. Jika, seperti saya, Anda tidak ingin skor spesifisitas Anda meledak saat menambahkan :has()
dan :not()
di seluruh gaya Anda, pastikan untuk menggunakan :where()
.
Itu karena kekhususan dari :has()
berdasarkan pada elemen paling spesifik dalam daftar argumennya. Jadi, jika Anda memiliki sesuatu seperti ID di sana, pemilih Anda akan sulit untuk ditimpa dalam kaskade.
Di sisi lain, kekhususan dari :where()
selalu nol, tidak pernah menambah skor spesifisitas.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Masa depan cerah
Ini hanyalah beberapa hal yang saya tidak sabar untuk dapat menggunakannya dalam produksi. CSS-Tricks Almanak memiliki banyak contoh juga. Apa yang Anda nantikan untuk dilakukan :has()
? Seperti apa contoh dunia nyata yang telah Anda temukan di mana :has()
akan menjadi solusi sempurna?
- Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
- Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
- Sumber: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- kemampuan
- Sanggup
- Tentang Kami
- atas
- Akun
- mempengaruhi
- Semua
- sudah
- selalu
- menakjubkan
- dan
- Lain
- Mendaftar
- pendekatan
- daerah
- argumen
- artikel
- berdasarkan
- karena
- Bertaruh
- Lebih baik
- antara
- Bit
- Hembusan
- dibangun di
- ikat
- Bisa Dapatkan
- kartu
- riam
- tertentu
- perubahan
- Perubahan
- anak
- Pilih
- kelas
- kelas-kelas
- cm
- kode
- Kolom
- komponen
- mengandung
- Konten
- bisa
- Kelas
- CSS
- keputusan
- definitif
- Tergantung
- Mendesain
- Tidak
- melakukan
- PENGHAKIMAN
- Dont
- turun
- elemen
- terutama
- dll
- Bahkan
- pERNAH
- Setiap
- contoh
- contoh
- pengalaman
- mata
- Favorit
- Fitur
- beberapa
- akhir
- Firefox
- berikut
- Depan
- dari
- sepenuhnya
- mendapatkan
- memberikan
- Pergi
- akan
- besar
- kisi
- grid-templat-area
- membimbing
- terjadi
- memiliki
- membantu
- di sini
- hi
- lebih tinggi
- Disorot
- HTML
- HTTPS
- SAYA AKAN
- ide-ide
- gambar
- perbaikan
- in
- interaktif
- IT
- JavaScript
- hanya satu
- Menjaga
- Jenis
- Tahu
- bahasa
- Terakhir
- tata ruang
- Mungkin
- sedikit
- melihat
- mencari
- Lot
- Makro
- terbuat
- Utama
- membuat
- pelaksana
- banyak
- mungkin
- saat
- lebih
- paling
- Mozilla
- Perlu
- kebutuhan
- New
- berikutnya
- Next.js
- biasanya
- jumlah
- Secara resmi
- ONE
- pembukaan
- Lainnya
- di luar
- bagian
- tertentu
- bagian
- pola
- Konsultan Ahli
- sempurna
- Tempat
- plato
- Kecerdasan Data Plato
- Data Plato
- mungkin
- menyajikan
- cukup
- Masalah
- Produksi
- diterbitkan
- mencapai
- Bereaksi
- Baca
- dunia nyata
- baru-baru ini
- menghapus
- responsif
- BARIS
- aturan
- Run
- Tersebut
- sama
- pemindaian
- seleksi
- set
- Share
- situs web
- pintar
- So
- larutan
- beberapa
- sesuatu
- di suatu tempat
- khusus
- tertentu
- kekhususan
- awal
- Negara
- garis
- Stripes
- gaya
- besar
- Didukung
- tabel
- Mengambil
- TD
- Template
- Grafik
- Negara
- Dunia
- hal
- hal
- pikir
- tiga
- di seluruh
- untuk
- ton
- terlalu
- SAMA SEKALI
- jalur
- benar
- upside
- us
- menggunakan
- Pengguna
- ux
- menunggu
- cara
- Apa
- apakah
- yang
- SIAPA
- menang
- tanya
- Kerja
- dunia
- bernilai
- akan
- menulis
- Kamu
- Anda
- zephyrnet.dll