Tulis kurang CSS menggunakan :is(), :where(), dan :has() pseudo-classes

CSS telah banyak berkembang selama bertahun-tahun. Ia memperkenalkan banyak alat berkuasa baharu yang memudahkan kehidupan. Daripada alatan ini, hari ini saya telah memilih tiga daripadanya. Kita akan lihat bagaimana :is(), :has(), dan :where() pseudo-class membantu memudahkan kod, menjadikannya lebih mudah dibaca dan mengurangkan pengulangan.

Artikel ini mengajar anda, apa, bagaimana, dan mengapa :is(), :where(), dan :has() pseudo-classes. Anda akan melihat cara kami boleh menggunakan kelas pseudo ini untuk mereka bentuk tapak web kami dengan menulis kod yang kurang dan lebih dioptimumkan, yang boleh menjadi amalan terbaik dalam pembangunan perisian.

Ketika kita akan meneroka kelas pseudo, berikut ialah gambaran keseluruhan asas dalam satu ayat. Dalam kelas pseudo CSS ialah peraturan yang digunakan pada elemen berdasarkan keadaan atau keadaan tertentu. Ikuti pautan ini untuk mengetahui lebih lanjut tentang kelas pseudo.

Apakah masalah yang kita selesaikan?

Apabila mereka bentuk tapak web kami menggunakan CSS (lembaran gaya cascading), satu perkara yang kita semua hadapi ialah pengulangan kod.

Sebagai Contoh:

.card .title, .card .body-content, .card .footer-action {
 ...
}

Dalam contoh ini, saya mempunyai pemilih .kad yang diulang untuk setiap pemilih anaknya. Tetapi pada masa yang sama, anda juga akan melihat bahawa gaya yang sama digunakan untuk mereka.

Beginilah cara pemilih kumpulan berfungsi seperti biasa dalam CSS dengan memisahkan setiap pemilih dengan koma. Kod ini berfungsi dengan baik, tetapi kebimbangan saya di sini adalah untuk mengelakkan pengulangan dan tidak teratur dengan baik.

Isu lain yang kami hadapi di sini ialah isu kekhususan CSS. Dengan menggunakan kod seperti itu dan terlalu banyak ulangan, kadangkala kita terlupa gaya apa yang digunakan di mana dan dalam keadaan apa. Di sinilah kelas pseudo ini memainkan peranan penting.

Mari kita lihat setiap kelas pseudo satu demi satu untuk memahami tujuan mereka.

Menerangkan :is() pseudo-class

:is() pseudo-class membolehkan anda memilih berbilang elemen yang berkongsi gaya biasa, tanpa mengulangi kod yang sama. Ia memudahkan pemilih dengan menggabungkannya ke dalam satu blok, mengurangkan lebihan. Ia memerlukan senarai pemilih sebagai hujah dan menggunakan gaya pada semua elemen yang sepadan dengan mana-mana pemilih dalam senarai itu.

.card :is(.title, .body-content, .footer-action) {
 ...
}

Saya telah menggunakan contoh di atas, dan anda akan melihat betapa mudahnya untuk mengurangkan pengulangan dalam kod CSS kami dengan mengumpulkan dengan :is() pseudo-class. Ia memastikan kod bersih dan cekap.

Contoh di atas menunjukkan kami menyediakan .title, .body-content dan .footer-action sebagai hujah kepada :is() pseudo-class. Sebelum :is() parent container .card ditakrifkan untuk memastikan gaya anak-anaknya berasingan daripada kod lain. Beginilah cara :is() menggunakan gaya yang sama pada semua hujah yang sepadan dengan senarainya.

:is() pseudo-class digunakan secara meluas dalam semua penyemak imbas utama, imej di bawah daripada caniuse.com menunjukkan gambaran keseluruhan terperinci untuk versi penyemak imbas yang berbeza:

...

Menerangkan :where() pseudo-class

Kelas pseudo :where() sangat serupa dengan :is(). Kami boleh mengumpulkan berbilang pemilih untuk mengurangkan pengulangan dalam kod kami. Ia mengambil pemilih sebagai hujah. Perbezaan utama antara :is() dan :where() pseudo-class ialah, :where() mempunyai kekhususan sifar. Ini bermakna ia berguna apabila anda ingin menggayakan elemen tanpa menambah berat tambahan pada pemilih CSS anda.

Gaya yang ditakrifkan dengan :where() pseudo-class boleh diganti dengan mudah. Ini bermakna :where() tidak menambah kekhususan tambahan dalam pemilihnya dan gaya di dalam :where() pseudo-class adalah berdasarkan kekhususan pemilih sendiri.

Satu kes penggunaan yang baik untuk menggunakan :where() pseudo-class ialah untuk mentakrifkan gaya asas untuk berbilang elemen dan anda tidak mahu gaya itu menjejaskan mana-mana peraturan yang lebih khusus yang mungkin mengatasinya kemudian.

Cara ini :where() membolehkan anda menggunakan gaya tanpa membuat CSS anda terlalu berpandangan tentang peraturan mana yang patut dimenangi dalam konflik.

/* Applying a default style */
:where(h1, p, a) {
  color: red; 
  font-size: 20px;
}

/* More specific style */
a {
  color: blue;
  font-size: 16px;
}

Dalam contoh di atas, teg h1, p dan a disediakan sebagai hujah kepada :where() pseudo-class untuk penggayaan asas. Selepas itu teg yang digunakan sebagai teg kendiri dengan penggayaannya boleh dengan mudah mengatasi gaya yang ditakrifkan dalam :where().

Suka :is(), :where() juga disokong dalam hampir semua penyemak imbas utama. Lihat imej di bawah daripada caniuse.com untuk menyemak versi penyemak imbas yang disokong:

Menerangkan :has() pseudo-class

:has() ialah pemilih induk. Ini bermakna ia membolehkan anda memilih elemen induk berdasarkan kanak-kanak yang terkandung di dalamnya. Ini masalah besar kerana CSS tidak membenarkan tingkah laku seperti ini sebelum ini. Anda juga boleh mengatakan bahawa :has() sebagai pernyataan if CSS kerana ia memenuhi keperluan bersyarat.

Katakan anda mahu menggayakan div hanya jika ia mengandungi img. Ini tidak boleh dilakukan dengan CSS tradisional tetapi :has() menjadikannya mungkin.

<!-- Card with Image -->
<div class="card">
      <img  src="/static/imghwm/default1.png" data-src="https://placeholderjs.com/300x300" class="lazy" alt="Tulis kurang CSS menggunakan :is(), :where(), dan :has() pseudo-classes" >
      <h1 id="Card-With-Image">Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
</div>

<!-- Card without Image -->
<div class="card">
      <h1 id="Card-With-Image">Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
      <a href="#">Call to Action</a>
    </div>

.card:has(a) {
  background-color: #e6e6e6;
}

.card:has(img) {
  background-color: #979759;
}

In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output.

:has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:

Conclusion

As new features are introduced in CSS, the more power it gains, and allows writing code more readable, efficient, and optimized code. You have learned :is(), :where() and :has() pseudo-classes in this article, and you see how useful they are. These pseudo-classes make our job much easier, they can be easily maintained, and the code is optimized.

This article is to show you how powerful these features are, and we’re one step closer of using these features in our project. I highly suggest you use features like these to increase your productivity.

This post is originally posted at programmingly.dev. Read full article by following this link: write less CSS by using :is(), :where(), :has() pseudo-classes

Atas ialah kandungan terperinci Tulis kurang CSS menggunakan :is(), :where(), dan :has() pseudo-classes. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!