Bagaimana :has() Pseudo-Class Menghapuskan Keperluan untuk Hacks JavaScript dalam CSS

Ingat masa anda perlu menggayakan elemen induk berdasarkan anak-anaknya, dan anda akhirnya menulis sekumpulan JavaScript hanya untuk menambah kelas mudah? Nah, hari-hari itu akhirnya di belakang kita! Kelas pseudo CSS :has() ada di sini untuk menyelamatkan hari, menukar permainan untuk pembangun bahagian hadapan di mana-mana sahaja.

Apa Yang Kecoh :has()?

Fikirkan :has() sebagai bola kristal CSS anda – ia membolehkan anda melihat ke dalam elemen untuk menyemak kandungannya. Ingin menggayakan div secara berbeza apabila ia mempunyai imej di dalamnya? Ia semudah menulis div:has(> img). Tiada JavaScript diperlukan!

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

Kebanyakan penyemak imbas moden kini menyokong :has(), walaupun pengguna Internet Explorer (jika anda masih perlu menyokongnya) memerlukan sandaran. Tetapi jangan biarkan perkara itu menghalang anda – peningkatan progresif adalah rakan anda di sini!

Cara Lama lwn Kehangatan Baru

Mari kita bincangkan beberapa senario biasa yang pernah membuatkan kita gila. Ingat ini?

Tarian Pengesahan Medan Borang

Cara Lama:

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

Cara Baharu:

.form-group:has(input:invalid) {
  border-color: red;
  background: #fff8f8;
}

Tiada lagi pendengar acara atau togol kelas – hanya CSS perisytiharan tulen. Cantik kan?

Pengubahsuaian Menu Jatuh Turun

Kami semua pernah ke sana – cuba menggayakan bekas lungsur apabila menunya dibuka. Sebelum ini, anda memerlukan JavaScript untuk menogol kelas ke atas dan ke bawah pepohon DOM.

Pendekatan JavaScript Lama:

const dropdown = document.querySelector('.dropdown');
const menu = dropdown.querySelector('.menu');

menu.addEventListener('click', () => {
  dropdown.classList.toggle('is-open');
});

Pendekatan CSS Baharu:

.dropdown:has(.menu:focus-within) {
  background: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Helah Sihir Dunia Sebenar dengan :has()

Mari kita lihat beberapa contoh praktikal di mana :has() benar-benar bersinar:

1. Galeri Imej Pintar

Mahu galeri anda melaraskan reka letaknya berdasarkan jenis kandungan yang terkandung di dalamnya? Peasy mudah!

.gallery:has(img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery:has(video) {
  display: flex;
  flex-direction: column;
}

Anda boleh menyepadukan pautan ke artikel Medium ke dalam artikel baharu anda dengan menggunakannya sebagai rujukan, petikan atau sumber inspirasi. Begini cara anda boleh memasukkannya dengan berkesan:

Borang interaktif, menu lungsur turun dan pengurusan negeri adik-beradik hanyalah beberapa contoh tempat CSS kini menerajui. Seperti yang dinyatakan dalam karya Medium yang berwawasan ini, teknik moden seperti :has() membenarkan CSS mengurus tugasan ini secara langsung tanpa bergantung pada JavaScript.

2. Borang Ketergantungan Medan

Perlu menyerlahkan keseluruhan bahagian apabila kotak pilihan ditandakan? Tiada masalah!

.section:has(input[type="checkbox"]:checked) {
  background: #e8f4ff;
  padding: 1rem;
  border-radius: 4px;
}

3. Pengendalian Negeri Kosong

Ingin menunjukkan mesej apabila bekas kosong? :has() telah mendapat sokongan anda:

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

Kemenangan Prestasi

Berikut ialah perkara tentang menggunakan :has() dan bukannya JavaScript: ia bukan hanya tentang menulis kurang kod. Halaman anda sebenarnya akan berprestasi lebih baik kerana:

1. Enjin gaya penyemak imbas mengendalikan semua kerja secara asli
2. Tiada overhed pelaksanaan JavaScript
3. Tiada susun atur yang meronta-ronta daripada penambahan/penyingkiran kelas berterusan
4. Kurang pendengar acara menyumbat halaman anda

Amalan Terbaik dan Gotchas

Walaupun :has() hebat, terdapat beberapa perkara yang perlu diingat:

1. Pastikan ia mudah
   Jangan berlebihan dengan pemilih yang kompleks. Hanya kerana anda boleh menulis div:has(> span:has(> img)):has( p) tidak bermakna anda patut!

2. Peningkatan Progresif
   Sentiasa mempunyai sandaran yang wajar untuk penyemak imbas yang tidak menyokong :has():
   

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

1. Pertimbangan Prestasi Walaupun :has() biasanya berprestasi, pemilih yang sangat kompleks masih boleh memberi kesan kepada pemaparan. Pantau panel prestasi DevTools anda jika anda menggunakannya secara meluas.

Membungkus

Kelas pseudo :has() bukan sekadar ciri CSS baharu – ia merupakan anjakan paradigma dalam cara kami mengendalikan perhubungan ibu bapa-anak dalam helaian gaya kami. Ia membantu kami menulis kod yang lebih boleh diselenggara, meningkatkan prestasi dan yang paling penting, ia membolehkan CSS melakukan perkara terbaik yang CSS: mengendalikan penggayaan secara deklaratif.

Jadi pada masa akan datang anda mencapai JavaScript untuk menogol kelas pada elemen induk, ingat: mungkin terdapat penyelesaian yang lebih mudah dan elegan dengan :has(). Cubalah – kod anda (dan pengguna anda) akan berterima kasih!

Ingat, sementara sokongan penyemak imbas baik dan semakin baik, sentiasa semak caniuse.com untuk mendapatkan maklumat keserasian terkini. Dan jangan takut untuk mencuba – begitulah cara kita semua belajar dan berkembang sebagai pembangun!

Atas ialah kandungan terperinci Bagaimana :has() Pseudo-Class Menghapuskan Keperluan untuk Hacks JavaScript dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!