Il "Multi Column Layout Module" è stato introdotto per agevolare la creazione, in modo rapido e molto semplice, di layout multicolonne,con il solo ausilio dei CSS3. In questo articolo verranno analizzate le proprietà messe a disposizione dal suddetto modulo e cosa è possibile ottenere con esso.
Chiunque abbia creato, fino a prima dello svilluppo di questo modulo dei CSS3, layout web con colonne affiancate, sa benissimo che il risultato è stato raggiunto attraverso l'uso di codice spesso ridondante e con proprietà quali overflow: hidden.
Il Modulo Multi-column dei CSS3 offre una maggiore flessibilità e controllo sui metodi CSS precedenti. Il nuovo approccio, che è un'estensione dell'attuale CSS box model, permette al testo di scindersi su due colonne e lo rende facilmente adattabile a diversi dispositivi di visualizzazione. Prima di entrare nel merito vero e proprio di questo modulo dei CSS3, è importante sapere da quali browser è supportato, le proprietà, quali sono i "prefissi" da utilizzare e quali limiti potrebbero esserci.
Browser supportati
- IE10+
- Firefox 5+
- Chrome 12+
- Safari 3.2+
- Opera 11.1+
I browser Chrome e Safari necessitano del prefisso -webkit-. Firefox, invece, utilizza il prefisso -moz-. Opera ed IE supportano tutte le proprietà senza necessità di aggiungere il prefisso. Chrome, Safari e Firefox non supportano le proprietà break-after o column-fill, mentre Safari e Firefox non supportano column-span. Detto questo, si spera che tali proprietà saranno ben presto disponibili con i futuri aggiornamenti del browser.
Proprietà del Multi-column Layout Module
- column-width
- column-count
- column-gap
- column-rule
Proprietà Multi-column Layout Module per la stampa
- break-before
- break-after
- break-inside
Proprietà Multi-column Layout Module per la gestione delle colonne
- column-span
- column-fill
Per quanto riguarda il supporto sulle versioni precedenti di IE10, si deve ricorrere ad un richiamo Javascript nella pagina HTML. Grazie a Gabriel Saldaña, è sufficiente implementare nella pagina il file, del quale è possibile fare il download dal sito dell'autore. E' importante inserire il link al file javascript DOPO il richiamo al proprio file CSS:
<link rel="stylesheet" href="style.css"> <!--[if lt IE 10]> <script src="css3-multi-column.js"></script> <![endif]-->
Il primo layout multicolonna
Prima di entrare nel merito delle diverse proprietà Multi-column, vediamo una anticipazione di quello che è possibile ottenere, nell'immagine riportata di seguito:
Da notare che l'html per questo esempio è molto semplice. E' necessario creare un div con una classe del tipo: div.column e scriverci dentro abbondante testo.
<div class="column"> testo... </div>
Il CSS del multi column layout module è abbastanza facile da descrivere e comprendere. Un esempio:
.column {
column-count: 2;
column-gap: 20px;
}
In primo luogo usiamo column-count, per specificare quante colonne sono necessarie (ho usato 2 per questo esempio). Successivamente, quanto spazio (gap) deve esserci tra le colonne; column-gap:20px. Notare che il testo nel div.column si espande in maniera automatica, in base alla sua larghezza. Il multi column layout module in azione mostra quanto appena descritto.
Proprietà CSS
Diamo uno sguardo più in dettaglio ad alcune delle proprietà che possiamo trovare nel multi column layout module.
Column Count e Column Width
L'impostazione del numero o della larghezza delle colonne è importante per i contenuti del multi column layout. Le colonne devono essere impostate utilizzando le proprietà column-width o column-count, ma non dovrebbero mai essere utilizzate insieme. Entrambe queste proprietà sono per impostazione predefinita settate su auto.
Column Width
La proprietà column-width fa esattamente quello per cui è stata creata. Specifica una larghezza fissa per le colonne. La misura di tale larghezza può essere definita in px, em ecc... A seconda cosa si imposta per la larghezza della colonna, può variare e può essere leggermente più larga o più stretta per adattarsi allo spazio disponibile. Se questa proprietà è impostata su auto, ciò significa che la larghezza delle colonne sarà dettata da altre proprietà, come quella qui di seguito:
column-width: (lunghezza) | auto;
Column Count
Se si vuole che il layout deve essere suddiviso in un numero di colonne specifico, questa è la proprietà che si deve utilizzare. Impostando il valore delle colonne, il contenuto è suddiviso in base a quante colonne sono state specificate. Se questa proprietà è impostata su auto, significa che il numero delle colonne saranno deciso da altre proprietà, come ad esempio column-width.
column-count: (numero di colonne) | auto;
Columns
columns è effettivamente uno shorthand che consente di impostare column-width e column-count. Di seguito qualche codice di esempio per mostrare l'utilizzo di entrambe le proprietà da assegnare a columns.
columns: 10em; /* column-width:10em; column-count: auto */ columns: auto 10em; /* column-count: auto; column-width: 10em; */ columns: 2; /* column-width: auto; column-count: 2 */ columns: 2 auto; /* column-width: auto; column-count: 2 */ columns: auto; /* column-width: auto; column-count: auto */ columns: auto auto; /* column-width: auto; column-count: auto */
Column Gap
column-gap ci dà la possibilità di aggiungere uno spazio tra una colonna e l'altra in maniera tale da non far sembrare il testo un "corpo unico". Accetta dimensioni CSS standard. La dimensione del gap non può essere negativa.
column-gap: (valore) | normal;
Column Rule
La proprietà column-rule visualizza un bordo tra una colona e l'altra. Pertanto, per avere bordi di separazione tra le colonne, va impostata una dimensione per column-gap. column-rule ha anche diverse sotto-proprietà, nonchè una versione abbreviata (shorthand). Questa versione abbreviata funziona allo stesso modo della proprietà border. Di seguito l'esempio:
column-rule-width:1px; column-rule-style: solid; column-rule-color: #f00; column-rule: 1px solid #f00; /* shorthand */
Column Span
La proprietà column-span fa estendere un elemento, per esempio un titolo, per tutta la larghezza delle colonne. Se si prende uno degli esempi postati precedentemente e si aggiunge un titolo, possiamo ottenere quanto appena scritto. Si veda l'immagine postata qui su per rendersene conto. Di seguito il codice CSS:
h1{ column-span: all; }
Valori accettati:
column-span: all | none;
Column Fill
La proprietà column-fill ci offre due controlli per l'impostazione della quantità di contenuti da bilanciare nelle colonne. La sintassi CSS prevede:
column-fill: balance | auto;
Se impostato su balance, la variazione della lunghezza delle colonne sarà minima e tutte le altezze saranno più o meno simili. Se impostato su auto, le colonne saranno riempite in progressione e, per esempio, si potrebbero avere, nell'ultima colonna, meno contenuti rispetto alle altre.
Conclusioni
Con gli esempi visti fino ad ora, le implementazioni del Multi-column Layout Module saranno sempre più numerose. Molto semplice da usare, dopo aver capito come funziona. Nonostante ci siano alcune limitazioni nel supporto da parte dei browser, sta prendendo sempre più piede nei siti web, e sono sicuro che sarà solo una questione di tempo prima che sia un modulo CSS completamente approvato e attuato.