blog

CSS3 Multiple Column: incolonnare i contenuti

sabato 7 maggio 2011

CSS3 Multiple Columns per incolonnare i contenuti

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:

CSS3 Mozilla Safari
column-count -moz-column-count -webkit-column-count
column-gap -moz-column-gap -webkit-column-gap
column-rule -moz-column-rule -webkit-column-rule
column-width -moz-column-width -webkit-column-width

 

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

Categorie: CSS
Tag:

4 Commenti

  1. alessandro

    9 Maggio 2011, 11:50

    non male come tecnica ma visto che ci vuole poco almeno per le colonne preferisco utilizzare ancora le classi e gli stili nell css, ci vuole poco per definire tot colonne.

  2. giuseppe

    27 Luglio 2011, 15:57

    Scusate in teoria si potrebbe usare per i menu a discesa, mi spiego …

    i classici menu fatti in css a discesa verticale con gli item desiderati solo che se io ho 20 item invece di fare un unica colonna ne faccio 2 da 10 ….quindi si affinacherebbero le chiamate del menu a discesa e io risparmierei lo spazio

    solo che non riesco a capire perchè non mi funziona
    grazie

  3. Simone Forti

    27 Luglio 2011, 16:37

    @Giuseppe
    Ti ricordo che non tutte le versioni dei browser sono compatibili a questa tecnica, ma solo i seguenti:
    FIREFOX 1.5+
    SAFARI 3+
    CHROME
    IE 9

    Se non è un problema di compatibilità condividi con noi il codice che hai usato, magari usando http://codr.cc

  4. Simone Forti

    29 Luglio 2011, 11:25

    @Giuseppe: Questo articolo fà proprio al caso tuo: http://www.alistapart.com/articles/multicolumnlists/

    Se c’è qualcosa che non ti è chiaro rimango a tua disposizione. Ciao

Scrivi un commento

© 2010-2019 SimoneDesign.it    C.F. FRTSMN87P18F844X    P.I 01478670555  -  Licenza Creative Commons