Προηγούμενοι επιλογείς αδερφών και πώς να τους ψεύδεις

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

Ξέρω ότι το θέλετε, ξέρετε ότι το θέλω, αλλά η σκληρή αλήθεια είναι ότι δεν υπάρχουν (και μάλλον ποτέ δεν θα). Υπάρχουν εκατομμύρια δημοσιεύσεις σχετικά με το whys. Υπάρχουν ακόμη και προτάσεις για τον τρόπο εφαρμογής τους. Αλλά είμαστε κολλημένοι στην μονόδρομη επεξεργασία των κανόνων CSS, που πιθανότατα θα μας προστατεύσουν από την "έλλειψη εμπειρογνωμοσύνης" μας, που θα μας κολλήσει σε επαναμεταφορές και ακόμη και σε άπειρους βρόχους.

Ευτυχώς, όπως και με τους περισσότερους περιορισμούς του CSS, μπορούμε να το ψεύσουμε.

Το πρώτο πράγμα που πρέπει να εξετάσουμε είναι γιατί θέλουμε να αρχίσουμε τα προηγούμενα αδέλφια.
Δύο περιπτώσεις έρχονται στο νου:

  1. Πρέπει να επιλέξουμε όλα τα αδέλφια ενός συγκεκριμένου στοιχείου και ο επόμενος συνδυασμός αδελφών επιλέγει μόνο αυτά που έρχονται μετά.
  2. Πρέπει να επιλέξουμε μόνο τα αδέλφια που ήρθαν πριν

1. Επιλογή όλων των αδελφών

Μερικές φορές πρέπει να επιλέξουμε τόσο τα προηγούμενα όσο και τα επόμενα αδέλφια. Για να γίνει αυτό, μπορούμε πραγματικά να επιλέξουμε τον γονέα και να χρησιμοποιήσουμε μερικά κόλπα γύρω του.

Για παράδειγμα, για να επιλέξουμε όλες τις διαστάσεις στην ακόλουθη δομή όταν πετάμε σε κάποια από αυτές, θα μπορούσαμε απλώς να χρησιμοποιήσουμε τον επιλογέα παιδιών στην αιχμή του γονέα. Φροντίζουμε να απενεργοποιήσουμε τα συμβάντα δείκτη από τον γονέα και να το επαναφέρουμε στα παιδιά. Έτσι, όποια ενέργεια θέλουμε να συμβεί, θα πυροδοτήσουμε μόνο όταν μπαίνουμε στο παιδί και όχι στον ίδιο τον γονέα.

Αν χρειάζεται να επιλέξετε όλα τα αδέλφια εκτός από αυτά που έχουν πετάξει, μπορείτε να συνδυάσετε την προηγούμενη τεχνική με τον επιλογέα: όχι για να την αποκλείσετε.

Μια τυπική περίπτωση χρήσης για αυτό είναι μενού:

Ο παραπάνω κώδικας θα μειώσει την αδιαφάνεια όλων των στοιχείων

  • , αλλά εκείνου που κινείται.

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

    Με κάποιο στυλ, θα πρέπει να λειτουργήσει έτσι:

    Παρακαλώ σημειώστε: Εάν θέλετε να εκτελέσετε το δείκτη-δείκτες: κανένας τρόπος προσέγγισης, μην ξεχνάτε ότι μπορεί να χάσει την στοίβαξη (μπορεί να σας επιτρέψει να επιλέξετε στοιχεία "κάτω" στη σειρά στοίβαξης). Επίσης, δεν θα λειτουργήσει στο IE10 και κάτω, εκτός από την ένδειξη ότι μπορεί να χρειαστείτε τα συμβάντα δείκτη για κάτι άλλο. Έτσι, προσέξτε ιδιαίτερα όταν το χρησιμοποιείτε.

    2. Επιλογή ό, τι ήρθε προηγουμένως

    Για αυτή τη περίπτωση χρήσης, μπορούμε να αντιστρέψουμε τη σειρά με το HTML, κατόπιν να την ταξινομήσουμε στο CSS και να χρησιμοποιήσουμε τον επόμενο συνδυαστή αδερφού ή τον παρακείμενο επιλογέα αδερφού. Με αυτόν τον τρόπο θα επιλέξουμε τα επόμενα αδέλφια, αλλά θα μοιάζει σαν να επιλέγουμε προηγούμενα.

    Υπάρχουν πολλοί τρόποι για να το κάνετε αυτό. Το πιο απλό και ίσως το παλαιότερο αλλάζει την κατεύθυνση γραφής του δοχείου μας:

    Αν τα στοιχεία σας χρειάζονται να εμφανίσουν το πραγματικό κείμενο, μπορείτε πάντα να το αντιστρέψετε:

    Αλλά αυτό μπορεί να ξεφύγει από πολλούς τρόπους. Ευτυχώς, η σύγχρονη εργαλειοθήκη CSS καθιστά πολύ απλούστερη και ασφαλέστερη. Μπορούμε να χρησιμοποιήσουμε μόνο το Flexbox στο δοχείο και να αναστρέψουμε την παραγγελία με ευέλικτη κατεύθυνση: row-reverse:

    Το καλύτερο πράγμα για την προσέγγιση Flexbox είναι ότι δεν χάνουμε την κατεύθυνση της γραφής. Δεν χρειάζεται να επαναφέρουμε τα παιδιά και όλα είναι πολύ πιο προβλέψιμα.

    Χρησιμοποιώντας "προηγούμενα αδέλφια" για να δημιουργήσετε ένα σύστημα βαθμολόγησης αστέγων CSS μόνο

    Σηματικά, ένα σύστημα διαβάθμισης μπορεί να θεωρηθεί ως απλή λίστα ραδιοφωνικών κουμπιών με τις αντίστοιχες ετικέτες τους. Αυτό είναι χρήσιμο, καθώς θα μας επιτρέψει να χρησιμοποιήσουμε τον: ελεγχόμενο ψευδο-επιλογέα για να τροποποιήσουμε τα αδέλφια.

    Ας ξεκινήσουμε λοιπόν από εκεί:

    Όπως συζητήσαμε προηγουμένως, τα στοιχεία είναι σε αντίστροφη σειρά ώστε να επιτρέπουν την επιλογή ενός "προηγούμενου αδελφού". Παρατηρήστε ότι χρησιμοποιούμε τον χαρακτήρα unicode "άσπρο αστέρι" (U + 2606) για να αναπαριστάμε τα κενά αστέρια.

    Ας εμφανίσουμε τα πλάγια-πλάι, με τη σωστή σειρά (αντίστροφη):

    Τώρα αποκρύψτε τα κουμπιά επιλογής τους, κανείς δεν θέλει να δει ότι:

    Και εφαρμόστε κάποιο στυλ στους χαρακτήρες αστέρων:

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

    Όταν πετάμε πάνω από ένα αστέρι, το γεμάτο ψευδοστατικό άστρο θα πρέπει να γίνει ορατό για αυτό και για όλα τα προηγούμενα αδέλφια.

    Το ίδιο πράγμα για την επιλεγμένη βαθμολογία, ταιριάζοντας όλες τις ετικέτες που εμφανίζονται πριν από το επιλεγμένο κουμπί επιλογής:

    Θυμηθείτε ότι η χρήση της σημαντικής σημαίας είναι ακριβώς το αντίθετο μιας καλής πρακτικής. Το κάνω εδώ, καθώς δεν υπάρχει άλλος τρόπος να επιτευχθεί η προστιθέμενη λειτουργικότητα που συζητείται στο επόμενο τμήμα χωρίς αυτό.

    Τελευταίο αλλά όχι λιγότερο σημαντικό, πρέπει να "θυμηθούμε" την τρέχουσα βαθμολογία, μόνο σε περίπτωση που ο χρήστης θέλει να την αλλάξει. Για παράδειγμα, εάν είχαν επιλέξει πέντε αστέρια και για οποιονδήποτε λόγο θέλουν να το αλλάξουν σε τέσσερα, θα έπρεπε να εμφανίσουμε τα αστέρια 1 ως 4 όπως γεμίστηκαν και το πέμπτο ως ημιδιαφανές όταν θα πετούν πάνω από το τέταρτο.

    Αυτό μπορεί να επιτευχθεί με την αλλαγή της αδιαφάνειας των προηγούμενων αδελφών της ελεγχόμενης εισόδου όταν αιωρείται πάνω από το δοχείο:

    Αυτός είναι και ο λόγος για τον οποίο χρειαζόμασταν την αδιαφάνεια: 1! Σημαντική στην αρχική αιώρηση. Διαφορετικά αυτός ο τελευταίος κανόνας θα είχε κερδίσει τον διαγωνισμό ιδιαιτερότητας και θα εφαρμόσει ένα ημιδιαφανές συμπλήρωμα σε όλα.

    Και το διαθέτουμε, ένα σύστημα διαβάθμισης με αστέρια, το οποίο λειτουργεί αποκλειστικά σε μορφή CSS, χρησιμοποιώντας αποκλειστικά "προηγούμενα αδέλφια".

    Όπως μπορείτε να δείτε, μόνο και μόνο επειδή "είναι αδύνατο" δεν σημαίνει ότι δεν πρέπει να προσπαθήσετε. Ο προγραμματισμός αφορά στην προώθηση των ορίων. Έτσι κάθε φορά που χτυπάτε τον τοίχο, απλά πιέστε λίγο πιο σκληρά. Ή μήπως πιστεύω ότι βρίσκοντας το δρόμο σας γύρω από αυτό ίσως να είναι μια καλύτερη αναλογία; ... ούτως ή άλλως, ξέρετε τι εννοώ. Συνεχίστε με την πειρατεία!

    Μια σημείωση σχετικά με την προσβασιμότητα

    Το προηγούμενο απόσπασμα είναι μια απλούστευση προκειμένου να καταστεί εύκολη η κατανόησή του. Δεν είναι κάτι που θα πρότεινα να χρησιμοποιήσω στην παραγωγή λόγω πολλών περιορισμών προσβασιμότητας.

    Για να γίνει το απόσπασμα λίγο πιο προσβάσιμο, το πρώτο πράγμα θα ήταν να κρύψετε τα κουμπιά ραδιοφώνου με σχεδόν οποιαδήποτε τεχνική εκτός από την οθόνη: καμία για να τα κάνετε συγκεντρωτικά. Θα πρέπει επίσης να προσθέσουμε κάποιο δακτύλιο εστίασης σε ολόκληρο το απόσπασμα αστέρια όταν οποιοδήποτε στοιχείο στο εσωτερικό είναι εστιασμένο, μέσω του ψευδοεπιλογέα: εστίαση μέσα.

    Οι ίδιες ετικέτες "☆" δεν έχουν νόημα για τους αναγνώστες οθόνης, οπότε η καλύτερη προσέγγιση θα είναι να υπάρχει μέσα στην ετικέτα με κείμενο "n Stars", το οποίο θα αποκρύπτεται από τους χρήστες με προβλήματα όρασης.

    Επίσης η αντίστροφη απεικόνιση πηγής HTML +: η προσέγγιση σειράς-αντίστροφων κάνει την αξιολόγηση πληκτρολογίου δύσκολη, καθώς δεν αντιστρέφεται. Η προσβασιμότητα του Flexbox και του πληκτρολογίου είναι αρκετά βρώμικο θέμα, αλλά το πιο κοντινό σε μια λύση για αυτό είναι η προσθήκη aria-flowtotag σε κάθε στοιχείο, το οποίο τουλάχιστον διορθώνει το ζήτημα για μερικούς αναγνώστες οθόνης + συνδυασμούς περιηγητών.

    Για ένα πιο προσβάσιμο απόσπασμα (χρησιμοποιώντας μια εναλλακτική τεχνική τροποποίησης των επόμενων αδελφών για να φαίνονται κενά αντί να προσπαθήσουμε να κρίνουμε προηγούμενα), ελέγξτε τον Patrick Cole, όπως συζητήσαμε στις παρακάτω απαντήσεις.