CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Vi è mai capitato di voler ottenere tramite CSS un layout che ricordi quello dei tradizionali quotidiani cartacei? Per chi volesse cimentarsi con i CSS3, sono già a disposizione alcuni generatori di CSS3 che consentono di testare uno dei nuovi moduli che dispone il testo su più colonne: CSS multi-columns
Vediamo di seguito come funziona questo modulo e quali sono i browser compatibili con CSS3 Columns.

CSS3 Columns

Attualmente solo Firefox, Safari e Chrome sono compatibili con il multi-columns. Mozilla utilizza il prefisso speciale moz-, mentre l’implementazione per Safari utilizza il prefisso -webkit, che abbinati alle regole ufficiali, permettono di creare layout multi-columns:

.columns {			  	
  -moz-column-count: 3;  	
  -moz-column-gap: 1em;  	
  -moz-column-rule: 1px solid black;  	
  -webkit-column-count: 3;  	
  -webkit-column-gap: 1em;  	
  -webkit-column-rule: 1px solid black;  	
  column-count: 3;  	
  column-gap: 1em;  	
  column-rule: 1px solid black;
}

I browser ad oggi compatibili sono:

• Firefox 1.5+
• Safari 3+
• Chrome
• IE 9

Di seguito nel dettaglio ecco cosa abbiamo appena specificato per dividere il layout in colonne.

Column-count: come definire il numero di colonne

Abbiamo impostato column-count:3 per dividere il div che contiene il testo in tre colonne di uguale larghezza. Abbiamo inoltre specificato uno spazio tra le colonne, il column-gap:1em, che agisce come la proprietà padding, aumentando notevolmente la leggibilità. Notiamo che l’altezza delle colonne si adatta al contenuto di testo e che, aumentando il numero dei caratteri o la dimensione del testo, essa si adatterà per contenerlo. Di seguito il codice CSS3 che dovremo scrivere:

		  	
  column-count: 3;  	
  column-gap: 1em; 

Column-width: impostare la larghezza delle colonne

Un altro modo per definire le colonne è impostare solo il column-width (e, come per l’esempio precedente, il column-gap). Per esempio, defininendo un column-width di 200px, tutte le colonne avranno 200 pixel di larghezza: il browser calcola di conseguenza quante colonne di questa larghezza possono inserirsi nell’elemento contenitore, e le crea in base a questo valore. Anche in questo caso, l’altezza delle colonne è definita dal contenuto testuale. Ecco cosa dobbiamo scrivere:

		  	
  column-width: 200px;  	
  column-gap: 1em; 

Column-rule: dividere le colonne con dei filetti

La proprietà column-rule agisce come una sorta di border tra le colonne. Questa regola ha infatti le stesse proprietà del border: (larghezza, stile e colore), e come per esso, possono essere scritte tramite "shorthand":

/*Shorthand per column-rule*/
column-rule:1px solid black;
/*che equivale a:*/
column-rule-color: #000;
column-rule-style: solid;
column-rule-width: 1px;

Column-span: intestazione su più colonne

Questa proprietà non è ancora supportata da nessun browser.
Ecco cosa imposteremo nei fogli di stile con la regola CSS3 per espandere il titolo su più colonne::

/*Settiamo il numero delle colonne: n | all*/
column-span: all;

Colonne CSS3 cross-browser: Columnizer jQuery

Come abbiamo potuto notare, siamo ancora lontani dal poter utilizzare nella pratica la proprietà CSS3 multi-columns. Il framework jQuery ci mette però a disposizione un plugin che fa esattamente quanto abbiamo visto fin’ora. Ecco cosa dobbiamo fare: scarichiamo Columnizer jQuery Plugin e colleghiamolo alla nostra pagina HTML da dividere in colonne, così:

<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>  
<script type="text/javascript" src="script/jquery.autocolumn.min.js"></script>  

Scriviamo poi in pagina il nostro contenuto, agganciandovi una classe, per esempio columns:

<h1>CSS3 e jQuery multi-column module</h1>  
<div class="columns">    
  <p>The Columnizer jQuery Plugin will automatically layout your content 
  in newspaper column format. You can specify either column width or a static 
  number of columns. And, of course, it’s easy to use!</p>  
</div>  

Adesso agganciamo il plugin a questa classe, così:

$(document).ready (function() {
  $('.columns').columnize({columns:2});
});

Ecco cosa succede: il plugin suddivide il contenuto in div ai quali assegna una classe column: alla prima aggancia la classe first, all’ultima la classe last.

jQuery e le colonne ad altezza uguale

Terminiamo con un ottima funzione che permette di impostare uguale altezza per elementi flottanti, semplicemente includendo questo script e agganciandolo al .mioElementoFloattante:

$(document).ready(function(){
function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
} ;
equalHeight($(".mioElementoFloattante"));

});
 

Di questa funzione è stato realizzato anche un plugin.