: yra () - CSS-gudrybės

Turinys

:is() yra dabartinis CSS4 darbinio juodraščio „Matches-Any“ pseudoklasės pavadinimas.

Iš pradžių ši pseudo klasė buvo pavadinta :any()ir įgyvendinta naudojant ribotą tiekėjo palaikymą:

/* Never actually worked */ :any(div, p) > em ( /*… */ )

Tada „Matches-Any“ pseudoklasės pavadinimas buvo pakeistas į :matches()ankstyvąsias CSS4 darbinio projekto versijas, kai kurioms naršyklėms suteikiant papildomą (neišsamų) palaikymą.

/* Sort of works */ :matches(div, p) > em ( /*… */ )

Galiausiai dabartiniame darbo projekte ši pseudoklasė buvo pervadinta į :is(), kuri šiuo metu nepalaikoma naršyklėse.

/* Will work in the future? */ :is(div, p) > em ( /*… */ )

Pasirinkiklio „Atitinka bet kurį“ (su visais pavadinimais) tikslas yra sudaryti sudėtingesnes selektorių grupes lengviau rašyti.

Sintaksė

/* 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; )

Ei, argi tai ne kaip CSS išankstinis apdorojimas?

Selektorių supaprastinimas :is()iš tikrųjų yra panašus į tai, kaip CSS išankstiniai procesoriai tvarko įdėtas taisykles:

/* 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 saugokis! Išankstiniai procesoriai, kaip ir Sassas, „išvynioja“ įdėtas taisykles į lengvai suprantamų pasirinkėjų sąrašą. :is()konkretumo taisykles elgsis šiek tiek kitaip:

Konkretumas yra įdomus

Pagal CSS4 darbo projektą:

: Yra () pseudoklasės specifika pakeičiama jos konkretiausio argumento specifika. Taigi selektorius, parašytas su: is (), nebūtinai turi lygiavertį specifiškumą, lygiavertis selektorius, parašytas be: is ().

Tai reiškia, kad specifiškumas :is()automatiškai atnaujinamas iki konkretiausio elemento pateiktų argumentų sąraše:

/* 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`! */

Naršyklės palaikymas

Užsiminėme apie tai anksčiau, tačiau :is()šiuo metu nepalaikome naršyklės. Jis buvo pateiktas CSS Selectors 4 lygio specifikacijos redaktoriaus 1 projekte. Tai reiškia, kad viskas vis dar formuojasi, todėl šiek tiek anksti naršyklės gali rinktis tokią koncepciją.

Tai reiškia, kad mes turime puikią naršyklės palaikymo formą :matches(su tiekėjo priešdėliais :anyužpildydami kai kurias spragas) bendram funkcionalumui. Ir, žinoma, :notyra dar viena pseudoklasė, galinti padėti derinant.

Įdomu tai, kad jis :is()buvo pristatytas po to, :matcheskai buvo pristatytas vėliau :any. Panašu, kad :anykeičiamas tuo, :matcheskuris keičiamas :is(), kintant detalėms. Visada tvarkingas, norėdamas pamatyti, kaip šie dalykai vystosi.

Norint gauti maksimalų palaikymą „Matches-Any“, reikia naudoti istorinių pavadinimų derinį, nes naršyklės tvarkymas šiuo metu yra tiekėjų prefiksų ir eksperimentinių parametrų rinkinys.

/* 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 ( /*… */ )

Žr. „Pen“ pavyzdžius: „CSS-Tricks“ (@ css-tricks) „pseudoklasė“ „CodePen“.

Susijęs

  • :matches()
  • :not()
  • :any-link()

Ištekliai

  • Davido Barono dienoraštyje paaiškinta, kodėl jis pridėjo :-moz-anypalaikymą Gecko
  • MDN dokumentacija
  • CSS selektorių 4 lygio specifikacija (redaktoriaus 1 juodraštis): specifikacija, pristatanti :is()pseudoklasę.
  • Susipažinkite su „Pseudo“ klasės rinkėjais: „CSS-Tricks“ įraše aprašoma, kaip veikia pseudo klasės.

Įdomios straipsniai...