Πώς να χρησιμοποιήσετε τις στήλες CSS3

Με την αυξανόμενη ποικιλομορφία των μεγεθών οθόνης, δεν είναι πρακτικό να σχεδιάζετε μεμονωμένα μπλοκ κειμένου που να καλύπτουν όλο το πλάτος της οθόνης. Η παραδοσιακή λύση είναι να χωρίσετε το κείμενο σε στήλες με το χέρι, το οποίο είναι πολύ χρονοβόρο. ή να διαχωρίσετε το κείμενο δυναμικά με το JavaScript, το οποίο δεν λειτουργεί καθολικά. Εκτός αυτού, πρόκειται για θέμα παρουσίασης, θα πρέπει να μπορούμε να το στυλίσουμε με το CSS χωρίς τη χρήση συστημάτων πλέγματος ή πλωτήρων;

Το CSS3 παρέχει πραγματικά έναν τρόπο για να στυλίσουμε το κείμενό σας σε διάφορες στήλες, δίνει ακόμα τη δυνατότητα να ορίσετε μια υδρορροή - το διάστημα μεταξύ αυτών των στηλών - με αυτόν τον τρόπο έχετε πλήρη έλεγχο αντί του πλαισίου ή του συστήματος πλέγματος που ρυθμίζει αυτά τα κενά για εσάς .

Το καλύτερο από όλα, το CSS3 υποβαθμίζεται χαριτωμένα, οπότε αν κάποιος περιηγηθεί στο Netscape Navigator, ο ιστότοπός σας δεν θα σπάσει.

Υποστήριξη προγράμματος περιήγησης

Είναι σημαντικό να σημειώσουμε ότι ενώ όλα τα τρέχοντα προγράμματα περιήγησης υποστηρίζουν πολλές στήλες στο CSS3 - ναι, ακόμη και το IE10 - πολλές πρόσφατες εκδόσεις - για παράδειγμα το IE9 - δεν το κάνουν. Παρόλο που η υποστήριξη είναι καλή, θα θέλετε να συμπεριλάβετε προθέματα του προγράμματος περιήγησης για webkit (-webkit-) και mozilla (-moz-). Δεν χρειάζεται να συμπεριλάβετε τα αρχεία -ms- ή -o- για την IE και την Opera, καθώς υποστηρίζουν πλήρως το χαρακτηριστικό ή καθόλου.

Οι ιδιότητες

Αυτό το χαρακτηριστικό CSS σας δίνει πραγματικά μια χούφτα ιδιότητες για να έχετε πλήρη έλεγχο του τρόπου εκτύπωσης του περιεχομένου σας στο πρόγραμμα περιήγησης και αυτές οι ιδιότητες είναι:

• αριθμός στηλών: εδώ καθορίζετε τον αριθμό των στηλών που θέλετε να εφαρμόσετε στο στοιχείο.
• πλάτος στήλης: το πλάτος μιας στήλης. Έχετε υπόψη σας ότι αυτή η τιμή πιθανόν να αλλάξει από το πρόγραμμα περιήγησης.
• διάκενο στήλης: το πλάτος του διακένου μεταξύ των στηλών.
• column-width-rule: το τμήμα του κανόνα είναι ένα είδος συνόρου για τις στήλες σας και εδώ καθορίζετε το πλάτος του συνόρου.
• στήλη-κανόνας-στυλ: Επίσης, όπως το περίγραμμα, αν πρέπει να καθορίσετε το στυλ.
• στήλη-κανόνας-χρώμα: εδώ το χρώμα του κανόνα.
• στήλη-έκταση: η τιμή εδώ θα πει στο πρόγραμμα περιήγησης πόσα στήλες θέλετε ένα στοιχείο να εκτείνεται, αυτό είναι καλό για επικεφαλίδες και έργα όπως colspan και rowspan σε πίνακες.

Με όλες αυτές τις ιδιότητες δεν νομίζω ότι πραγματικά χρειάζεται τίποτα άλλο για να έχουμε πλήρη έλεγχο των στηλών μας. Βεβαίως, δεν είναι απαραίτητες όλες αυτές οι ιδιότητες για να λειτουργήσει η διάταξη πολλαπλών στηλών, στην πραγματικότητα είναι απαραίτητη μόνο η μέτρηση στήλης, αλλά πρέπει πάντα να χρησιμοποιείτε το κενό στη στήλη για να δώσετε στο κείμενο λίγο χώρο και να μην έχετε όλες τις στήλες το ένα πάνω στο άλλο.

Για να το εφαρμόσουμε αυτό χρειάζονται μόνο δύο γραμμές κώδικα:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Εάν επιθυμείτε επίσης να εφαρμόσετε έναν κανόνα στις στήλες, πρέπει απλώς να προσθέσετε τις επιπλέον ιδιότητες:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Όπως και η πιο κοινή ιδιότητα των συνόρων, μπορείτε επίσης να στοιβάζετε το χρώμα, το στυλ και το πλάτος στην ίδια γραμμή, όπως π.χ.:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Εάν έχετε μια επικεφαλίδα και θέλετε αυτή η επικεφαλίδα να καλύπτει όλες τις στήλες για να προσθέσετε μόνο μία γραμμή:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

Διαδήλωση

Μπορείτε να το εφαρμόσετε σχεδόν σε οποιαδήποτε HTML, από μία μόνο έως μια πολλαπλή