blog

Continua la rubrica mensile Proprietà CSS3, contenente tutte le novità dei CSS nel Web 2.0.

Il modulo CSS3 di oggi è: Multiple Column, una semplice soluzione per impaginare i contenuti del nostro sito in colonne. Questa modulo ricorda la possibilità di dividere in colonne un foglio su Word o l’impaginazione delle testate giornalistiche. Molto usata nei modelli cartacei e ignorata fin’ora dal web, potrebbe essere la rivoluzione del web 3.0 con la standardizzazione di schermi sempre più wide (16:9), cioè larghi e bassi.

Vediamo subito come si presenta:

Lorem ipsum elementum urna mauris! Tincidunt, aliquet ut, natoque eros velit dapibus sagittis ultricies! Magna urna sed elementum. Velit pulvinar augue aenean, sed, nec elit egestas aliquet eros. Sit cum, odio. Cras non penatibus dolor, enim, dignissim phasellus, in pulvinar sit nec! Eu adipiscing vut, element, duis turpis, lorem integer dis, sociis scelerisque vel. Pulvinar magnis integer amet nunc nunc? Ultricies vel et dictumst. A adipiscing, nec nunc ridiculus mid elit scelerisque, elementum, scelerisque pellentesque nisi dapibus rhoncus dapibus turpis cum ridiculus. Mus, mus quis.

La sintassi:

column-count: 3;
column-gap: 2em;
column-rule: 1px solid #666;
-moz-column-count: 3;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid #666;
-webkit-column-count: 3;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid #666;

Sintassi e definizione delle multi-colonne

Di seguito la semplice definizione della sintassi di questo modulo CSS3 e la relativa compatibilità dei browser:

Facciamo un breve riepilogo delle proprietà appena citate, tenendo in considerazione che gli unici browser compatibili alle proprietà senza prefisso -moz- e -webkit- sono Google Chrome e Internet Explorer 9+:

column-count: specifichiamo il numero di colonne desiderate.
column-gap: distanza tra le colonne
column-rule: eventuale bordo di separazione fra le colonne.
column-width: specifichiamo la larghezza di ciascuna colonna.

Il modulo Multiple Column ci dà la libertà di decidere l’impostazione delle colonne: a larghezza variabile o a larghezza fissa, cerchiamo di fare maggiore chiarezza:

CSS3 Multiple Column a larghezza variabile

Lorem ipsum adipiscing! Lundium parturient, habitasse tortor. Urna magna! Sociis vel, turpis integer. Lacus elementum urna tortor nisi pid! Nisi proin, amet et sit nec! Tincidunt et ut pulvinar tincidunt aenean, mid amet, sed. Risus elementum scelerisque diam eros ultrices facilisis? Porta eu? Natoque pellentesque, vut, hac a arcu elit rhoncus.

Vediamo il codice e poi esaminiamolo:

column-count: 2;
column-gap: 3em;
-moz-column-count: 2;
-moz-column-gap: 3em;
-webkit-column-count: 2;
-webkit-column-gap: 3em;

Innanzitutto si può notare che, a differenza dell’esempio precedente, è stato omesso il column-rule, in questo modo non viene visualizzato alcun bordo di divisione tra le colonne. Inoltre, specificando il column-count dichiariamo di volere l’area divisa in due colonne indipendentemente dalla larghezza occupata.

CSS3 Multiple Column a larghezza fissa

Lorem ipsum sagittis pulvinar, has integer tristique cras dignissim placerat, montes lacus adipiscing risus magna, porttitor auctor nunc ut sed. Augue aenean phasellus elementum nec rhoncus est urna quis ut cursus vut, dapibus et, sit ultrices placerat et pulvinar integer pellentesque! In porttitor ut dignissim duis et montes augue? Tincidunt sit.

Vediamo la sintassi e poi commentiamola:

column-width: 100px;
column-gap: 2em;
-moz-column-width: 100px;
-moz-column-gap: 2em;
-webkit-column-width: 100px;
-webkit-column-gap: 2em;

In questo caso è stata omessa la proprietà column-count e dichiarata la proprità column-width per specificare la larghezza di ogni colonna, il cui numero varia a seconda dello spazio a disposizione, perciò si avrà una larghezza fissa e un conseguente numero di colonne variabili.

Altri esempi riguardanti questo modulo potete trovarli nel sito CSScripting