Corsi on-line

Multiple Columns in CSS3

In CSS3 è possibile creare layout molticolonna grazie alle non particolarmente conosciute proprietà Multiple Columns; esse non sono supportate nello stesso modo da tutti i browser e lo sono soltanto parzialmente in altri, per poterle utilizzare con Firefox è per esempio necessario adottare il prefix “-moz-“, per quanto riguarda le applicazioni basate sul motore di rendering WebKit, Google Chrome e Safari, si dovrà invece introdurre le proprietà con il prefisso “-webkit-“, Opera le supporta senza prefix mentre Internet Explorer non offre ancora completa compatibilità con esse.

Per proporre un semplice esempio di utilizzo delle Multiple Columns si potrebbe costruire una regola come la seguente che suddividerà un divbox in 2 colonne (proprietà “column-count”):

div
 {
 -moz-column-count:2; /* Firefox */
 -webkit-column-count:2; /* Safari e Chrome */
 column-count:2;
 } 

Interessante anche la possibilità di utilizzare la proprietà “column-gap” grazie alla quale sarà possibile definire la distanza tra le colonne attraverso un valore espresso in pixel:

div
 {
 -moz-column-gap:50px; /* Firefox */
 -webkit-column-gap:50px; /* Safari e Chrome */
 column-gap:50px;
 }

column-rule” è infine una proprietà grazie alla quale specificare caratteristiche come per esempio la larghezza e il colore delle strisce di separazione tra le colonne:

div
 {
 -moz-column-rule:2px outset #8000ff; /* Firefox */
 -webkit-column-rule:2px outset #8000ff; /* Safari e Chrome */
 column-rule:2px outset #8000ff;
 }

E’ auspicabile che le Multiple Columns in CSS3 vengano utilizzate in modo sempre più ampio, ma ciò non avverrà fino quando i vari browser per la navigazione su Internet (o almeno quelli più diffusi) non saranno in grado di garantire un supporto omogeneo per queste proprietà.

Post correlati
  • borgoitalia

     è interessante e potrebbe essere utile. ma volevo sapere: dato un testo esiste un comando per dire che ad un certo punto del testo il rimanente vada nella colonna successiva (come su word)?

  • ClaudioGarau

    Se non ho capito male la tua richiesta ci sarebbe la proprietà column-span, ma dovrebbe essere supportata solo da Opera e parzialmente da Chrome.

  • borgoitalia

     grazie, quindi da non usare per ora

I più letti del mese
Tematiche