:is() trenutni je naziv pseudo-klase "Matches-Any" u CSS4 radnom nacrtu.
Izvorno je ova pseudo-klasa imenovana :any()i implementirana s ograničenom podrškom specifičnom za dobavljača:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Ime pseudo-klase "Matches-Any" tada je promijenjeno :matches()u rane verzije radnog nacrta CSS4, uz dodatnu (nepotpunu) podršku nekim preglednicima.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Konačno, trenutni radni nacrt preimenovao je ovu pseudo-klasu u :is(), koja trenutno nije podržana u preglednicima.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Cilj selektora "Podudara se s bilo kojim" (sa svim njegovim imenima) je olakšati pisanje složenih grupa selektora.
Sintaksa
/* 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, nije li to kao CSS predobrada?
Pojednostavljivanje selektora s :is()doista je slično onome kako CSS pretprocesori obrađuju ugniježđena pravila:
/* 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()! */Ali oprez! Preprocesori, poput Sass, "razmotavaju" vaša ugniježđena pravila na popis lako razumljivih selektora. :is()će se s pravilima specifičnosti baviti malo drugačije:
Specifičnost je zanimljiva
Prema CSS4 radnom nacrtu:
Specifičnost pseudo-klase: is () zamijenjena je specifičnošću njenog najspecifičnijeg argumenta. Dakle, selektor napisan s: is () ne mora nužno imati ekvivalentnu specifičnost ekvivalentnom selektoru napisanom bez: is ().
To znači da se specifičnost :is()automatski nadograđuje na najspecifičniju stavku na popisu argumenata:
/* 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`! */Podrška preglednika
Na to smo aludirali ranije, ali :is()trenutno nema podršku preglednika. Uveden je u Urednikov nacrt 1 specifikacije CSS Selectors Level 4. To znači da se stvari još uvijek oblikuju pa je malo rano za preglednike da se okupe oko ovakvog koncepta.
Usprkos tome, imamo izvrsnu podršku za preglednike u obliku :matches(s :anyispunjavanjem nekih praznina s unaprijed definiranim dobavljačem ) za opću funkcionalnost. I, naravno, :notjoš je jedna pseudo-klasa koja može pomoći u podudaranju.
Ono što je zanimljivo napomenuti je da :is()je predstavljeno nakon :matchesčega je uvedeno nakon :any. To je nekako kao :anyda :matchesse zamjenjuje :is()onim što se zamjenjuje , a detalji se usput mijenjaju. Uvijek uredan da vidiš kako se te stvari razvijaju.
Da biste dobili maksimalnu podršku za "Podudara se s bilo kojim", potrebna je kombinacija povijesnih naziva, jer je rukovanje preglednikom u ovom trenutku gomila prefiksa dobavljača i eksperimentalnih postavki.
/* 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 ( /*… */ )Pogledajte primjere olovke: bilo koje pseudo-klase od strane CSS-Tricks (@ css-tricks) na CodePenu.
Povezano
:matches():not():any-link()
Resursi
- Objava na blogu Davida Barona koja objašnjava zašto je dodao
:-moz-anypodršku Geckou - MDN dokumentacija
- Specifikacija CSS izbornika razine 4 (Nacrt urednika 1): Specifikacija koja uvodi
:is()pseudo-klasu. - Upoznajte Pseudo Class Selectors: CSS-trikovi objavljuju kako pseudo-klase rade.