Προσαρμογή υπό όρους επιλεγμένων στοιχείων σε δοχείο πλέγματος

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

Βρήκα έναν προσεγμένο τρόπο εμφάνισης επιλέξιμων επιλογών σε ένα πλέγμα. Όχι, δεν γίνεται εκ νέου δημιουργία αυτού του reCAPTCHA, αλλά απλώς η δυνατότητα επιλογής πολλών στοιχείων. Και όταν επιλέγονται δύο ή περισσότερα παρακείμενα στοιχεία, μπορούμε να χρησιμοποιήσουμε το έξυπνο :nth-of-type συνδυαστές, ψευδοστοιχεία και το :checked ψευδο-κλάση για να τα διαμορφώσετε με τρόπο που να φαίνονται ομαδοποιημένα.

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

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

Πριν ξεκινήσουμε…

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

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

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

Ας ξεκινήσουμε τώρα

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

Το παρακάτω σχήμα δείχνει πώς το ::before ψευδοστοιχεία κουτιών σε καθένα στήλη (εκτός από την πρώτη στήλη) επικαλύπτουν τα πλαίσια στα αριστερά τους και πώς το ::after ψευδοστοιχεία κουτιών σε καθένα σειρά (εκτός από την πρώτη σειρά) επικαλύπτουν τα παραπάνω πλαίσια.

Εδώ είναι ο βασικός κωδικός

Η σήμανση είναι αρκετά απλή:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

Υπάρχουν λίγο περισσότερα που συμβαίνουν στο αρχικό CSS. Αλλά, πρώτα, το ίδιο το πλέγμα:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

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

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Σημειώστε, επίσης, ότι τα ίδια τα πλαίσια ελέγχου είναι πλέγματα. Αυτό είναι το κλειδί για την τοποθέτησή τους ::before και ::after ψευδοστοιχεία. Εδώ που τα λέμε, ας το κάνουμε τώρα:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Επιλέγουμε μόνο τα ψευδοστοιχεία των πλαισίων ελέγχου που δεν βρίσκονται στην πρώτη στήλη ή στην πρώτη σειρά του πλέγματος. input:not(:nth-of-type(4n+1)) ξεκινά από το πρώτο πλαίσιο ελέγχου και, στη συνέχεια, επιλέγει το ::before κάθε τέταρτο στοιχείο από εκεί. Προσέξτε όμως λέμε :not(), οπότε πραγματικά αυτό που κάνουμε είναι παρακάμπτοντας ο ::before ψευδοστοιχείο κάθε τέταρτου πλαισίου ελέγχου, ξεκινώντας από το πρώτο. Στη συνέχεια, εφαρμόζουμε στυλ στο ::after ψευδό κάθε πλαισίου ελέγχου από το πέμπτο.

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

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Styling το :checked κατάσταση

Τώρα έρχεται το στυλ των πλαισίων ελέγχου όταν βρίσκονται σε α :checked κατάσταση. Αρχικά, ας τους δώσουμε ένα χρώμα, ας πούμε α limegreen Ιστορικό:

input:checked { background: limegreen; }

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

Αυτό γίνεται στοχεύοντας τα σωστά ψευδοστοιχεία. Πώς θα το κάνουμε αυτό; Λοιπόν, εξαρτάται από τον πραγματικό αριθμό των στηλών στο πλέγμα. Ακολουθεί το CSS εάν δύο παρακείμενα πλαίσια είναι επιλεγμένα σε ένα πλέγμα 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Εάν προτιμάτε, μπορείτε να δημιουργήσετε τον παραπάνω κώδικα δυναμικά. Ωστόσο, ένα τυπικό πλέγμα, ας πούμε μια συλλογή εικόνων, ο αριθμός των στηλών θα είναι μικρός και πιθανότατα ένας σταθερός αριθμός στοιχείων, ενώ οι σειρές μπορεί να αυξάνονται συνεχώς. Ειδικά αν έχει σχεδιαστεί για οθόνες κινητών. Αυτός είναι ο λόγος για τον οποίο αυτή η προσέγγιση εξακολουθεί να είναι ένας αποτελεσματικός τρόπος. Εάν για κάποιο λόγο η εφαρμογή σας τυχαίνει να έχει περιορισμένες σειρές και επεκτεινόμενες στήλες, τότε εξετάστε το ενδεχόμενο να περιστρέψετε το πλέγμα προς τα πλάγια επειδή, με μια ροή στοιχείων, το Πλέγμα CSS τα ταξινομεί από αριστερά προς τα δεξιά και από πάνω προς τα κάτω (π.χ. γραμμή προς σειρά) .

Πρέπει επίσης να προσθέσουμε στυλ για τα τελευταία πλαίσια ελέγχου στο πλέγμα — δεν καλύπτονται όλα από ψευδοστοιχεία, καθώς είναι τα τελευταία στοιχεία σε κάθε άξονα.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

Αυτοί είναι μερικοί δύσκολοι επιλογείς! Η πρώτη…

input:nth-of-type(4n-1):checked + input:checked

Βασικά λέει αυτό:

Ένα ελεγμένο <input> στοιχείο δίπλα σε ένα επιλεγμένο <input> στη δεύτερη τελευταία στήλη.

Και η nth-of-type υπολογίζεται ως εξής:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

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

Και αυτή η γραμμή:

input:nth-of-type(4n):checked + * + * + * + input:checked

Λέει αυτό:

An <input> στοιχείο υπό τον όρο ότι είναι επιλεγμένο, είναι άμεσα παρακείμενο σε ένα στοιχείο, το οποίο είναι άμεσα παρακείμενο σε ένα άλλο στοιχείο, το οποίο είναι επίσης άμεσα παρακείμενο σε ένα άλλο στοιχείο, το οποίο, με τη σειρά του, είναι άμεσα παρακείμενο σε <input> στοιχείο που βρίσκεται σε επιλεγμένη κατάσταση.

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

Βάζοντας το στη χρήση

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

Χρησιμοποίησα στρογγυλεμένα περιγράμματα, αλλά μπορείτε να δοκιμάσετε άλλα σχήματα ή ακόμα και να πειραματιστείτε με εφέ φόντου (Η Temani σας καλύπτει για ιδέες). Τώρα που ξέρετε πώς λειτουργεί η φόρμουλα, τα υπόλοιπα είναι αποκλειστικά στη φαντασία σας.

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

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

---

Αυτό είναι περιτύλιγμα! Αρκετά τακτοποιημένο, σωστά; Θέλω να πω, δεν υπάρχει τίποτα ακριβώς "νέο" σχετικά με αυτό που συμβαίνει. Αλλά είναι ένα καλό παράδειγμα επιλέγοντας πράγματα σε CSS. Εάν διαθέτουμε πιο προηγμένες τεχνικές επιλογής που χρησιμοποιούν συνδυασμούς και ψευδό, τότε οι δυνάμεις μας στο στυλ μπορούν να ξεπεράσουν πολύ το στυλ ενός αντικειμένου — όπως είδαμε, μπορούμε να διαμορφώσουμε στοιχεία υπό όρους με βάση την κατάσταση ενός άλλου στοιχείου.

---

Προσαρμογή υπό όρους επιλεγμένων στοιχείων σε δοχείο πλέγματος δημοσιεύθηκε αρχικά στις CSS-Κόλπα. Θα έπρεπε λάβετε το ενημερωτικό δελτίο.

• Coinsmart. Το καλύτερο ανταλλακτήριο Bitcoin και Crypto στην Ευρώπη.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. ΕΛΕΥΘΕΡΗ ΠΡΟΣΒΑΣΗ.
• CryptoHawk. Ραντάρ Altcoin. Δωρεάν δοκιμή.
• Πηγή: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/