Meneroka CSS baru: adalah () dan: di mana () kelas pseudo

: adalah () dan: di mana () adalah kelas pseudo CSS yang berkuasa dan sintaktik yang memudahkan penulisan pemilih dan menyelesaikan masalah kekhususan. 1 .: IS () boleh mengumpulkan pelbagai pemilih, mengurangkan kod pendua dan mengekalkan kekhususan asal, dan sesuai untuk senario di mana kebolehbacaan dan struktur yang jelas diperlukan; 2.: Di mana () sintaks adalah serupa dengan fungsi, tetapi kekhususannya selalu sifar, yang sangat sesuai untuk menetapkan gaya lalai yang dapat ditulis semula dengan mudah, dan sering digunakan dalam merancang sistem atau perpustakaan komponen; 3. Kedua -dua pemilih kompleks sokongan dan struktur bersarang untuk meningkatkan pemeliharaan kod; 4. Pelayar yang menyokong penyemak imbas moden dengan baik, dan persekitaran lama dapat dipertingkatkan secara beransur -ansur. Penggunaan yang betul dari kedua-dua kelas pseudo ini menjadikan CSS lebih fleksibel, teguh dan mudah untuk skala.

CSS secara senyap-senyap mendapat lebih kuat-dan sedikit lebih elegan-dengan pengenalan :is() dan :where() kelas pseudo. Ini bukan hanya gula sintaksis; Mereka menyelesaikan titik kesakitan sebenar secara bertulis dan mengekalkan pemilih CSS. Jika anda pernah mendapati diri anda mengulangi senarai pemilih yang panjang atau berjuang dengan isu-isu tertentu, kedua-dua kelas pseudo ini berada di sini untuk membantu.

Mari kita pecahkan apa yang mereka lakukan, bagaimana mereka berbeza, dan mengapa anda mahu mula menggunakannya.

Apa :is() tidak (dan mengapa ia berguna)

:is() adalah kelas pseudo CSS yang mengambil senarai pemilih dan sepadan dengan mana-mana elemen yang sesuai dengan sekurang-kurangnya satu pemilih di dalamnya. Fikirkannya sebagai cara untuk mengumpulkan pemilih tanpa mengulangi corak yang sama berulang kali.

Sebelum :is() , anda mungkin menulis sesuatu seperti ini:

 .card: hover,
.SIDEBAR: Hover,
.NAV-LINK: Hover,
.Modal-Header: Hover {
  Kelegapan: 0.8;
}

Itu berulang -ulang dan sukar untuk dikekalkan. Dengan :is() , anda boleh memudahkannya:

 : adalah (.card, .sideBar, .nav-link, .modal-header): hover {
  Kelegapan: 0.8;
}

Ini lebih bersih, lebih mudah dibaca, dan lebih mudah dikemas kini. Hanya tambahkan atau keluarkan kelas dari senarai di dalam :is() .

Ia juga berfungsi dengan pemilih yang lebih kompleks:

 : adalah (header, utama, footer) H1 {
  saiz font: 2rem;
}

Ini menggunakan gaya untuk elemen h1 di dalam header , main , atau footer .

Manfaat Utama :: :is() mengikuti peraturan khusus biasa - Spesifikasi ditentukan oleh pemilih yang paling spesifik dalam senarai. Jadi jika salah satu item dalam :is() adalah #id , pemilih keseluruhan mendapat spesifik yang tinggi.

Bagaimana :where() berbeza (dan bila menggunakannya)

:where() kelihatan dan berfungsi hampir sama seperti :is() - ia juga mengambil senarai pemilih dan sepadan dengan apa -apa yang dikenakan. Tetapi inilah perbezaan kritikal :

:where() selalu mempunyai kekhususan sifar .

Ini bermakna tidak kira apa yang anda masukkan ke dalam :where() , ia tidak akan menambah berat badan khusus kepada pemilih.

Ini sangat berguna untuk gaya lalai atau corak semula/utiliti , di mana anda ingin menentukan gaya asas yang mudah ditimpa kemudian.

Sebagai contoh, perpustakaan UI mungkin menetapkan gaya butang lalai:

 : di mana (butang, [peranan = "butang"], .btn) {
  Padding: 0.5em 1em;
  Sempadan: 1px pepejal #ccc;
  Latar Belakang: #F0F0F0;
  Radius sempadan: 4px;
}

Kerana :where() mempunyai kekhususan sifar, peraturan kelas yang mudah kemudian di CSS dengan mudah dapat mengatasinya:

 .breamary-button {
  Latar Belakang: Biru;
  Warna: Putih;
}

Tanpa :where() , anda sering perlu menggunakan !important atau sepadan dengan spesifikasi tinggi (seperti button.btn.primary ), yang menjadi kemas.

Penggunaan :where() Apabila anda mahukan gaya fleksibel, override-friendly-terutamanya dalam sistem reka bentuk atau perpustakaan komponen.

Contoh praktikal dan kes penggunaan dunia nyata

1. Memudahkan keadaan hover bersarang

Anda mahukan anak langsung dari bekas untuk bertindak balas terhadap hover:

 .container: adalah (.card, .item, .post): hover {
  Transform: Translatey (-2px);
  Box-shadow: 0 4px 8px RGBA (0,0,0,0.1);
}

Bersih dan berskala.

2. Menetapkan semula gaya tanpa memerangi kekhususan

Gunakan :where() dalam tetapan semula atau lapisan asas:

 : di mana (ul, ol) {
  Margin: 0;
  Padding: 0;
  Senarai gaya: Tiada;
}

Sekarang anda boleh gaya senarai tertentu kemudian tanpa bimbang tentang ditindih oleh peraturan semula.

3. Kelas utiliti responsif

Gabungkan dengan pendekatan utiliti-pertama:

 : di mana (.md \\: hover: hover) {
  / * Hanya memohon apabila .md: hover digunakan, tetapi tidak akan melawan gaya lain */
}

Nota: Anda perlu melarikan diri dari kolon dengan \\: dalam nama kelas.

Sokongan dan keserasian penyemak imbas

Kedua -duanya :is() dan :where() disokong secara meluas dalam pelayar moden:

• :is() - disokong dalam Chrome 88, Firefox 78, Safari 13.4
• :where() - Chrome 88, Firefox 78, Safari 14.1

Untuk penyemak imbas yang lebih tua, anda mungkin perlu berpegang dengan pemilih tradisional atau menggunakan alat binaan yang boleh mengembangkannya (walaupun tiada autoprefixer yang boleh dipercayai wujud untuk :is() / :where() ).

Jika anda mensasarkan persekitaran yang lebih lama, pertimbangkan untuk menggunakannya secara progresif - mereka gagal dengan senyap, jadi kejatuhan boleh disediakan.

Ringkasan :: :is() vs :where()

Penggunaan :is() apabila anda mahu CSS yang lebih bersih, lebih banyak dikekalkan tanpa mengubah cara kerja tertentu.

Gunakan :where() Apabila anda mahu menetapkan lalai yang tidak akan mendapat jalan kemudian.

Kedua -duanya menjadikan CSS lebih ekspresif dan kurang rapuh. Dan dengan jujur, apabila anda mula menggunakannya, anda akan tertanya -tanya bagaimana anda hidup tanpa mereka.

Pada asasnya - mereka adalah ciri -ciri kecil dengan kesan yang besar.

Atas ialah kandungan terperinci Meneroka CSS baru: adalah () dan: di mana () kelas pseudo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!