: είναι () - CSS-Κόλπα

Anonim

:is() είναι το τρέχον όνομα για την ψευδο-κλάση "Matches-Any" στο προσχέδιο εργασίας CSS4.

Αρχικά, αυτή η ψευδο-κατηγορία ονομάστηκε :any()και υλοποιήθηκε με περιορισμένη υποστήριξη για συγκεκριμένους προμηθευτές:

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

Το όνομα ψευδο-κλάσης "Matches-Any" άλλαξε :matches()σε παλαιότερες εκδόσεις του προχείρου CSS4, με πρόσθετη (ελλιπής) υποστήριξη σε ορισμένα προγράμματα περιήγησης.

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

Τέλος, το τρέχον προσχέδιο εργασίας μετονόμασε αυτήν την ψευδο-κλάση σε :is(), η οποία προς το παρόν δεν υποστηρίζεται στα προγράμματα περιήγησης.

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

Ο στόχος του επιλογέα "Matches Any" (με όλα τα ονόματά του) είναι να καταστήσει ευκολότερη την σύνθετη ομαδοποίηση επιλογών.

Σύνταξη

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

Γεια, δεν είναι έτσι η προεπεξεργασία CSS;

Η απλοποίηση των επιλογών :is()είναι όμοια με τον τρόπο με τον οποίο οι προεπεξεργαστές CSS χειρίζονται ένθετους κανόνες:

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

Αλλά προσέξτε! Οι προεπεξεργαστές, όπως ο Sass, "ξετυλίγουν" τους ένθετους κανόνες σας σε μια λίστα εύκολα κατανοητών επιλογών. :is()θα χειριστεί τους κανόνες ειδικότητας λίγο διαφορετικά:

Η ιδιαιτερότητα είναι ενδιαφέρουσα

Σύμφωνα με το προσχέδιο εργασίας CSS4:

Η ιδιαιτερότητα της: είναι () ψευδο-κλάση αντικαθίσταται από την ειδικότητα του πιο συγκεκριμένου επιχειρήματός της. Έτσι, ένας επιλογέας γραμμένος με: is () δεν έχει απαραίτητα ισοδύναμη ειδικότητα με τον αντίστοιχο επιλογέα που γράφεται χωρίς: είναι ().

Αυτό σημαίνει ότι η ιδιαιτερότητα της :is()αυτόματης αναβάθμισης στο πιο συγκεκριμένο στοιχείο στη λίστα των παρεχόμενων ορισμάτων:

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

Υποστήριξη προγράμματος περιήγησης

Αναφερθήκαμε σε αυτό νωρίτερα, αλλά προς το παρόν :is()δεν υπάρχει υποστήριξη προγράμματος περιήγησης. Παρουσιάστηκε στο Πρόχειρο του Προγράμματος 1 του CSS Selectors Level 4 Specification. Αυτό σημαίνει ότι τα πράγματα εξακολουθούν να διαμορφώνονται κάνοντας λίγο νωρίς για τα προγράμματα περιήγησης να συσπειρώνονται γύρω από μια ιδέα σαν αυτή.

Τούτου λεχθέντος, έχουμε μεγάλη υποστήριξη προγράμματος περιήγησης με τη μορφή :matches(με προτίμηση προμηθευτή που :anyσυμπληρώνει ορισμένα κενά) για τη γενική λειτουργικότητα. Και, φυσικά, :notείναι μια άλλη ψευδο-τάξη που μπορεί να βοηθήσει στην αντιστοίχιση.

Αυτό που ενδιαφέρει να σημειωθεί είναι ότι :is()παρουσιάστηκε μετά το :matchesοποίο παρουσιάστηκε μετά :any. Είναι κάτι σαν :anyνα αντικαθίσταται από το :matchesοποίο αντικαθίσταται από :is(), με τις λεπτομέρειες να αλλάζουν στην πορεία. Πάντα τακτοποιημένα για να δούμε πώς εξελίσσονται αυτά τα πράγματα.

Για να λάβετε τη μέγιστη υποστήριξη για το "Matches-Any" απαιτείται η χρήση ενός συνδυασμού των ιστορικών ονομάτων, καθώς ο χειρισμός του προγράμματος περιήγησης είναι επί του παρόντος ένα hodgepodge προθεμάτων προμηθευτή και πειραματικών ρυθμίσεων σε αυτό το σημείο.

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

Δείτε τα παραδείγματα στυλό για: οποιαδήποτε ψευδο-κλάση από CSS-Tricks (@ css-tricks) στο CodePen.

Σχετιζομαι με

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

Πόροι

  • Η ανάρτηση στο blog του David Baron εξηγεί γιατί πρόσθεσε :-moz-anyυποστήριξη στον Gecko
  • Τεκμηρίωση MDN
  • CSS Selectors Level 4 Προδιαγραφή (Πρόχειρο Πρόχειρο 1): Η προδιαγραφή που εισάγει την :is()ψευδο-τάξη.
  • Γνωρίστε τους Pseudo Class Selectors: CSS-Tricks post που περιγράφει πώς λειτουργούν οι ψευδο-τάξεις.