Για πολλά χρόνια, τα επιπλέουν στην CSS ήταν μια λεπτή, αλλά απαραίτητη, συνιστώσα στη δημιουργία ιστοσελίδων. Εάν ο σχεδιασμός σας ζήτησε πολλαπλές στήλες, στράφηκε σε πλωτήρες . Το πρόβλημα με αυτή τη μέθοδο είναι ότι, παρά την απίστευτη επινοητικότητα που επέδειξαν οι σχεδιαστές ιστοσελίδων / προγραμματιστές για τη δημιουργία πολύπλοκων διατάξεων τοποθεσιών, τα πλωτά αντικείμενα CSS ποτέ δεν προορίζονταν να χρησιμοποιηθούν με αυτό τον τρόπο.
Ενώ οι πλωτήρες και η τοποθέτηση CSS είναι βέβαιο ότι θα έχουν θέση στον σχεδιασμό ιστοσελίδων για πολλά χρόνια, οι νεώτερες τεχνικές διάταξης, όπως το CSS Grid και το Flexbox, δίνουν τώρα στους σχεδιαστές ιστοσελίδων νέους τρόπους για να δημιουργήσουν τις τοποθετήσεις τους στο site τους. Μια άλλη νέα τεχνική διάταξης που δείχνει πολλές δυνατότητες είναι οι Πολλαπλές Στήλες CSS.
Οι στήλες CSS υπήρξαν εδώ και μερικά χρόνια, αλλά η έλλειψη υποστήριξης σε παλαιότερους φυλλομετρητές (κυρίως παλαιότερες εκδόσεις του Internet Explorer) κράτησε πολλούς επαγγελματίες του διαδικτύου από τη χρήση αυτών των μορφών στην παραγωγική τους εργασία.
Με το τέλος της υποστήριξης για τις παλαιότερες εκδόσεις του IE, ορισμένοι σχεδιαστές ιστοσελίδων πειραματίζονται τώρα με νέες επιλογές διάταξης CSS, συμπεριλαμβανομένων των Στήλων CSS και βρίσκοντας ότι έχουν πολύ μεγαλύτερο έλεγχο με αυτές τις νέες προσεγγίσεις από ό, τι με τους πλωτήρες.
Τα βασικά των Στήλων CSS
Όπως υποδηλώνει το όνομά της, οι Πολλαπλές Στήλες CSS (γνωστές και ως CSS3 multi-column layout) σας δίνουν τη δυνατότητα να χωρίσετε το περιεχόμενο σε έναν καθορισμένο αριθμό στηλών. Οι πιο βασικές ιδιότητες CSS που χρησιμοποιείτε είναι:
- μέτρηση στήλης
- κενό στη στήλη
Για τον αριθμό στήλης, καθορίζετε τον αριθμό των στηλών που θέλετε. Το κενό της στήλης θα είναι τα υδρορροές ή η απόσταση μεταξύ αυτών των στηλών. Το πρόγραμμα περιήγησης θα λάβει αυτές τις τιμές και θα κατανείμει ομοιόμορφα το περιεχόμενο στον αριθμό των στηλών που καθορίζετε.
Ένα κοινό παράδειγμα των πολλών στηλών CSS στην πράξη θα ήταν να χωρίσετε ένα μπλοκ του περιεχομένου κειμένου σε πολλές στήλες, παρόμοιο με αυτό που θα δείτε σε ένα άρθρο εφημερίδας. Ας υποθέσουμε ότι έχετε την ακόλουθη σήμανση HTML (σημειώστε ότι, για παράδειγμα, θέτω μόνο την αρχή μιας παραγράφου, ενώ στην πράξη θα υπήρχαν πιθανότητες πολλαπλών παραγράφων περιεχομένου σε αυτό το markup):
Η επικεφαλίδα του άρθρου σας
Φανταστείτε εδώ πολλές παρτίδες κειμένου ...
Εάν στη συνέχεια γράψετε αυτά τα στυλ CSS:
.content {-moz-column-count: 3; -webkit-count: 3; Αριθμός στήλης: 3. - διαφορά-στήλη-κενό: 30px; -webkit-στήλη-χάσμα: 30px; κενό-στήλη: 30px; }}Αυτός ο κανόνας CSS θα διαιρέσει την διαίρεση "περιεχομένου" σε 3 ίσες στήλες με κενό 30 pixel μεταξύ τους. Αν θέλατε δύο στήλες αντί για 3, απλώς θα αλλάζετε αυτήν την τιμή και το πρόγραμμα περιήγησης θα υπολογίζει τα νέα πλάτη αυτών των στηλών για να κατανείμει το περιεχόμενο ομοιόμορφα. Παρατηρήστε ότι χρησιμοποιούμε πρώτα τις ιδιότητες του προτείνοντος προμηθευτή, ακολουθούμενες από τις μη προκαθορισμένες δηλώσεις.
Όπως είναι εύκολο, η χρήση του με αυτόν τον τρόπο είναι αμφισβητήσιμη για τη χρήση του ιστότοπου. Ναι, μπορείτε να χωρίσετε μια δέσμη περιεχομένου σε πολλές στήλες, αλλά αυτό μπορεί να μην είναι η καλύτερη εμπειρία ανάγνωσης για το Web, ειδικά εάν το ύψος αυτών των στηλών πέφτει κάτω από το "fold" της οθόνης.
Οι αναγνώστες θα πρέπει στη συνέχεια να μετακινηθούν προς τα πάνω και προς τα κάτω για να διαβάσουν το πλήρες περιεχόμενο. Παρόλα αυτά, το κύριο μέρος των Στήλων CSS είναι τόσο εύκολο όσο βλέπετε εδώ και μπορεί να χρησιμοποιηθεί για να κάνει πολύ περισσότερα από το να χωρίσει μόνο το περιεχόμενο ορισμένων παραγράφων - μπορεί πράγματι να χρησιμοποιηθεί για διάταξη.
Διάταξη με στήλες CSS
Πείτε ότι έχετε μια ιστοσελίδα με μια περιοχή περιεχομένου που περιέχει 3 στήλες περιεχομένου. Αυτή είναι μια πολύ συνηθισμένη διάταξη ιστοσελίδας και για να επιτύχετε αυτές τις 3 στήλες, κανονικά θα επιπλέξετε τα τμήματα που βρίσκονται. Με CSS πολλαπλών στηλών, είναι πολύ πιο εύκολη.
Εδώ είναι ένα δείγμα HTML:
Τα τελευταία νέα
Το περιεχόμενο θα πάει εδώ ...
Το περιεχόμενο θα πάει εδώ ...
p> Το CSS για να κάνετε αυτές τις πολλαπλές στήλες ξεκινά με αυτό που είδατε προηγουμένως:
.content {-moz-column-count: 3; -webkit-count: 3; Αριθμός στήλης: 3. - διαφορά-στήλη-κενό: 30px; -webkit-στήλη-χάσμα: 30px; κενό-στήλη: 30px; }} Τώρα, η πρόκληση εδώ είναι ότι, καθώς το πρόγραμμα περιήγησης θέλει να κατανείμει αυτό το περιεχόμενο ομοιόμορφα, έτσι ώστε εάν το μήκος περιεχομένου αυτών των διαχωρισμών είναι διαφορετικό, ο συγκεκριμένος περιηγητής θα διαιρέσει στην πραγματικότητα το περιεχόμενο μιας μεμονωμένης διαίρεσης, προσθέτοντας την εκκίνηση του σε μία στήλη και στη συνέχεια συνεχίζετε σε μια άλλη (μπορείτε να δείτε αυτό χρησιμοποιώντας αυτόν τον κώδικα για να εκτελέσετε ένα πείραμα και να προσθέσετε διαφορετικά μήκη περιεχομένου σε κάθε τμήμα)!
Αυτό δεν είναι αυτό που θέλετε. Θέλετε καθένα από αυτά τα τμήματα να δημιουργήσει μια ξεχωριστή στήλη και, ανεξάρτητα από το πόσο μεγάλο ή μικρό είναι το περιεχόμενο ενός μεμονωμένου τμήματος, δεν θέλετε ποτέ να το χωρίσετε. Μπορείτε να το επιτύχετε με την προσθήκη αυτής της πρόσθετης γραμμής CSS:
.content div {εμφάνιση: inline-block; }} Αυτό θα αναγκάσει τα τμήματα που βρίσκονται μέσα στο "περιεχόμενο" να παραμείνουν άθικτα ακόμη και όταν ο περιηγητής χωρίζει αυτό σε πολλαπλές στήλες. Ακόμη καλύτερα, δεδομένου ότι δεν δώσαμε τίποτα εδώ σταθερού πλάτους, αυτές οι στήλες θα αλλάζουν αυτόματα το μέγεθος, καθώς το μέγεθος του προγράμματος περιήγησης, καθιστώντας τους μια ιδανική εφαρμογή για ανταποκρινόμενες ιστοσελίδες . Με το στυλ "inline-block" στη θέση του, κάθε ένα από τα 3 τμήματα θα είναι μια ξεχωριστή στήλη περιεχομένου.
Χρησιμοποιώντας το πλάτος της στήλης
Υπάρχει μια άλλη ιδιότητα εκτός από την "στήλη-count" που μπορείτε να χρησιμοποιήσετε και ανάλογα με τις ανάγκες σας στο layout, μπορεί στην πραγματικότητα να είναι μια καλύτερη επιλογή για τον ιστότοπό σας. Αυτό είναι "πλάτος στήλης". Χρησιμοποιώντας την ίδια σήμανση HTML όπως φαίνεται παραπάνω, θα μπορούσαμε να το κάνουμε αυτό με το CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; πλάτος στήλης: 500px. - διαφορά-στήλη-κενό: 30px; -webkit-στήλη-χάσμα: 30px; κενό-στήλη: 30px; } .content div {εμφάνιση: inline-block; }} Ο τρόπος με τον οποίο λειτουργεί αυτό είναι ότι το πρόγραμμα περιήγησης χρησιμοποιεί αυτό το "πλάτος στήλης" ως τη μέγιστη τιμή αυτής της στήλης. Έτσι, εάν το παράθυρο του προγράμματος περιήγησης έχει πλάτος μικρότερο από 500 pixels, αυτά τα 3 τμήματα θα εμφανίζονται σε μία στήλη, μία από τις κορυφές του άλλου. Πρόκειται για μια τυπική διάταξη που χρησιμοποιείται για διατάξεις κινητής / μικρής οθόνης.
Καθώς το πλάτος του προγράμματος περιήγησης αυξάνεται ώστε να είναι αρκετά μεγάλο για να χωρέσει 2 στήλες μαζί με τα καθορισμένα κενά στη στήλη, το πρόγραμμα περιήγησης θα μεταβαίνει αυτόματα από μία διάταξη στήλης σε δύο στήλες. Συνεχίστε να αυξάνετε το πλάτος της οθόνης και τελικά θα λάβετε ένα σχέδιο με 3 στήλες, με καθένα από τα 3 τμήματα να εμφανίζεται στη δική τους στήλη. Και πάλι, αυτός είναι ένας πολύ καλός τρόπος για να αποκτήσετε μερικές ευπρόσδεκτες, φιλικές προς πολλές συσκευές διατάξεις και δεν χρειάζεται καν να χρησιμοποιήσετε ερωτήματα μέσων για να αλλάξετε τα στυλ σχεδίασης!
Άλλες ιδιότητες στήλης
Εκτός από τις ιδιότητες που καλύπτονται εδώ, υπάρχουν επίσης ιδιότητες για "κανόνα στήλης", συμπεριλαμβανομένων των τιμών χρώματος, στυλ και πλάτους που σας επιτρέπουν να δημιουργείτε κανόνες μεταξύ των στηλών σας. Αυτά θα χρησιμοποιηθούν αντί για σύνορα εάν θέλετε να έχετε μερικές γραμμές που διαχωρίζουν τις στήλες σας.
Ώρα να πειραματιστούμε
Επί του παρόντος, η διάταξη πολλαπλών στηλών της CSS υποστηρίζεται πολύ καλά. Με προθέματα, πάνω από το 94% των χρηστών του διαδικτύου θα μπορούν να δουν αυτά τα στυλ και αυτή η μη υποστηριζόμενη ομάδα θα ήταν πραγματικά πολύ παλιότερες εκδόσεις του Internet Explorer που πιθανόν να μην υποστηρίζετε πια.
Με αυτό το επίπεδο υποστήριξης που υπάρχει τώρα, δεν υπάρχει κανένας λόγος να μην αρχίσετε να δοκιμάζετε τις στήλες CSS και να αναπτύσσετε αυτά τα στυλ σε ιστοσελίδες έτοιμες για παραγωγή. Μπορείτε να ξεκινήσετε τα πειράματά σας χρησιμοποιώντας τα HTML και CSS που παρουσιάζονται σε αυτό το άρθρο και να παίξετε γύρω με διαφορετικές τιμές για να δείτε τι θα λειτουργούσε καλύτερα για τις ανάγκες της διάταξης του ιστότοπού σας.
Το CSS για να κάνετε αυτές τις πολλαπλές στήλες ξεκινά με αυτό που είδατε προηγουμένως:
.content {-moz-column-count: 3; -webkit-count: 3; Αριθμός στήλης: 3. - διαφορά-στήλη-κενό: 30px; -webkit-στήλη-χάσμα: 30px; κενό-στήλη: 30px; }}Τώρα, η πρόκληση εδώ είναι ότι, καθώς το πρόγραμμα περιήγησης θέλει να κατανείμει αυτό το περιεχόμενο ομοιόμορφα, έτσι ώστε εάν το μήκος περιεχομένου αυτών των διαχωρισμών είναι διαφορετικό, ο συγκεκριμένος περιηγητής θα διαιρέσει στην πραγματικότητα το περιεχόμενο μιας μεμονωμένης διαίρεσης, προσθέτοντας την εκκίνηση του σε μία στήλη και στη συνέχεια συνεχίζετε σε μια άλλη (μπορείτε να δείτε αυτό χρησιμοποιώντας αυτόν τον κώδικα για να εκτελέσετε ένα πείραμα και να προσθέσετε διαφορετικά μήκη περιεχομένου σε κάθε τμήμα)!
Αυτό δεν είναι αυτό που θέλετε. Θέλετε καθένα από αυτά τα τμήματα να δημιουργήσει μια ξεχωριστή στήλη και, ανεξάρτητα από το πόσο μεγάλο ή μικρό είναι το περιεχόμενο ενός μεμονωμένου τμήματος, δεν θέλετε ποτέ να το χωρίσετε. Μπορείτε να το επιτύχετε με την προσθήκη αυτής της πρόσθετης γραμμής CSS:
.content div {εμφάνιση: inline-block; }}Αυτό θα αναγκάσει τα τμήματα που βρίσκονται μέσα στο "περιεχόμενο" να παραμείνουν άθικτα ακόμη και όταν ο περιηγητής χωρίζει αυτό σε πολλαπλές στήλες. Ακόμη καλύτερα, δεδομένου ότι δεν δώσαμε τίποτα εδώ σταθερού πλάτους, αυτές οι στήλες θα αλλάζουν αυτόματα το μέγεθος, καθώς το μέγεθος του προγράμματος περιήγησης, καθιστώντας τους μια ιδανική εφαρμογή για ανταποκρινόμενες ιστοσελίδες . Με το στυλ "inline-block" στη θέση του, κάθε ένα από τα 3 τμήματα θα είναι μια ξεχωριστή στήλη περιεχομένου.
Χρησιμοποιώντας το πλάτος της στήλης
Υπάρχει μια άλλη ιδιότητα εκτός από την "στήλη-count" που μπορείτε να χρησιμοποιήσετε και ανάλογα με τις ανάγκες σας στο layout, μπορεί στην πραγματικότητα να είναι μια καλύτερη επιλογή για τον ιστότοπό σας. Αυτό είναι "πλάτος στήλης". Χρησιμοποιώντας την ίδια σήμανση HTML όπως φαίνεται παραπάνω, θα μπορούσαμε να το κάνουμε αυτό με το CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; πλάτος στήλης: 500px. - διαφορά-στήλη-κενό: 30px; -webkit-στήλη-χάσμα: 30px; κενό-στήλη: 30px; } .content div {εμφάνιση: inline-block; }}Ο τρόπος με τον οποίο λειτουργεί αυτό είναι ότι το πρόγραμμα περιήγησης χρησιμοποιεί αυτό το "πλάτος στήλης" ως τη μέγιστη τιμή αυτής της στήλης. Έτσι, εάν το παράθυρο του προγράμματος περιήγησης έχει πλάτος μικρότερο από 500 pixels, αυτά τα 3 τμήματα θα εμφανίζονται σε μία στήλη, μία από τις κορυφές του άλλου. Πρόκειται για μια τυπική διάταξη που χρησιμοποιείται για διατάξεις κινητής / μικρής οθόνης.
Καθώς το πλάτος του προγράμματος περιήγησης αυξάνεται ώστε να είναι αρκετά μεγάλο για να χωρέσει 2 στήλες μαζί με τα καθορισμένα κενά στη στήλη, το πρόγραμμα περιήγησης θα μεταβαίνει αυτόματα από μία διάταξη στήλης σε δύο στήλες. Συνεχίστε να αυξάνετε το πλάτος της οθόνης και τελικά θα λάβετε ένα σχέδιο με 3 στήλες, με καθένα από τα 3 τμήματα να εμφανίζεται στη δική τους στήλη. Και πάλι, αυτός είναι ένας πολύ καλός τρόπος για να αποκτήσετε μερικές ευπρόσδεκτες, φιλικές προς πολλές συσκευές διατάξεις και δεν χρειάζεται καν να χρησιμοποιήσετε ερωτήματα μέσων για να αλλάξετε τα στυλ σχεδίασης!
Άλλες ιδιότητες στήλης
Εκτός από τις ιδιότητες που καλύπτονται εδώ, υπάρχουν επίσης ιδιότητες για "κανόνα στήλης", συμπεριλαμβανομένων των τιμών χρώματος, στυλ και πλάτους που σας επιτρέπουν να δημιουργείτε κανόνες μεταξύ των στηλών σας. Αυτά θα χρησιμοποιηθούν αντί για σύνορα εάν θέλετε να έχετε μερικές γραμμές που διαχωρίζουν τις στήλες σας.
Ώρα να πειραματιστούμε
Επί του παρόντος, η διάταξη πολλαπλών στηλών της CSS υποστηρίζεται πολύ καλά. Με προθέματα, πάνω από το 94% των χρηστών του διαδικτύου θα μπορούν να δουν αυτά τα στυλ και αυτή η μη υποστηριζόμενη ομάδα θα ήταν πραγματικά πολύ παλιότερες εκδόσεις του Internet Explorer που πιθανόν να μην υποστηρίζετε πια.
Με αυτό το επίπεδο υποστήριξης που υπάρχει τώρα, δεν υπάρχει κανένας λόγος να μην αρχίσετε να δοκιμάζετε τις στήλες CSS και να αναπτύσσετε αυτά τα στυλ σε ιστοσελίδες έτοιμες για παραγωγή. Μπορείτε να ξεκινήσετε τα πειράματά σας χρησιμοποιώντας τα HTML και CSS που παρουσιάζονται σε αυτό το άρθρο και να παίξετε γύρω με διαφορετικές τιμές για να δείτε τι θα λειτουργούσε καλύτερα για τις ανάγκες της διάταξης του ιστότοπού σας.