:has je neizprosen selektor

Na poti do objave se je zgodila malenkost CSS :has() izbirnik do starega almanaha. Prvotno sem opisal :has() kot "odpuščajoči" izbirnik, ideja je, da se ovrednoti kar koli v njegovem argumentu, tudi če je eden ali več elementov neveljavnih.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

Poglej ::scoobydoo tam? To je popolnoma neveljavno. Seznam odpuščajočih izbirnikov ignorira ta lažni izbirnik in nadaljuje z ocenjevanjem preostalih postavk, kot da bi bilo zapisano takole:

article:has(h2, ul) { }

:has() je bil res prizanesljiv selektor v prejšnjem osnutku z dne 7. maja 2022. Ampak to se je spremenilo po prijavi težave da je prizanesljiva narava v konfliktu z jQueryjem, ko :has() vsebuje zapleten izbirnik (npr header h2 + p). W3C je sprejel resolucijo o Znamka :has() "neprizanesljivega" selektorja pred nekaj tedni.

Torej, naš prejšnji primer? Celoten seznam izbirnikov je neveljaven, ker lažni izbirnik ni veljaven. Toda druga dva prizanesljiva selektorja, :is() in :where(), ostanejo nespremenjeni.

Za to obstaja nekakšna rešitev. Ne pozabite, :is() in :where()so prizanesljivi, četudi :has() ni. To pomeni, da lahko vstavimo katerega koli od teh izbirnikov :has() za bolj prizanesljivo vedenje:

article:has(:where(h2, ul, ::-scoobydoo)) { }

Katerega boste uporabili, je morda pomembno zaradi specifičnosti :is() je določena z najbolj specifično postavko na seznamu. Torej, če potrebujete nekaj manj specifičnega, je bolje, da posežete po tem :where() ker ne prispeva k rezultatu specifičnosti.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Posodobili smo nekaj naših objav, da odražajo najnovejše informacije. Vidim veliko drugih v divjini, ki jih je treba posodobiti, zato le malo PSA za vse, ki morajo storiti enako.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://css-tricks.com/has-is-an-unforgiving-selector/