Multicolonne con i CSS3

28 agosto 2007

Multicolonne con i CSS3

Il modulo per le multicolonne con i CSS è stato presentato con un rivisto working draft di recente, ovvero il 6 Giugno 2007. Questo modulo consente di suddividere il testo su più colonne, con un’impostazione molto simile a quella della carta stampata.

Questo modulo è composto da relativamente poche proprietà, che sono:

  • column-count che esprime il numero di colonne con cui suddividere il testo all’interno di un elemento
  • column-width che esprime la larghezza delle colonne con viene suddividiso il testo all’interno di un elemento
  • column-gap che esprime la larghezza delle colonne con viene suddividiso il testo all’interno di un elemento

Queste tre proprietà, che costituiscono il core del modulo, sono già implementate su Safari 3 e Firefox 2, con i soliti prefissi -webkit- e -moz-. Ci sono alcune proprietà che, al momento in cui scrivo non sono supportate da alcun browser, e sono:

  • column-rule che permette di definire presenza e aspetto della riga di separazione tra le colonne
  • column-break-before e column-break-after che stabiliscono le interruzioni di colonna
  • column-span che consente ad un elemento inserito in un contesto colonnare di occupare in larghezza un numero di colonne a piacere

Dopo questa breve introduzione, possiamo presentare l’esempio e il suo screenshot:

Figura 6 – Multicolonne con i CSS3

multicolonne

L’esempio è composto da tre sezioni a colonne multiple. La prima è costituita da 3 colonne con un column-gap abbastanza ampio, ovvero 3em:

div#container1{ -moz-column-count: 3;-webkit-column-count: 3;column-count: 3;
-moz-column-gap: 3em;-webkit-column-gap: 3em;column-gap: 3em}

Nella seconda sezione viene solo definita la larghezza di ciascuna colonna e la spaziatura tra di esse: in questo caso il browser disporrà il testo su un numero di colonne tale da occupare lo spazio orizzontale disponibile, cercando di mantenere per ciascuna di esse una larghezza vicina a quella impostata:

div#container2{ -moz-column-width: 10em;-webkit-column-width: 10em;column-width: 10em;
-moz-column-gap: 1em;-webkit-column-gap: 1em;column-gap: 1em}

Il terzo e ultimo caso dell’esempio è una sezione a larghezza impostata suddivisa su due colonne, ecco il codice:

div#container3{width:700px;
-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;
-moz-column-gap: 20px;-webkit-column-gap: 20px;column-gap: 20px}

Conclusioni e download

Termina qui questa piccola anteprima ai CSS3, in cui abbiamo attraversato parte della teoria accompagnandola con esempi pratici. Attualmente i CSS3 sono ancora distanti dal diventare raccomandation, ma browser quali Firefox, Safari, Opera e Konqueror iniziano già ad implementarne alcune caratteristiche interessanti.

Conoscere e sviluppare con i CSS3 oggi non è fondamentale, né indispensabile: finché non avranno un buon supporto cross-browser andranno usati come soluzioni estetiche in modo da arrichire l’esperienza visiva degli utenti che consultano le nostre pagine con browser capaci. Abbiamo però ritenuto utile presentarne una piccola anteprima, insieme ad alcuni esempi pratici che potranno costitutire una base di partenza per le vostre sperimentazione. Codice, script ed esempi sono disponibili per il download. Alla prossima.

Se vuoi aggiornamenti su Multicolonne con i CSS3 inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Multicolonne con i CSS3

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy