:is() je súčasný názov pseudotriedy „Zhoduje sa s ľubovoľným“ v pracovnom koncepte CSS4.
Táto pseudotrieda bola pôvodne pomenovaná :any()a bola implementovaná s obmedzenou podporou konkrétneho dodávateľa:
/* Never actually worked */ :any(div, p) > em ( /*… */ )V :matches()prvotných verziách pracovného konceptu CSS4 sa potom názov pseudotriedy „Zhoduje sa s akýmkoľvek“ zmenil na, pričom niektorým prehliadačom bola poskytnutá dodatočná (neúplná) podpora.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Aktuálny pracovný koncept nakoniec túto pseudotriedu premenoval na :is(), ktorá v súčasnosti v prehliadačoch nie je podporovaná.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Cieľom selektora „Zhody ľubovoľného“ (so všetkými jeho názvami) je uľahčiť písanie zložitých zoskupení selektorov.
Syntax
/* 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; )Hej, nie je to ako predspracovanie CSS?
Zjednodušenie selektorov :is()je skutočne podobné tomu, ako preprocesory CSS pracujú s vnorenými pravidlami:
/* 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()! */Ale pozor! Predbežné procesory, ako napríklad Sass, „rozbalia“ vaše vnorené pravidlá do zoznamu ľahko pochopiteľných selektorov. :is()bude zaobchádzať s pravidlami špecifickosti trochu inak:
Konkrétnosť je zaujímavá
Podľa pracovného návrhu CSS4:
Špecifickosť pseudotriedy: is () je nahradená špecifickosťou jej najšpecifickejšieho argumentu. Selektor napísaný pomocou: is () teda nemusí mať nevyhnutne rovnakú špecifickosť ako ekvivalentný selektor napísaný bez: is ().
To znamená, že špecifickosť :is()sa automaticky inovuje na najšpecifickejšiu položku v zozname poskytnutých argumentov:
/* 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`! */Podpora prehľadávača
Zmienili sme sa o tom už skôr, :is()momentálne však nemáme podporu prehliadača. Bolo to predstavené v redakčnom koncepte 1 špecifikácie úrovne 4 CSS Selectors. To znamená, že veci sa stále formujú, takže je pre prehliadače trochu skoro, aby sa zhromaždili okolo tohto konceptu.
To znamená, že máme veľkú podporu prehľadávačov v podobe :matches(s :anyvyplnením niektorých medzier predponou dodávateľa ) všeobecných funkcií. A samozrejme :notje tu ďalšia pseudotrieda, ktorá môže pomôcť pri porovnávaní.
Je zaujímavé poznamenať, že :is()bolo predstavené potom, :matchesčo bolo predstavené neskôr :any. Je to niečo podobné, ako keby :anysa nahradzovalo to, :matchesčím sa nahradzujú :is()podrobnosti. Vždy prehľadní, ako sa tieto veci vyvíjajú.
Na získanie maximálnej podpory pre „Zhody - ľubovoľné“ je potrebné použiť kombináciu historických mien, pretože manipulácia s prehliadačom je v súčasnosti bodom za prefixom dodávateľa a experimentálnymi nastaveniami.
/* 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 ( /*… */ )Pozrite si príklady pera: akejkoľvek pseudotriedy od CSS-Tricks (@ css-tricks) na CodePen.
Súvisiace
:matches():not():any-link()
Zdroje
- Príspevok na blogu Davida Barona, ktorý vysvetľuje, prečo pridal
:-moz-anypodporu Geckovi - Dokumentácia MDN
- CSS Selectors Level 4 Specification (Editor's Draft 1): Špecifikácia, ktorá zavádza
:is()pseudotriedu. - Zoznámte sa s výbercami pseudo tried: príspevok CSS-Tricks, ktorý popisuje fungovanie pseudotried.