: is () - Trik CSS

Anonim

:is() adalah nama saat ini untuk pseudo-class “Matches-Any” dalam draf kerja CSS4.

Awalnya, pseudo-class ini dinamai :any()dan diterapkan dengan dukungan khusus vendor terbatas:

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

Nama pseudo-class “Matches-Any” kemudian diubah menjadi :matches()di versi awal draf kerja CSS4, dengan dukungan tambahan (tidak lengkap) diberikan ke beberapa browser.

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

Terakhir, draf yang berfungsi saat ini telah mengganti nama pseudo-class ini menjadi :is(), yang saat ini tidak didukung di browser.

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

Tujuan dari pemilih "Cocok dengan Apa Pun" (dengan semua namanya) adalah untuk membuat pengelompokan pemilih yang kompleks lebih mudah untuk ditulis.

Sintaksis

/* 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 itu seperti preprocessing CSS?

Menyederhanakan pemilih dengan :is()memang mirip dengan bagaimana praprosesor CSS menangani aturan 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()! */

Namun waspadalah! Praprosesor, seperti Sass, "membuka gulungan" aturan bertingkat Anda ke dalam daftar pemilih yang mudah dipahami. :is()akan menangani aturan kekhususan sedikit berbeda:

Kekhususan itu Menarik

Menurut Draf Kerja CSS4:

Kekhususan dari pseudo-class: is () digantikan oleh kekhususan dari argumen yang paling spesifik. Jadi, selektor yang ditulis dengan: is () tidak harus memiliki kekhususan yang setara dengan pemilih yang setara yang ditulis tanpa: is ().

Itu berarti bahwa kekhususan :is()ditingkatkan secara otomatis ke item paling spesifik dalam daftar 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`! */

Dukungan Browser

Kami telah menyinggung ini sebelumnya, tetapi saat :is()ini tidak ada dukungan browser. Itu diperkenalkan di Editor's Draft 1 dari CSS Selectors Level 4 Specification. Itu berarti hal-hal masih dibentuk sehingga sedikit lebih awal bagi browser untuk mendukung konsep seperti ini.

Meskipun demikian, kami memiliki dukungan browser yang bagus dalam bentuk :matches(dengan prefiks vendor :anymengisi beberapa celah) untuk fungsionalitas umum. Dan, tentu saja, :notadalah pseudo-class lain yang dapat membantu pencocokan.

Yang menarik untuk diperhatikan adalah yang :is()diperkenalkan setelah :matchesitu diperkenalkan setelahnya :any. Ini seperti :anysedang diganti dengan :matchesyang digantikan oleh :is(), dengan detail yang berubah di sepanjang jalan. Selalu rapi untuk melihat bagaimana hal-hal ini berkembang.

Untuk mendapatkan dukungan maksimum untuk "Matches-Any" memerlukan penggunaan campuran nama-nama historis, karena penanganan browser saat ini merupakan campuran dari awalan vendor dan pengaturan eksperimental pada saat 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 Pena dari: pseudo-class apa pun oleh CSS-Tricks (@ css-trick) di CodePen.

Terkait

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

Sumber daya

  • Posting blog David Baron menjelaskan mengapa dia menambahkan :-moz-anydukungan untuk Gecko
  • Dokumentasi MDN
  • CSS Selectors Level 4 Specification (Editor's Draft 1): Spesifikasi yang memperkenalkan :is()pseudo-class.
  • Perkenalkan Pseudo Class Selectors: CSS-Tricks yang menguraikan cara kerja pseudo-class.