Για πολλά χρόνια, τα επιπλέουν στην 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:
