:has is een meedogenloze selector

Er gebeurde iets kleins op weg naar de publicatie van de CSS :has() keuzeschakelaar naar de oude Almanak. ik oorspronkelijk had beschreven :has() als een "vergevingsgezinde" selector, met het idee dat alles in het argument wordt geëvalueerd, zelfs als een of meer van de items ongeldig zijn.

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

Bekijk ::scoobydoo daarin? Dat is totaal ongeldig. Een vergevingsgezinde selectorlijst negeert die nep-selector en gaat verder met het evalueren van de rest van de items alsof het zo is geschreven:

article:has(h2, ul) { }

:has() was inderdaad een vergevingsgezinde selector in een eerder ontwerp van 7 mei 2022. Maar dat veranderde nadat er een probleem was gemeld dat de vergevingsgezinde aard in strijd is met jQuery wanneer :has() bevat een complexe selector (bijv header h2 + p). Het W3C landde op een resolutie om maken :has() een "meedogenloze" selector slechts een paar weken geleden.

Dus ons vorige voorbeeld? De hele selectorlijst is ongeldig omdat de valse selector ongeldig is. Maar de andere twee vergevingsgezinde selectors, :is() en :where(), blijven ongewijzigd.

Hier is een kleine oplossing voor. Herinneren, :is() en :where()zijn vergevingsgezind, zelfs als :has() is niet. Dat betekent dat we een van deze selectors kunnen nesten :has() om meer vergevingsgezind gedrag te krijgen:

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

Welke u gebruikt, kan ertoe doen vanwege de specificiteit van :is() wordt bepaald door het meest specifieke item in de lijst. Dus als je iets minder specifieks nodig hebt, kun je er beter naar reiken :where() omdat het niet bijdraagt ​​aan de specificiteitsscore.

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

We hebben enkele van onze berichten bijgewerkt om de laatste informatie weer te geven. Ik zie veel anderen in het wild die moeten worden bijgewerkt, dus een kleine PSA voor iedereen die hetzelfde moet doen.

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/has-is-an-unforgiving-selector/