:is() ir CSS4 darba melnraksta pašreizējais pseidoklases nosaukums “Matches-Any”.
Sākotnēji šī pseidoklase tika nosaukta :any()un tika ieviesta ar ierobežotu ražotāja atbalstu:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Pēc tam :matches()CSS4 darba melnraksta agrīnās versijās pseidoklases nosaukums “Matches-Any” tika mainīts, dažām pārlūkprogrammām sniedzot papildu (nepilnīgu) atbalstu.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Visbeidzot, pašreizējā darba projektā šī pseidoklase ir pārdēvēta par :is(), kas pārlūkprogrammās pašlaik netiek atbalstīta.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Atlasītāja “Matches Any” (ar visiem tā nosaukumiem) mērķis ir padarīt sarežģītākas atlasītāju grupas vieglāk rakstāmas.
Sintakse
/* 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, vai tas nav līdzīgs CSS pirmapstrādei?
Atlasītāju vienkāršošana ar :is()patiešām ir līdzīga tam, kā CSS priekšapstrādātāji apstrādā ligzdotos noteikumus:
/* 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()! */Bet uzmanies! Priekšapstrādātāji, tāpat kā Sass, “izvelk” jūsu ligzdotos noteikumus viegli saprotamu atlasītāju sarakstā. :is()rīkosies ar specifikas noteikumiem nedaudz savādāk:
Konkrētība ir interesanta
Saskaņā ar CSS4 darba projektu:
: Ir () pseidoklases specifika tiek aizstāta ar tās specifiskākā argumenta specifiku. Tādējādi atlasītājam, kas rakstīts ar: is (), nav obligāti līdzvērtīga specifika līdzvērtīgajam atlasītājam, kas rakstīts bez: is ().
Tas nozīmē, ka specifika :is()tiek automātiski jaunināta līdz visprecīzākajam elementam norādīto argumentu sarakstā:
/* 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`! */Pārlūka atbalsts
Mēs to jau iepriekš pieminējām, taču :is()šobrīd pārlūka atbalsts nav pieejams. Tas tika ieviests CSS Selectors 4. līmeņa specifikācijas redaktora 1. projektā. Tas nozīmē, ka lietas joprojām tiek veidotas, tāpēc pārlūkprogrammām ir mazliet agri apvienoties ar šādu koncepciju.
Tas nozīmē, ka mums ir lielisks pārlūka atbalsts vispārējās funkcionalitātes veidā :matches(ar pārdevēja prefiksu :anyaizpildot dažas nepilnības). Un, protams, :notir vēl viena pseidoklase, kas var palīdzēt saskaņošanai.
Interesanti atzīmēt, ka tas :is()tika ieviests pēc tam, :matcheskad tika ieviests pēc :any. Tas ir kaut kas līdzīgs :anytam, :matcheskas tiek aizstāts ar to, kas tiek aizstāts ar :is(), detaļām mainoties. Vienmēr veikls, lai redzētu, kā šīs lietas attīstās.
Lai iegūtu maksimālu atbalstu “Matches-Any”, ir jāizmanto vēsturisko nosaukumu sajaukums, jo pārlūkprogrammas apstrāde pašlaik ir pārdevēja prefiksu un eksperimentālo iestatījumu vieta.
/* 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 ( /*… */ )Skatiet pildspalvas piemērus: jebkura CSS-Tricks (@ css-tricks) pseidoklase vietnē CodePen.
Saistīts
:matches():not():any-link()
Resursi
- Deivida Barona emuāra ziņā ir paskaidrots, kāpēc viņš pievienoja
:-moz-anyatbalstu Gecko - MDN dokumentācija
- CSS selektoru 4. līmeņa specifikācija (redaktora 1. melnraksts): specifikācija, kas ievada
:is()pseidoklasi. - Iepazīstieties ar pseidoklases atlasītājiem: CSS-Tricks ziņojumā ir aprakstīts, kā darbojas pseidoklases.