Ο Dave Rupert με λίγη σύγχρονη μαγεία CSS που αντιμετωπίζει ένα από αυτά τα κλασικά αινίγματα: τι συμβαίνει όταν το CSS για το στοιχείο δεν είναι σε θέση να χειριστεί το περιεχόμενο που του ρίχνουμε;
Η συγκεκριμένη περίπτωση είναι όταν ένα πλέγμα διάταξης αναμένει ζυγό αριθμό στοιχείων, αλλά αντ' αυτού παρέχεται ένας περιττός αριθμός. Έχουμε μείνει με ένα στοιχείο "κρέμασμα" στο τέλος που εκτοξεύει τη διάταξη. Ακούγεται ότι αυτό που χρειάζεται είναι μερικά Αμυντικό CSS και ο Ντέιβ το καταφέρνει.
Φτάνει για :has() για να γράψετε έναν έξυπνο επιλογέα που μυρίζει το τελευταίο στοιχείο σε ένα πλέγμα που περιέχει μονό αριθμό στοιχείων:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Αναλύοντας το:
- Έχουμε ένα μητρικό κοντέινερ του
.items. - Αν το δοχείο
:has()an.itemπαιδί που είναι το τελευταίο του είδους του, - …και αυτό
.itemτυχαίνει να είναι μια περιττή περίπτωση, - …μετά επιλέξτε το πρώτο
.itemστοιχείο αυτού του τύπου και στυλ!
Σε αυτή την περίπτωση, αυτό το τελευταίο .item μπορεί να ρυθμιστεί σε πλήρες πλάτος για να αποφευχθούν τρύπες στη διάταξη.
Αν… τότε… το CSS έχει λογικές δυνάμεις! Μιλάμε μόνο για υποστήριξη για Safari TP και Edge/Chrome Canary αυτή τη στιγμή, αλλά αυτό είναι πολύ φοβερό.
Όπως είναι τυχαίο, ο Temani Afif μοιράστηκε πρόσφατα κόλπα που έμαθε ενώ πειραματίζονται με άρρητα πλέγματα. Εκμεταλλευόμενοι τον αλγόριθμο αυτόματης τοποθέτησης του CSS Grid, δεν χρειάζεται καν να δηλώνουμε ρητά έναν σταθερό αριθμό στηλών και γραμμών για ένα πλέγμα — η CSS θα τις δημιουργήσει για εμάς εάν τις χρειαστούν!
Όχι, οι τεχνικές του Temani δεν είναι εναλλακτικές λύσεις στο δίλημμα του Dave "dangler". Αλλά ο συνδυασμός της προσέγγισης του Temani για επαναλαμβανόμενα μοτίβα διάταξης πλέγματος με την αμυντική χρήση CSS του Dave :has(), έχουμε ένα αρκετά ισχυρό και πολύπλοκο πλέγμα που είναι ελαφρύ και ικανό να χειρίζεται οποιονδήποτε αριθμό αντικειμένων διατηρώντας παράλληλα ένα ισορροπημένο, επαναλαμβανόμενο μοτίβο.
