Come usare le colonne CSS3

Con l'aumento della diversità nelle dimensioni dei monitor, non è pratico progettare singoli blocchi di testo che occupino l'intera larghezza dello schermo. La soluzione tradizionale è quella di dividere manualmente il testo in colonne, che richiede molto tempo; o per dividere il testo in modo dinamico con JavaScript, che non funziona universalmente. Inoltre, questo è un problema di presentazione, dovremmo essere in grado di modellarlo con i CSS senza l'uso di sistemi di rete o float, non dovremmo?

CSS3 in realtà fornisce un modo per modellare il tuo testo in varie colonne, ti dà anche la possibilità di impostare una grondaia - lo spazio tra quelle colonne - in questo modo hai il pieno controllo invece del sistema di strutture o della griglia che stabilisce quelle lacune per te .

Meglio di tutto, CSS3 degrada dolcemente, quindi se qualcuno sta navigando su Netscape Navigator, il tuo sito non si romperà.

Supporto del browser

È importante notare che mentre tutti i browser correnti supportano più colonne in CSS3 - sì, anche IE10 - molte versioni recenti - ad esempio IE9 - no. Anche se il supporto è buono, ti consigliamo di includere i prefissi del browser per webkit (-webkit-) e mozilla (-moz-). Non è necessario includere -ms- o -o- per IE e Opera, in quanto entrambi supportano la funzionalità per intero o non lo fanno affatto.

Le proprietà

Questa funzionalità CSS offre in effetti una manciata di proprietà per darti il ​​pieno controllo su come i tuoi contenuti vengono stampati nel browser e tali proprietà sono:

• numero di colonne : qui si specifica il numero di colonne che si desidera applicare all'elemento.
• larghezza colonna: la larghezza di una singola colonna. Tieni presente che questo valore verrà probabilmente modificato dal browser.
• column-gap: la larghezza dello spazio tra le colonne.
• column-rule-width: la parte della regola è un tipo di confine per le colonne e in qui si specifica la larghezza di quel bordo.
• column-rule-style: anche come il bordo, se è necessario specificare lo stile.
• colonna-regola-colore: qui il colore della regola.
• column-span: il valore qui riportato indica al browser quante colonne si desidera che un elemento si estenda, questo è utile per le intestazioni e funziona come colspan e rowspan nelle tabelle.

Con tutte queste proprietà non penso che in realtà abbiamo bisogno di qualcos'altro per avere il pieno controllo sulle nostre colonne. Ovviamente non tutte queste proprietà sono necessarie per il funzionamento del layout multi-colonna, in realtà è necessario solo il conteggio delle colonne ma è sempre consigliabile utilizzare anche il column-gap per dare al testo un po 'di spazio e non avere tutte le colonne su uno sopra l'altro.

Per metterlo in pratica bastano due righe di codice:

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

Se desideri anche applicare una regola alle colonne, devi solo aggiungere le proprietà aggiuntive:

/* 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;}

Come la proprietà del bordo più comune puoi anche impilare il colore, lo stile e la larghezza nella stessa linea, in questo modo:

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

Se hai un'intestazione e vuoi che quell'intestazione occupi tutte le colonne devi solo aggiungere una riga:

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

dimostrazione

Puoi applicarlo praticamente a qualsiasi HTML, da un singolo paragrafo a più