:has to bezlitosny selektor

W drodze do publikacji wydarzyło się coś małego CSS :has() selektor do starego Almanachu. pierwotnie opisałem :has() jako „przebaczający” selektor, z ideą, że wszystko w jego argumencie jest oceniane, nawet jeśli jeden lub więcej elementów jest nieważny.

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

See ::scoobydoo tam? To jest całkowicie niepoprawne. Wybaczająca lista selektorów ignoruje ten fałszywy selektor i przechodzi do oceny pozostałych pozycji, tak jakby była napisana w następujący sposób:

article:has(h2, ul) { }

:has() był rzeczywiście wyrozumiałym selektorem w poprzednim projekcie z dnia 7 maja 2022 r. Ale to się zmieniło po zgłoszeniu problemu że wybaczająca natura koliduje z jQuery kiedy :has() zawiera złożony selektor (np header h2 + p). W3C wylądowało na rezolucji do robić :has() „bezlitosny” selektor zaledwie kilka tygodni temu.

A więc nasz poprzedni przykład? Cała lista selektorów jest nieprawidłowa, ponieważ fałszywy selektor jest nieprawidłowy. Ale pozostali dwaj wybaczający selektory, :is() i :where(), pozostają bez zmian.

Jest na to trochę obejścia. Pamiętać, :is() i :where()wybaczają, nawet jeśli :has() nie jest. Oznacza to, że możemy zagnieździć dowolny z tych selektorów :has() aby uzyskać bardziej wyrozumiałe zachowanie:

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

To, którego użyjesz, może mieć znaczenie, ponieważ jego specyfika :is() jest określany przez najbardziej szczegółową pozycję na liście. Tak więc, jeśli potrzebujesz czegoś mniej szczegółowego, lepiej sięgnij po to :where() ponieważ nie dodaje się do wyniku specyficzności.

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

Zaktualizowaliśmy kilka naszych postów, aby odzwierciedlić najnowsze informacje. Widzę wiele innych na wolności, które wymagają aktualizacji, więc tylko trochę PSA dla każdego, kto musi zrobić to samo.

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/has-is-an-unforgiving-selector/