Hai semua pengembang hebat di luar sana! Dalam posting ini kita akan mengeksplorasi penggunaan :has() dalam proyek web Anda berikutnya. :has() relatif baru tetapi telah mendapatkan popularitas di komunitas front-end dengan memberikan kontrol atas berbagai elemen di UI Anda. Mari kita lihat apa itu kelas semu dan bagaimana kita dapat memanfaatkannya.

Sintaksis

Grafik :has() Kelas semu CSS membantu menata elemen jika salah satu hal yang kita cari di dalamnya ditemukan dan diperhitungkan. Ini seperti mengatakan, “Jika ada sesuatu yang spesifik di dalam kotak ini, maka tata kotaknya seperti ini DAN hanya dengan cara ini.”

:has(<direct-selector>) {
  /* ... */
}

“Fungsionalnya :has() Kelas semu CSS mewakili sebuah elemen jika salah satu penyeleksi relatif yang diteruskan sebagai argumen cocok dengan setidaknya satu elemen ketika ditambatkan pada elemen ini. Kelas semu ini menyajikan cara memilih elemen induk atau elemen saudara sebelumnya sehubungan dengan elemen referensi dengan mengambil daftar pemilih relatif sebagai argumen.”

Untuk penjelasan yang lebih kuat, DND melakukannya dengan sempurna

Masalah Gaya

Di tahun-tahun yang lalu kami tidak memiliki cara untuk menata elemen induk berdasarkan anak langsung dari induk tersebut dengan CSS atau elemen berdasarkan elemen lain. Jika kita harus melakukan itu, kita perlu menggunakan beberapa JavaScript dan mengaktifkan/menonaktifkan kelas berdasarkan struktur HTML. :has() memecahkan masalah itu.

Katakanlah Anda memiliki elemen heading level 1 (h1) yaitu judul postingan atau semacamnya pada halaman daftar blog, lalu Anda memiliki heading level 2 (h2) yang langsung mengikutinya. H2 ini bisa menjadi sub-heading postingan. Jika itu h2 hadir, penting, dan langsung setelahnya h1, Anda mungkin ingin membuat h1 itu menonjol. Sebelumnya Anda harus menulis fungsi JS.

Cara Jadul – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Fungsi JS ini mencari semua h1 yang memiliki a h2 melanjutkannya, dan menerapkan kelas konten highlight untuk membuat h1 menonjol sebagai artikel penting.

Baru dan ditingkatkan dengan CSS modern yang semakin populer! Kemampuan yang dapat kita lakukan di browser telah berkembang pesat. Kita sekarang dapat memanfaatkan CSS untuk melakukan hal-hal yang biasanya kita lakukan dengan JavaScript, bukan semuanya, tapi beberapa hal.

Cara Sekolah Baru – CSS

h1:has(+ h2) {
    color: blue;
}

Lemparkan Beberapa :has() Di atasnya!

Sekarang Anda dapat menggunakan :has() untuk mencapai hal yang sama seperti fungsi JS. CSS ini memeriksa h1 apa pun dan menggunakan kombinator saudara memeriksa h2 yang mengikutinya, dan menambahkan warna biru pada teks. Di bawah ini adalah beberapa kasus penggunaan kapan :has() bisa berguna.

:memiliki Contoh Pemilih 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:memiliki Contoh Pemilih 2

Seringkali kita sebagai pekerja di web memanipulasi atau bekerja dengan gambar. Kita bisa saja menggunakan alat itu mendung menyediakan untuk memanfaatkan berbagai transformasi pada gambar kita, tapi biasanya kita ingin menambahkan drop shadow, radius batas, dan keterangan (jangan bingung dengan teks alternatif dalam atribut alt).

Contoh di bawah ini menggunakan :has() untuk melihat apakah suatu gambar atau gambar memiliki elemen figcaption dan jika memilikinya, ia menerapkan beberapa latar belakang dan radius batas untuk membuat gambar menonjol.

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Bisakah saya :has() itu?

Anda bisa melihatnya :has() memiliki dukungan besar di seluruh browser modern.

:has() di dalam komunitas!

Saya menghubungi jaringan saya di Twitter untuk melihat bagaimana rekan-rekan saya menggunakannya :has() dalam pekerjaan mereka sehari-hari dan inilah yang mereka katakan tentang hal itu.

“Salah satu contoh yang saya miliki adalah menata SVG tertentu dari paket pihak ketiga @saucedopen karena saya tidak bisa menatanya secara langsung.”

Ini apa Nick Taylor dari Saus Terbuka harus katakan tentang penggunaan :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

Loh terakhir kali saya menggunakannya, saya membangun fungsionalitas keyboard ke dalam tampilan pohon, jadi saya perlu mendeteksi status dan kelas elemen saudara, tetapi itu belum ada di Firefox jadi saya harus mencari solusi lain. 🫠

Biara Perini dari Nexcor Keamanan Pangan Technologies, Inc.

Sangat menyenangkan melihat bagaimana anggota komunitas menggunakan CSS modern untuk memecahkan masalah dunia nyata, dan juga seruan kepada Abbey yang menggunakannya untuk alasan aksesibilitas!

Hal yang perlu diingat

Ada beberapa poin penting yang perlu diingat saat menggunakan :has() Poin-poin direferensikan dari MDN.

• Kelas semu mengambil kekhususan dari pemilih paling spesifik dalam argumennya
• Jika :has() pseudo-class itu sendiri tidak didukung di browser, seluruh blok pemilih akan gagal kecuali :has() ada dalam daftar pemilih yang memaafkan, seperti di :is() dan :where()
• Grafik :has() kelas semu tidak dapat disarangkan di dalam kelas semu yang lain :has() 
• Elemen semu juga bukan penyeleksi yang valid di dalamnya :has() dan elemen semu bukanlah jangkar yang valid :has()

Kesimpulan

Memanfaatkan kekuatan CSS, termasuk fitur-fitur canggih seperti :has() kelas semu, memberdayakan kami untuk menciptakan pengalaman web yang luar biasa. Kekuatan CSS terletak pada rangkaian dan kekhususannya…bagian terbaiknya, memungkinkan kami memanfaatkan potensi penuhnya. Dengan memanfaatkan kemampuan CSS, kita dapat memajukan desain dan pengembangan web, membuka kemungkinan-kemungkinan baru, dan menciptakan antarmuka pengguna yang inovatif.

Link:

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• PlatoData.Jaringan Vertikal Generatif Ai. Berdayakan Diri Anda. Akses Di Sini.
• PlatoAiStream. Intelijen Web3. Pengetahuan Diperkuat. Akses Di Sini.
• PlatoESG. Karbon, teknologi bersih, energi, Lingkungan Hidup, Tenaga surya, Penanganan limbah. Akses Di Sini.
• PlatoHealth. Kecerdasan Uji Coba Biotek dan Klinis. Akses Di Sini.
• Sumber: https://css-tricks.com/the-power-of-has-in-css/