Η :has()
ψευδο-τάξη είναι, με τα χέρια προς τα κάτω, το αγαπημένο μου νέο χαρακτηριστικό CSS. Ξέρω ότι είναι και για πολλούς από εσάς, τουλάχιστον όσοι από εσάς συμμετείχατε στην έρευνα State of CSS. Η ικανότητα να γράφουμε επιλογείς ανάποδα μας δίνει περισσότερες υπερδυνάμεις που ποτέ δεν πίστευα δυνατές.
Λέω «περισσότερες υπερδυνάμεις» γιατί έχουν ήδη δημοσιευτεί πάρα πολλές καταπληκτικές έξυπνες ιδέες από ένα σωρό σούπερ έξυπνους ανθρώπους, όπως:
Αυτό το άρθρο δεν είναι ένας οριστικός οδηγός :has()
. Επίσης, δεν είναι εδώ για να επαναφέρουμε όσα έχουν ήδη ειπωθεί. Είμαι μόνο εγώ (γεια 👋) που πηδάω για μια στιγμή για να μοιραστώ μερικούς από τους τρόπους που είναι πιο πιθανό να χρησιμοποιήσω :has()
στην καθημερινή μου δουλειά… δηλαδή από τη στιγμή που υποστηρίζεται επίσημα από τον Firefox που επίκειται.
Όταν συμβεί αυτό, μπορείτε να στοιχηματίσετε ότι θα αρχίσω να το χρησιμοποιώ :has()
παντού. Ακολουθούν μερικά παραδείγματα πραγματικών πραγμάτων που έφτιαξα πρόσφατα και σκέφτηκα από μέσα μου, «Γεε, αυτό θα είναι πολύ πιο ωραίο μια φορά :has()
υποστηρίζεται πλήρως.»
Αποφύγετε την ανάγκη πρόσβασης εκτός του στοιχείου JavaScript
Έχετε δημιουργήσει ποτέ ένα διαδραστικό στοιχείο που μερικές φορές χρειάζεται να επηρεάσει τα στυλ κάπου αλλού στη σελίδα; Πάρτε το ακόλουθο παράδειγμα, όπου <nav>
είναι ένα mega μενούκαι ανοίγοντάς το αλλάζει τα χρώματα του <header>
περιεχόμενο πάνω από αυτό.
Νιώθω ότι πρέπει να κάνω κάτι τέτοιο όλη την ώρα.
Αυτό το συγκεκριμένο παράδειγμα είναι ένα στοιχείο React που έφτιαξα για έναν ιστότοπο. Έπρεπε να «φθάσω έξω» με το τμήμα React της σελίδας document.querySelector(...)
και αλλάξτε μια τάξη στο <body>
, <header>
, ή άλλο συστατικό. Αυτό δεν είναι το τέλος του κόσμου, αλλά σίγουρα είναι κάπως άσχημο. Ακόμη και σε έναν ιστότοπο πλήρως React (ένας ιστότοπος Next.js, ας πούμε), θα έπρεπε να επιλέξω μεταξύ της διαχείρισης ενός menuIsOpen
δηλώστε πολύ ψηλότερα στο δέντρο συστατικών ή κάντε την ίδια επιλογή στοιχείου DOM — η οποία δεν είναι πολύ React-y.
Με :has()
, το πρόβλημα εξαφανίζεται:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Δεν χρειάζεται πλέον να ασχολούμαι με άλλα μέρη του DOM στα στοιχεία JavaScript μου!
Καλύτερη διαγράμμιση τραπεζιού UX
Η προσθήκη εναλλακτικών "λωρίδων" σειρών στα τραπέζια σας μπορεί να είναι μια ωραία βελτίωση του UX. Βοηθούν τα μάτια σας να παρακολουθούν σε ποια σειρά βρίσκεστε καθώς σαρώνετε τον πίνακα.
Αλλά από την εμπειρία μου, αυτό δεν λειτουργεί καλά σε τραπέζια με μόνο δύο ή τρεις σειρές. Εάν έχετε, για παράδειγμα, έναν πίνακα με τρεις σειρές στο <tbody>
και "ζώνετε" κάθε "ζυγή" σειρά, θα μπορούσατε να καταλήξετε με μία μόνο λωρίδα. Αυτό δεν αξίζει πραγματικά ένα μοτίβο και μπορεί οι χρήστες να αναρωτιούνται τι είναι τόσο ιδιαίτερο σε αυτή τη γραμμή που τονίζεται.
Χρησιμοποιώντας αυτή την τεχνική όπου Ο Bramus χρησιμοποιεί :has()
να εφαρμόσει στυλ με βάση τον αριθμό των παιδιών, μπορούμε να εφαρμόσουμε λωρίδες πίνακα όταν υπάρχουν περισσότερες από, ας πούμε, τρεις σειρές:
Τι να γίνει πιο φανταχτερό; Θα μπορούσατε επίσης να αποφασίσετε να το κάνετε αυτό μόνο εάν ο πίνακας έχει τουλάχιστον έναν συγκεκριμένο αριθμό στηλών:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Καταργήστε τη λογική κλάσης υπό όρους από τα πρότυπα
Συχνά χρειάζεται να αλλάξω μια διάταξη σελίδας ανάλογα με το τι υπάρχει στη σελίδα. Ακολουθήστε την ακόλουθη διάταξη πλέγματος, όπου η τοποθέτηση του κύριου περιεχομένου αλλάζει τις περιοχές πλέγματος ανάλογα με το αν υπάρχει πλευρική γραμμή.
Αυτό είναι κάτι που μπορεί να εξαρτηθεί από το εάν υπάρχουν σελίδες αδελφών που έχουν οριστεί στο CMS. Συνήθως θα το έκανα με τη λογική του προτύπου για προσθήκη υπό όρους Κατηγορίες τροποποιητών BEM στο περιτύλιγμα διάταξης για να ληφθούν υπόψη και οι δύο διατάξεις. Αυτό το CSS μπορεί να μοιάζει κάπως έτσι (κανόνες απόκρισης και άλλα πράγματα που παραλείπονται για συντομία):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
Από άποψη CSS, αυτό είναι απολύτως εντάξει, φυσικά. Αλλά κάνει τον κώδικα του προτύπου λίγο ακατάστατο. Ανάλογα με τη γλώσσα προτύπων σας, μπορεί να είναι πολύ άσχημο να προσθέτετε υπό όρους μια δέσμη τάξεων, ειδικά αν πρέπει να το κάνετε και με πολλά θυγατρικά στοιχεία.
Αντιπαραθέστε το με το α :has()
-βασισμένη προσέγγιση:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
Ειλικρινά, αυτό δεν είναι πολύ καλύτερο από πλευράς CSS. Αλλά η κατάργηση των κατηγοριών τροποποιητών υπό όρους από το πρότυπο HTML είναι μια καλή νίκη, αν με ρωτάτε.
Είναι εύκολο να σκεφτείς αποφάσεις μικροσχεδίασης :has()
- σαν μια κάρτα όταν έχει μια εικόνα μέσα της — αλλά νομίζω ότι θα είναι πολύ χρήσιμο και για αυτές τις αλλαγές διάταξης μακροεντολών.
Καλύτερη διαχείριση ειδικότητας
Αν διαβάσετε το τελευταίο μου άρθρο, θα ξέρετε ότι είμαι κολλητός για την ιδιαιτερότητα. Εάν, όπως εγώ, δεν θέλετε οι βαθμολογίες ιδιαιτερότητάς σας να ξεσπούν κατά την προσθήκη :has()
και :not()
σε όλα τα στυλ σας, φροντίστε να χρησιμοποιήσετε :where()
.
Αυτό συμβαίνει επειδή η ιδιαιτερότητα του :has()
βασίζεται σε το πιο συγκεκριμένο στοιχείο στη λίστα ορισμάτων του. Έτσι, εάν έχετε κάτι σαν ταυτότητα εκεί μέσα, ο επιλογέας σας θα είναι δύσκολο να παρακάμψει στον καταρράκτη.
Από την άλλη πλευρά, η ιδιαιτερότητα του :where()
είναι πάντα μηδέν, χωρίς ποτέ να προσθέτει στη βαθμολογία ειδικότητας.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Το μέλλον είναι λαμπρό
Αυτά είναι μόνο μερικά πράγματα που ανυπομονώ να τα χρησιμοποιήσω στην παραγωγή. Το CSS-Tricks Almanac έχει επίσης ένα σωρό παραδείγματα. Με τι ανυπομονείς να κάνεις :has()
? Τι είδους παραδείγματα πραγματικού κόσμου έχετε συναντήσει πού :has()
θα ήταν η τέλεια λύση;
- SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
- Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
- πηγή: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- ικανότητα
- Ικανός
- Σχετικα
- πάνω από
- Λογαριασμός
- επηρεάζουν
- Όλα
- ήδη
- πάντοτε
- καταπληκτικό
- και
- Άλλος
- Εφαρμογή
- πλησιάζω
- περιοχές
- επιχείρημα
- άρθρο
- βασίζονται
- επειδή
- Στοίχημα
- Καλύτερα
- μεταξύ
- Κομμάτι
- Πιέζοντας
- χτισμένο
- τσαμπί
- Μπορεί να πάρει
- κάρτα
- καταρράκτης
- ορισμένες
- αλλαγή
- Αλλαγές
- παιδί
- Επιλέξτε
- τάξη
- τάξεις
- εκατοστά
- κωδικός
- Στήλες
- συστατικό
- Περιέχει
- περιεχόμενο
- θα μπορούσε να
- Πορεία
- CSS
- αποφάσεις
- οριστικός
- Σε συνάρτηση
- Υπηρεσίες
- Όχι
- πράξη
- DOM
- Μην
- κάτω
- στοιχεία
- ειδικά
- κ.λπ.
- Even
- ΠΑΝΤΑ
- Κάθε
- παράδειγμα
- παραδείγματα
- εμπειρία
- μάτια
- Αγαπημένα
- Χαρακτηριστικό
- λίγοι
- τέλος
- Firefox
- Εξής
- Προς τα εμπρός
- από
- πλήρως
- παίρνω
- δίνει
- πηγαίνει
- μετάβαση
- εξαιρετική
- Πλέγμα
- πλέγμα-πρότυπο-περιοχές
- καθοδηγήσει
- συμβαίνω
- που έχει
- βοήθεια
- εδώ
- hi
- υψηλότερο
- Τόνισε
- HTML
- HTTPS
- ΕΓΩ ΘΑ
- ιδεών
- εικόνα
- βελτίωση
- in
- διαδραστικό
- IT
- το JavaScript
- μόνο ένα
- Διατήρηση
- Είδος
- Ξέρω
- Γλώσσα
- Επίθετο
- σχέδιο
- Πιθανός
- λίγο
- ματιά
- κοιτάζοντας
- Παρτίδα
- Macro
- που
- Κυρίως
- κάνω
- διαχείριση
- πολοί
- ενδέχεται να
- στιγμή
- περισσότερο
- πλέον
- Mozilla
- Ανάγκη
- ανάγκες
- Νέα
- επόμενη
- Next.js
- Κανονικά
- αριθμός
- Επίσημα
- ONE
- άνοιγμα
- ΑΛΛΑ
- εκτός
- μέρος
- Ειδικότερα
- εξαρτήματα
- πρότυπο
- People
- τέλειος
- Μέρος
- Πλάτων
- Πληροφορία δεδομένων Plato
- Πλάτωνα δεδομένα
- δυνατός
- παρόν
- αρκετά
- Πρόβλημα
- παραγωγή
- δημοσιεύθηκε
- φθάσουν
- Αντίδραση
- Διάβασε
- πραγματικό κόσμο
- πρόσφατα
- αφαίρεση
- ανταποκρίνονται
- ΣΕΙΡΑ
- κανόνες
- τρέξιμο
- Είπε
- ίδιο
- σάρωση
- επιλογή
- σειρά
- Κοινοποίηση
- ιστοσελίδα
- έξυπνος
- So
- λύση
- μερικοί
- κάτι
- κάπου
- ειδική
- συγκεκριμένες
- εξειδίκευση
- Εκκίνηση
- Κατάσταση
- ρίγα
- Ρίγες
- στυλ
- Σούπερ
- υποστηριζόνται!
- τραπέζι
- Πάρτε
- TD
- πρότυπο
- Η
- Το κράτος
- ο κόσμος
- πράγμα
- πράγματα
- σκέψη
- τρία
- παντού
- προς την
- τόνος
- πολύ
- ΣΥΝΟΛΙΚΑ
- τροχιά
- αληθής
- Άνω μέρος
- us
- χρήση
- Χρήστες
- ux
- περιμένετε
- τρόπους
- Τι
- αν
- Ποιό
- Ο ΟΠΟΊΟΣ
- νίκη
- Αναρωτιούνται
- Εργασία
- κόσμος
- αξία
- θα
- γράφω
- Εσείς
- Σας
- zephyrnet