:is() je trenutno ime za psevdorazred »Matches-Any« v delovnem osnutku CSS4.
Prvotno je bil ta psevdo-razred imenovan :any()in je bil izveden z omejeno podporo dobavitelja:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Nato se je psevdorazred »Matches-Any« spremenil :matches()v prejšnje različice delovnega osnutka CSS4, pri čemer so nekateri brskalniki dobili dodatno (nepopolno) podporo.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Končno je trenutni delovni osnutek ta psevdorazred preimenoval v :is(), ki trenutno ni podprt v brskalnikih.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Cilj izbirnika »Ujema se s katerim koli« (z vsemi imeni) je olajšati pisanje zapletenih skupin izbirnikov.
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, ali ni to kot predobdelava CSS?
Poenostavitev izbirnikov z :is()je res podobna tem, kako predprocesorji CSS obdelujejo ugnezdena 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()! */A pozor! Predprocesorji, kot je Sass, "razgrnejo" vaša ugnezdena pravila na seznam lahko razumljivih izbirnikov. :is()bo pravila o specifičnosti obravnaval nekoliko drugače:
Specifičnost je zanimiva
V skladu z delovnim osnutkom CSS4:
Specifičnost psevdorazreda: is () nadomesti specifičnost njegovega najbolj specifičnega argumenta. Izbirnik, napisan z: is (), torej ni nujno enakovreden specifičnosti enakovrednega izbirnika, zapisan brez: is ().
To pomeni, da se posebnost :is()samodejno nadgradi na najbolj specifičen element na seznamu podanih 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 za brskalnik
Na to smo že omenili, vendar :is()trenutno nima podpore za brskalnik. Predstavljen je bil v uredniškem osnutku 1 specifikacije CSS Selectors Level 4. To pomeni, da se stvari še vedno oblikujejo, zaradi česar se brskalniki nekoliko zgodaj zberejo okoli takšnega koncepta.
Kljub temu imamo veliko podporo za brskalnike v obliki :matches(z vnaprej določenimi :anyzapolnitvami prodajalca ) za splošno funkcionalnost. In seveda :notje še en psevdorazred, ki lahko pomaga pri ujemanju.
Zanimivo je omeniti, da :is()je bil predstavljen po :matcheskaterem je bil predstavljen po :any. To je nekako tako, kot :anybi ga zamenjali s tem, :matcheski bi ga zamenjali :is(), pri čemer se podrobnosti spreminjajo. Vedno čeden, da vidite, kako se te stvari razvijajo.
Če želite dobiti največjo možno podporo za »Ujemanja - vse«, je treba uporabiti kombinacijo preteklih imen, saj je trenutno brskalnik mešanica predpon prodajalcev in eksperimentalnih nastavitev.
/* 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 ( /*… */ )Oglejte si primere pisala: kateri koli psevdorazred s strani CSS-Tricks (@ css-tricks) na CodePenu.
Sorodno
:matches():not():any-link()
Viri
- Prispevek Davida Barona v blogu, ki pojasnjuje, zakaj je
:-moz-anyGeckou dodal podporo - Dokumentacija MDN
- Specifikacija CSS Selectors Level 4 (Editor's Draft 1): Specifikacija, ki uvaja
:is()psevdo-razred. - Spoznajte izbirnike Pseudo Class: CSS-Tricks objavlja, kako delujejo psevdo-razredi.