:is() este numele curent pentru pseudo-clasa „Meciuri-Orice” din schița de lucru CSS4.
Inițial, această pseudo-clasă a fost denumită :any()și a fost implementată cu suport limitat specific pentru furnizor:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Numele pseudo-clasei „Matches-Any” a fost apoi schimbat :matches()în versiunile anterioare ale schiței de lucru CSS4, asistență suplimentară (incompletă) oferită unor browsere.
/* Sort of works */ :matches(div, p) > em ( /*… */ )În cele din urmă, schița de lucru actuală a redenumit această pseudo-clasă în :is(), care în prezent nu este acceptată în browsere.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Scopul selectorului „Se potrivește cu orice” (cu toate numele sale) este de a face mai ușor de scris grupările complexe de selectoare.
Sintaxă
/* 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, nu este ca preprocesarea CSS?
Simplificarea selectorilor cu :is()este într-adevăr similară cu modul în care preprocesoarele CSS gestionează regulile imbricate:
/* 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()! */Dar atenție! Preprocesatorii, cum ar fi Sass, vă „derulează” regulile imbricate într-o listă de selectoare ușor de înțeles. :is()va gestiona regulile de specificitate puțin diferit:
Specificitatea este interesantă
Conform schiței de lucru CSS4:
Specificitatea pseudo-clasei: is () este înlocuită de specificitatea argumentului său cel mai specific. Astfel, un selector scris cu: is () nu are neapărat o specificitate echivalentă cu selectorul echivalent scris fără: is ().
Asta înseamnă că specificitatea :is()se actualizează automat la cel mai specific element din lista de argumente furnizate:
/* 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`! */Suport pentru browser
Am făcut aluzie la acest lucru mai devreme, dar :is()în acest moment nu are suport pentru browser. A fost introdus în Proiectul 1 al Editorului din Specificația CSS Selectors Level 4. Asta înseamnă că lucrurile încă se conturează, ceea ce face ca browserele să se reunească puțin mai devreme în jurul unui concept ca acesta.
Acestea fiind spuse, avem un suport de browser excelent sub formă de :matches(cu :anycompletarea unor goluri prefixate de furnizor ) pentru funcționalitatea generală. Și, desigur, :noteste o altă pseudo-clasă care poate ajuta la potrivire.
Ceea ce este interesant de reținut este că a :is()fost introdus după :matchescare a fost introdus după :any. Este ca și cum ar :anyfi înlocuit cu :matchescare este înlocuit de :is(), cu detaliile care se schimbă pe parcurs. Întotdeauna îngrijit pentru a vedea cum evoluează aceste lucruri.
Pentru a obține asistență maximă pentru „Meciuri-Orice”, este necesară utilizarea unui amestec de nume istorice, deoarece gestionarea browserului este în prezent un amestec de prefixe ale vânzătorului și setări experimentale în acest moment.
/* 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 ( /*… */ )Vedeți exemplele Pen de: orice pseudo-clasă de CSS-Tricks (@ css-tricks) pe CodePen.
Legate de
:matches():not():any-link()
Resurse
- Postarea pe blogul lui David Baron explicând de ce a adăugat
:-moz-anysprijin Gecko - Documentația MDN
- Selecții CSS Specificație de nivel 4 (Proiectul editorului 1): Specificația care introduce
:is()pseudo-clasa. - Faceți cunoștință cu selectorii de clase Pseudo: CSS-Tricks post care prezintă modul în care funcționează pseudo-clasele.