:has είναι ένας αδυσώπητος επιλογέας

Ένα μικρό πράγμα συνέβη στο δρόμο για τη δημοσίευση του CSS :has() εκλέκτορας στο ol' Almanac. Είχα περιγράψει αρχικά :has() ως «συγχωρητικός» επιλογέας, η ιδέα είναι ότι οτιδήποτε στο επιχείρημά του αξιολογείται, ακόμα κι αν ένα ή περισσότερα από τα στοιχεία είναι άκυρα.

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

Βλέπω ::scoobydoo εκεί μέσα? Αυτό είναι εντελώς άκυρο. Μια συγχωρητική λίστα επιλογέα αγνοεί αυτόν τον ψεύτικο επιλογέα και προχωρά στην αξιολόγηση των υπολοίπων στοιχείων σαν να ήταν γραμμένο ως εξής:

article:has(h2, ul) { }

:has() ήταν πράγματι ένας επιεικής επιλογέας σε προηγούμενο προσχέδιο με ημερομηνία 7 Μαΐου 2022. Αλλά αυτό άλλαξε μετά την αναφορά ενός προβλήματος ότι η συγχωρητική φύση έρχεται σε σύγκρουση με το jQuery όταν :has() περιέχει έναν σύνθετο επιλογέα (π.χ header h2 + p). Το W3C προσγειώθηκε σε μια απόφαση για να κάνω :has() ένας «ασυγχώρητος» επιλογέας πριν από λίγες εβδομάδες.

Λοιπόν, το προηγούμενο παράδειγμά μας; Ολόκληρη η λίστα επιλογέα δεν είναι έγκυρη επειδή ο πλαστός επιλογέας δεν είναι έγκυρος. Αλλά οι άλλοι δύο επιεικής εκλογείς, :is() και :where(), παραμένουν αμετάβλητα.

Υπάρχει μια μικρή λύση για αυτό. Θυμάμαι, :is() και  :where()είναι επιεικής, ακόμα κι αν :has() δεν είναι. Αυτό σημαίνει ότι μπορούμε να τοποθετήσουμε έναν από αυτούς τους επιλογείς :has() για να έχετε πιο επιεική συμπεριφορά:

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

Ποιο από αυτά που χρησιμοποιείτε μπορεί να έχει σημασία λόγω της ιδιαιτερότητας του :is() καθορίζεται από το πιο συγκεκριμένο στοιχείο στη λίστα του. Επομένως, εάν χρειάζεστε κάτι λιγότερο συγκεκριμένο, καλύτερα να το προσεγγίσετε :where() δεδομένου ότι δεν προσθέτει στη βαθμολογία ειδικότητας.

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

Ενημερώσαμε μερικές από τις αναρτήσεις μας για να αντικατοπτρίζουν τις τελευταίες πληροφορίες. Βλέπω πολλά άλλα στη φύση που πρέπει να ενημερωθούν, οπότε μόνο ένα μικρό PSA για όποιον χρειάζεται να κάνει το ίδιο.

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/has-is-an-unforgiving-selector/