: ialah () - Trik CSS

Anonim

:is() adalah nama semasa untuk kelas pseudo "Matches-Any" dalam draf kerja CSS4.

Pada asalnya, kelas pseudo ini diberi nama :any()dan dilaksanakan dengan sokongan khusus vendor terhad:

/* Never actually worked */ :any(div, p) > em ( /*… */ )

Nama kelas pseudo "Matches-Any" kemudian diubah menjadi :matches()versi awal draf kerja CSS4, dengan sokongan tambahan (tidak lengkap) diberikan kepada beberapa penyemak imbas.

/* Sort of works */ :matches(div, p) > em ( /*… */ )

Akhirnya, draf kerja semasa telah menamakan semula kelas pseudo ini menjadi :is(), yang pada masa ini tidak disokong dalam penyemak imbas.

/* Will work in the future? */ :is(div, p) > em ( /*… */ )

Matlamat pemilih "Matches Any" (dengan semua namanya) adalah untuk membuat pengelompokan pemilih yang kompleks lebih mudah ditulis.

Sintaks

/* Theoretical until CSS4 support finalized */ :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )

Hei, bukankah seperti proses pemprosesan CSS?

Memudahkan pemilih dengan :is()cara serupa dengan cara pemprosesan CSS mengendalikan peraturan bersarang:

/* SCSS written like this: */ div, p, ul, ol ( span ( /*… */ ) ) /* after processing becomes: */ div span, p span, ul span, ol span ( /*… */ ) /* which is a lot like the effect of :is()! */

Tetapi berhati-hatilah! Pra-prosesor, seperti Sass, “unroll” peraturan bersarang anda ke dalam senarai pemilih yang mudah difahami. :is()akan menangani peraturan kekhususan sedikit berbeza:

Kekhususan Menarik

Menurut Draf Kerja CSS4:

Kekhususan dari: adalah () kelas pseudo digantikan oleh kekhususan hujahnya yang paling spesifik. Oleh itu, pemilih yang ditulis dengan: adalah () tidak semestinya mempunyai kekhususan setara dengan pemilih setara yang ditulis tanpa: adalah ().

Itu bermaksud bahawa kekhususan :is()mendapat peningkatan automatik ke item yang paling spesifik dalam senarai argumen yang disediakan:

/* This has higher precedence… */ :is(ol, .list, ul) li ( /*… */ ) /*… than this, even though this is later… */ ol li ( /*… */ ) /*… because :is() has the weight of it's heaviest selector, which is `.list`! */

Sokongan Penyemak Imbas

Kami menyinggung perkara ini sebelumnya, tetapi :is()tidak mempunyai sokongan penyemak imbas buat masa ini. Ia diperkenalkan dalam Draf Editor 1 Spesifikasi CSS Selectors Level 4. Ini bermakna perkara-perkara masih dapat dibuat sehingga sedikit awal bagi penyemak imbas untuk menggunakan konsep seperti ini.

Yang mengatakan, kami mempunyai sokongan penyemak imbas yang hebat dalam bentuk :matches(dengan :anypengisian awalan vendor dalam beberapa jurang) untuk fungsi umum. Dan, tentu saja, :notadalah kelas pseudo lain yang dapat membantu pemadanan.

Apa yang menarik untuk diperhatikan adalah yang :is()diperkenalkan selepas :matchesitu diperkenalkan selepas itu :any. Ini seperti :anydigantikan dengan :matchesyang digantikan oleh :is(), dengan perinciannya berubah sepanjang perjalanan. Sentiasa kemas untuk melihat bagaimana perkara-perkara ini berkembang.

Untuk mendapatkan sokongan maksimum untuk "Matches-Any" memerlukan penggunaan gabungan nama-nama sejarah, kerana pengendalian penyemak imbas saat ini merupakan hodgepodge awalan vendor dan tetapan eksperimen pada ketika ini.

/* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em ( /*… */ ) :-webkit-any(div, p) > em ( /*… */ ) /* Has been replaced by :is() in CSS4, but still supported by some browsers with experimental features enabled */ :matches(div, p) > em ( /*… */ ) /* Doesn't work yet, but for future support, maybe add this? */ :is(div, p) > em ( /*… */ )

Lihat contoh Pen: kelas pseudo oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • :matches()
  • :not()
  • :any-link()

Sumber

  • Catatan blog David Baron yang menjelaskan mengapa dia menambahkan :-moz-anysokongan kepada Gecko
  • Dokumentasi MDN
  • Spesifikasi Pemilih CSS Tahap 4 (Draf Editor 1): Spesifikasi yang memperkenalkan kelas :is()pseudo.
  • Temui Pemilih Kelas Pseudo: Pos CSS-Tricks yang menggariskan bagaimana kelas pseudo berfungsi.