Le Colonne nei CSS3

di 1 collaboratore:

Introduzione

Testi con righe troppo lunghe non sono facilmente leggibili; se ci vuole troppo tempo per muovere l'occhio dalla fine di una riga all'inizio della successiva, si tende a perdere traccia della linea corrente. Perciò, per ottimizzare l'utilizzo di schermi particolarmente larghi, gli autori devono affidarsi a colonne di testo multiple, posizionate l'una accanto all'altra, come nei quotidiani. Sfortunatamente questo è impossibile da gestire con CSS e HTML, senza imporre a priori la fine di una colonna, restringere pesantemente i marcatori utilizzabili o usare script particolarmente complicati.

Una specifica CSS3 preliminare suggerisce l'utilizzo di alcune nuove proprietà CSS per implementare questa funzionalità. Da Firefox 1.5 sono state implementate alcune di queste proprietà, in modo da ottenere il comportamento descritto nella bozza preliminare (con una eccezione descritta sotto).

Il blog di Robert O'Callahan utilizza le colonne CSS; provatele con Firefox 1.5 o successivi.

Usare le colonne

Numero di colonne e Larghezza

Due sono le proprietà CSS che controllano se devono essere utilizzate le colonne e quante: -moz-column-count and -moz-column-width.

-moz-column-count imposta il numero di colonne. Per esempio,

<div style="-moz-column-count:2">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

Mostrerà il contenuto in due colonne (se state usando Firefox 1.5 o successivi):

In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

-moz-column-width imposta la larghezza minima della colonna. Se -moz-column-count non viene impostato, il browser cercherà di posizionare quante più colonne possibili nella larghezza disponibile.

<div style="-moz-column-width:20em;">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

diventa:

In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

Maggiori dettagli sono descritti nella Bozza preliminare CSS3.

In un blocco multi-colonna, il contenuto viene automaticamente fatto scorrere da una colonna in quella successiva secondo quanto necessario. Tutte le funzionalità HTML, CSS e DOM, come la modifica e la stampa, sono supportate dalla modalità a colonne.

Bilanciamento dell'altezza

La bozza preliminare CSS3 specifica che l'altezza delle colonne deve essere bilanciata: cioè, il browser imposterà automaticamente la massima altezza delle colonne, tale che il contenuto in ogni colonna abbia altezza approssimativamente uguale. Firefox lo fa.

Tuttavia, in alcune situazione può essere utile impostare esplicitamente la massima altezza delle colonne, e quindi riempire tante colonne quante sono necessarie, partendo dalla prima e andando verso destra. Per esempio, gli articoli su http://iht.com/ lo fanno (però usando uno script). Quindi si estende la specifica preliminare in modo che, se la proprietà CSS height è impostata per un blocco multicolonna, ad ogni colonna sarà permesso di crescere al massimo sino a quel valore di altezza, dopo di che una nuova colonna dovrà essere aggiunta. Questo metodo risulta anche molto più efficiente nel definire il layout.

Distanza tra colonne

Normalmente ciascuna colonna è adiacente all'altra, ma di solito il risultato non è ottimale. E' possibile utilizzare la proprietà CSS padding tra le colonne per migliorare il risultato finale, oppure più semplicemente basta utilizzare la proprietà -moz-column-gap con il bloccomulticolonna:

<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for
the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
will be accepted for Firefox 1.5 Beta 1, which is set for release on
Thursday.</div>
In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

Degradazione

Le proprietà -moz-column saranno semplicemente ignorate da browser che non supportano le colonne. Perciò è relativamente semplice creare un layout che mostri una singola colonna nei browser che non supportano questa funzionalità e che risulti invece multicolonna su Firefox 1.5 e successivi.

Conclusione

Le colonne in CSS3 sono una nuova primitiva di layout che aiuterà gli sviluppatori Web a fare un uso migliore dello spazio sullo schermo. Gli sviluppatori più creativi troveranno molti modi di usarli, specialmente con la caratteristica di bilanciamento dell'altezza.


Riferimenti Addizionali

Etichette del documento e nomi di chi ha collaborato alla sua stesura

Contributors to this page: Lombardp
Ultima modifica di: Lombardp,