CSS Multi-column Layout Module: Impaginare i contenuti in colonne con i CSS3

Il "Multi Column Layout Module" è stato introdotto per agevolarci a creare in modo rapido e molto semplice layout multicolonne, usando solo i CSS3. In questo articolo vedremo cosa è possibile ottenere con il suddetto modulo, e daremo uno sguardo ad alcune delle sue proprietà, con dimostrazione attraverso una serie di esempi.

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 metodi di floating. 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

Proprietà del Multi-column Layout Module

Proprietà del Multi-column Layout Module per la stampa

Proprietà del Multi-column Layout Module per la gestione delle colonne

Sia Google Chrome che Safari, utilizzano un "prefisso" proprietario: -webkit-. Firefox adotta il prefisso -moz-. Opera e IE 10+ non necessitano di alcun prefisso. Il loro codice sarà quello del W3C.

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="js/css3-multi-column.js"></script>
<![endif]-->

Il primo layout multicolonna

Prima di entrare nel merito delle diverse proprietà del layout multicolonne, vediamo una anticipazione di quello che è possibile ottenere, attraverso l'immagine di seguito:

Layout multicolonne
Layout su 2 colonne

In primis, si deve creare un contenitore ed assegnargli una classe. Per l'esempio ho creato: div.column. Successivamente il codice CSS, molto semplice:

.column 
{
margin:             2em;

-moz-column-count:  2; /*Firefox*/
-moz-column-gap:    20px;

-webkit-column-count: 2; /*Safari e Chrome*/
-webkit-column-gap: 20px;

column-count: 2; /*Opera e IE 10+*/
column-gap: 20px;
}

Nella prima dichiarazione ho assegnato un margine generale pari a 2em, al contenitore con classe .column. Successivamente ho dichiarato quante colonne vorrei ottenere per il mio layout: column-count:2. In ultimo si dichiara quanto spazio (gap) deve esserci tra le colonne; column-gap:20px. Notare che il testo nel div.column si espande in maniera automatica, per quanto esso è lungo. Il primo file di esempio mostra il div appena creato.

Si noti che nell'esempio appena visto, non è stata assegnata alcuna proprietà per quanto riguarda la dimensione delle colonne (column-width). Avendo un contenitore "fluido", avrei potuto dichiarare dimensioni in percentuale, non conoscendo a priori la dimensione del viewport nè, tantomeno, su quale tipo di media potesse essere visualizzato. Nel prossimo esempio, creeremo un contenitore con dimensioni fisse, in pixel. In questo caso, dovremmo fare attenzione che la somma della larghezza di ogni colonna più lo spazio tra esse, non sia superiore alla dimensione del contenitore stesso.

.column 
{
margin:		2em auto;
width:      800px;
background: #ddd; 

-moz-column-width:   400px;
-moz-column-gap:     20px;

-webkit-column-width: 400px;
-webkit-column-gap:   20px;

column-width: 400px;
column-gap:   20px;
}

Assegnando una dimensione totale di 800 pixel al contenitore generale, voglio ottenere 2 colonne pari a 400 pixel ciascuna. In più lo spazio tra di esse deve rimanere sempre di 20px. Da notare che questa volta non è stato dichiarato il numero delle colone (column-count:2) perchè il browser calcola la larghezza del contenitore e in base al valore assegnato a column-widthcrea le colonne. La demo in oggetto mostra il div .column suddiviso esattamente in 2 colonne.

Sbagliato! Si badi bene, come anticipato prima del codice CSS, che il browser controlla la dimensione del contenitore. Poi la dimensione assegnata ad ogni singola colonna ed in ultimo lo spazio che deve intercorrere tra le due colonne. Il browser non sbaglia (quasi) mai. Rivedendo il codice CSS ho volutamente scritto in maniera errata:

.column 
{
-moz-column-width:   400px;
-moz-column-gap:     20px;

-webkit-column-width: 400px;
-webkit-column-gap:   20px;

column-width: 400px;
column-gap:   20px;
}

400px + 20px + 400px la somma è 820px. Il codice corretto è:

.column 
{
-moz-column-width:   390px;
-moz-column-gap:     20px;

-webkit-column-width: 390px;
-webkit-column-gap:   20px;

column-width: 390px;
column-gap: 20px;
}

390px + 20px + 390px = 800px. La demo corretta mostra, in questo caso, la suddivisione esatta in 2 colonne.

Se volessimo inserire dei bordi tra le colonne, dovremo ricorrere alla proprietà column-rule. Il codice CSS prevede:

.column 
{
-moz-column-count:   3;
-moz-column-gap:     40px;
-moz-column-rule:    1px dotted #444;

-webkit-column-count: 3;
-webkit-column-gap:   40px;
-webkit-column-rule:  1px dotted #444;

column-count: 3;
column-gap:   40px;
column-rule:  1px dotted #444;  
}

La demo di esempio mostra ampio spazio tra le colonne, oltre ad un bordo molto sottile tra di esse.

Column Span

La proprietà column-span consente di estendere un elemento per tutta la larghezza delle colonne. Si veda l'ultima demo con 3 colonne e bordi tra di esse. Aggiungendo il titolo H1, esso assolve al proprio compito. La proprietà in oggetto, però, non è supportata da Firefox. Il risultato che si ottiene con questo browser non è molto bello, a differenza di come dovrebbe comportarsi normalmente. In pratica esso si "concentra" tutto nella prima colonna, ignorando la dimensione totale del contenitore. Una soluzione potrebbe essere quella di usare il titolo prima del div.column, presentando omogeneità tra i diversi browser.

Il codice CSS per il titolo h1:

h1
{
-webkit-column-span:  all;
-moz-column-span:     all;
column-span:          all;
}

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 Modulo Multi Colonne 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.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati