Soluzioni Hosting

Creare Colonne multiple CSS 3

L’impaginazione del testo a colonne è sempre stato un cruccio per noi web developer con i CSS 2.
Un metodo comune era, ed è tuttora,  quello di ottenere le colonne attraverso tanti  <div> quanti il numero di colonne necessarie per poi flottarle a sinistra dando larghezze con misure relative od assolute.

E’ senz’altro una tecnica moderatamente semplice e solida ma che necessita di <div> o anche <ul> aggiuntivi che rendono il markup più pesante in fatto di byte e in certi casi non semantico.

Il Modulo “Multicolumn layout” dei CSS 3, anche se è ancora allo stato embrionale, può farci intuire quanto questa tecnica può rivoluzionare il mondo dell’impaginazione web (ad esempio l’impaginazione dei quotidiani) e rendere flessibile e facile l’implementazione con poche righe di codice CSS.

Come ho già detto, l’unica controindicazione è che il supporto non è molto esteso ad oggi tra i vari browser: si evince che solo Opera ha il 99% di supporto su questo modulo, mentre Firefox, Chrome e Safari hanno bisogno dei loro rispettivi “vendor prefix”,webkit-, -moz-. Internet Explorer 9 non supporta il modulo (ma questa non è una novità).

Vediamo ora come creare colonne multiple con CSS3.

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
div {
column-width: 8.5em ;
-webkit-column-width: 8.5em;
-moz-column-width: 8.5em;
}

 

figura 1

 

 

 

 

Ho specificato prima la “dichiarazione originale” column-width, e poi ho dichiarato i prefissi di Firefox e Chrome per poter fare un uso effettivo della dichiarazione originale, altrimenti vediamo soltanto un semplice blocco di testo.

Column-width rappresenta la larghezza di ogni colonna: qui l’ho impostata a 8.5em, ma nulla ci vieta di impostarla in px o %.  Se si imposta questa dichiarazione il numero di colonne è dettato dalla quantità di testo scritto, questo è una gran cosa perchè le colonne si adattano ad ogni dimensione del “viewport”  del browser  o smartphones e tablets.

Se invece volessimo delle colonne fisse ci viene in aiuto la dichiarazione column-count.

div{ 
column-count: 3;
-webkit-column-count:  3;
-moz-column-count: 3;
}

 

figura 2

 

 

 

A differenza di column-width dove il numero di colonne erano arbitrarie,cioè in base allo spazio del device, in column-count, a prescindere dallo spazio, visualizza sempre e comunque 3colonne.

Esiste la forma contratta dove si può dichiarare sia il numero di colonne sia la loro larghezza.

div{ 
columns: 3 6em;
-webkit-columns:  3 6em;
-moz-columns: 3 6em;
}

La proprietà column-gap si può intenderla come un margine tra le varie colonne: il suo valore predefinito è pari a 1em.

Se abbiamo la necessità di aumentare questo margine si può modificare con questa dichiarazione:

div{ 
column-width: 6em;
-webkit-column-width: 6em;    
-moz-column-width: 6em:
column-gap: 2em;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
}

Abbiamo dichiarato delle colonne ognuna con 6em di larghezza separate da un “gap”,  un margine di 2em.

 

Se volessimo dare un bordo alle colonne, la regola column-rule fa per noi.

Questa regola non incide sulle dimensioni delle colonne, si può dire che è sovrapposta al margine, alla dichiarazione column-gap”.

Questa regola in pratica, agisce come border:, e accetta le stesse proprietà del border:

  • Column-rule-width
  • Column-rule-style
  • Column-rule-color

 

div{
column-rule: 3px double #000;
-webkit-column-rule: 3px double #000;
-moz-column-rule: 3px double #000;
}

 

 

 

 

Ho impostato alle colonne un “rule”, una linea (che poi non ho capito questo nome, non era meglio un semplice esplicativo column-border e column-margin? Ma io, ovvio, non sono del W3C)  di 3px col bordo doppio nero.

 

Ivan Zammitti, web developer freelance.In principio indirizzato verso il graphic design, ha trovato il suo obiettivo nella vita come web developer front/back end. Specializzando in html/css/javascript/php ama condividere tecniche seguendo l'approccio open source e l'etica hacker. Il suo motto è "Code is poetry".

4 Comments

  • Mattia

    12 marzo 2012, 13:36

    Si dovrebbero mettere prima gli attributi con il prefisso per i vari browser e poi alla fine l’attributo standard, in modo che, quando verrà supportato l’attributo standard, verrà utilizzato quello essendo l’ultimo.

  • Lauryn

    12 marzo 2012, 18:08

    curioso, non vedo l’ora di provarlo!

  • Pikadilly

    19 marzo 2012, 23:14

    Son queste le cose che mi fanno dire: torno indietro e ricomincio a smanettare. 😀

  • Ivan23

    21 marzo 2012, 17:10

    @Pikadilly e non hai visto ancora “transition” e “animation” 😀

Lasciaci un tuo commento!

%d blogger hanno fatto clic su Mi Piace per questo: