Σύνθετη ρύθμιση πλαισίου ελέγχου με το πλέγμα CSS
ο Μονάδα διαμόρφωσης πλέγματος CSS μπορεί όχι μόνο να λύσει ένα μαμούθ ενός προβλήματος διάταξης, αλλά και κάποια καλά παλιά mulish θέματα που έχουμε που ασχολούνται με μεγάλο χρονικό διάστημα, όπως styling μια ετικέτα κουτιού ελέγχου.
Παρόλο που υπάρχει μια σχετικά απλή μέθοδος για το στυλ της ετικέτας όταν εμφανίζεται μετά το πλαίσιο ελέγχου, δεν είναι τόσο εύκολο όταν εμφανιστεί η ετικέτα πριν το.
Στυλ πλαισίου ελέγχου χωρίς το πλέγμα CSS
Σχεδίαση ετικέτας μετά ένα πλαίσιο ελέγχου είναι κάτι που εμείς οι προγραμματιστές έχουμε κάνει από τότε που διαβάζουμε για αυτό κάπου. Αυτή η τεχνική είναι ένα από τα πρωταρχικά και παλιά παραδείγματα της ισχυρής δυναμικής που μπορεί να έχει το CSS.
Εδώ είναι ο κώδικας με τον οποίο ήδη γνωρίζετε, ότι στυλ μια ετικέτα μετά ένα ελεγμένο πλαίσιο ελέγχου:
είσοδος: ελεγμένη + ετικέτα / * style me * /
ΕΝΑ ετικέτα με στυλ μετά ένα πλαίσιο ελέγχου μπορεί να μοιάζει με αυτό (ωστόσο, μπορείτε να χρησιμοποιήσετε και άλλους κανόνες στυλ):
Ο παραπάνω κώδικας CSS χρησιμοποιεί το γειτονικό συνδυαστή αδελφών που χαρακτηρίζεται από το + κλειδί. Όταν υπάρχει ένα πλαίσιο ελέγχου :τετραγωνισμένος κατάσταση, ένα στοιχείο μετά το (συνήθως μια ετικέτα) μπορεί να σχεδιαστεί χρησιμοποιώντας αυτή τη μέθοδο.
Μια τέτοια απλή και αποτελεσματική τεχνική! Τι θα μπορούσε πιθανώς πηγαίνετε στραβά με αυτό; Τίποτα - μέχρι να εμφανιστεί η ετικέτα πριν το πλαίσιο ελέγχου.
Ο γειτονικός συνδυασμός αδελφών επιλέγει το επόμενο στοιχείο. αυτό σημαίνει ότι πρέπει να έρθει η ετικέτα μετά το πλαίσιο ελέγχου στον πηγαίο κώδικα HTML.
Έτσι, για να εμφανιστεί μια ετικέτα πριν το πλαίσιο ελέγχου που ανήκει στην οθόνη, δεν μπορούμε να το μετακινήσουμε μόνο πριν από το πλαίσιο ελέγχου στον πηγαίο κώδικα ως α ο προηγούμενος επιλογέας αδερφού δεν υπάρχει στο CSS.
Αυτό αφήνει μόνο μία επιλογή: επανατοποθετήστε το πλαίσιο ελέγχου και την ετικέτα χρησιμοποιώντας μεταμορφώνω ή θέση ή περιθώριο ή μια άλλη ιδιότητα CSS με κάποιο είδος τηλεκινητικής ισχύος, έτσι ώστε η ετικέτα να εμφανίζεται στα αριστερά του πλαισίου ελέγχου στην οθόνη.
Προβλήματα με την παραδοσιακή μέθοδο
Δεν υπάρχει τίποτα κυρίως λάθος με την προαναφερθείσα τεχνική αλλά μπορεί να είναι αναποτελεσματικό σε ορισμένες περιπτώσεις. Εννοώ περιπτώσεις όπου οι αναδιαταγμένες θέσεις του πλαισίου ελέγχου και της ετικέτας δεν λειτουργούν πια.
Σκεφτείτε την ανταπόκριση, για παράδειγμα. Ίσως χρειαστεί να αλλάξετε το μέγεθος ή να αλλάξετε ξανά το πλαίσιο ελέγχου σύμφωνα με τη συσκευή στην οποία εμφανίζεται. Όταν συμβεί αυτό, θα το κάνετε πρέπει να επανατοποθετήσετε την ετικέτα επίσης, καθώς δεν θα πραγματοποιηθεί αυτόματη επανευθυγράμμιση στην ετικέτα σε απάντηση της επανατοποθέτησης / αλλαγής μεγέθους του πλαισίου ελέγχου.
Μπορούμε να εξαλείψουμε αυτό το μειονέκτημα αν μπορούσαμε απλά παρέχουν κάποια στέρεα διάταξη για το πλαίσιο ελέγχου και την ετικέτα, αντί να τα τοποθετήσετε χονδρικά στη σελίδα.
Αλλά, σχεδόν όλα τα συστήματα διάταξης, όπως πίνακες ή στήλες, απαιτούν από εσάς προσθέστε την ετικέτα πριν από το πλαίσιο ελέγχου στον πηγαίο κώδικα για να εμφανιστεί ο ίδιος τρόπος στην οθόνη. Αυτό δεν θέλουμε να κάνουμε γιατί ο επόμενος επιλογέας στοιχείων στην ετικέτα θα σταματήσει να λειτουργεί.
Το CSS Grid, από την άλλη πλευρά, είναι ένα σύστημα διάταξης που είναι δεν εξαρτάται από την τοποθέτηση / σειρά στοιχείων στο πηγαίο κώδικα.
Οι δυνατότητες αναδιάταξης της διάταξης πλέγματος επηρεάζουν σκόπιμα μόνο η οπτική απόδοση, αφήνοντας τάξη ομιλίας και πλοήγηση με βάση την τάξη πηγής. Αυτό επιτρέπει στους συγγραφείς να χειρίζονται την οπτική παρουσίαση ενώ αφήνουν ανέπαφη τη σειρά πηγής ... - CSS Layout Layout Layout Module Level 1, W3C
Έτσι, το δίκτυο CSS αποτελεί την ιδανική λύση στυλ στην ετικέτα που εμφανίζεται πριν το πλαίσιο ελέγχου.
Στυλ πλαισίου ελέγχου με το πλέγμα CSS
Ας ξεκινήσουμε με τον κώδικα HTML. Η σειρά του πλαισίου ελέγχου και της ετικέτας θα παραμείνει η ίδια όπως και πριν. Προσθέτουμε και τα δύο σε ένα πλέγμα.
Το συνοδευτικό CSS έχει ως εξής:
#cbgrid εμφάνιση: πλέγμα; πλέγμα-πρότυπο-περιοχές: "αριστερά δεξιά"? πλάτος: 150px; είσοδος [type = πλαίσιο ελέγχου] περιοχή πλέγματος: δεξιά; ετικέτα περιοχή πλέγματος: αριστερά.
Δεν θα πάω σε βάθος για το πώς λειτουργεί το δίκτυο CSS, όπως έγραψα ήδη αναλυτικό άρθρο σχετικά με το θέμα, που μπορείτε να διαβάσετε εδώ. Μερικά βασικά, ωστόσο: το εμφάνιση: πλέγμα ιδιότητα μετατρέπει ένα στοιχείο σε ένα δοχείο δικτύου, περιοχή πλέγματος προσδιορίζει την περιοχή πλέγματος που ανήκει ένα στοιχείο, και πλέγμα-πρότυπο-περιοχές σχηματίζει μια διάταξη πλέγματος, που αποτελείται από διαφορετικές περιοχές πλέγματος.
Στον παραπάνω κώδικα υπάρχουν δύο περιοχές πλέγματος: "αριστερά" και "σωστά". Αναπληρώνουν δύο στήλες μιας σειράς πλέγματος. Το πλαίσιο ελέγχου ανήκει στο "σωστά" περιοχή και την ετικέτα στο "αριστερά". Εδώ πώς φαίνονται στην οθόνη:
Δεδομένου ότι δεν άλλαξαμε τη σχετική τοποθέτηση του πλαισίου ελέγχου και της ετικέτας στον πηγαίο κώδικα, μπορούμε εξακολουθείτε να χρησιμοποιείτε τον γειτονικό συνδυαστή αδελφών:
είσοδος: ελεγμένη + ετικέτα / * style me * /
Σημειώστε ότι ένα στοιχείο πλέγματος είναι πάντα αποκλεισμένη. εμφανίζεται με ένα περίβλημα που είναι γνωστό ως κουτί επιπέδου πλέγματος. Εάν δεν το θέλετε, για παράδειγμα για μια ετικέτα, βάλτε ένα περιτύλιγμα σε αυτό το στοιχείο (τυλίξτε το σε άλλο στοιχείο) και γυρίστε το περιτύλιγμα στην περιοχή του πλέγματος.
Αυτό είναι, παιδιά. CSS πλέγμα ελπίζουμε να σας βοηθήσουν να καρφώσετε κάτω από τις διατάξεις των κουραστικών checkboxes.
