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