CSS: creare le proprie griglie responsive

Le griglie CSS non sono una novità . Fin dagli anni ’90 con Netscape 4 e con la nascita di Gecko nel 1998, i browser hanno da sempre diviso la pagina in un fitto reticolato di zone rettangolari chiamate frame. Per questo motivo, le griglie CSS sono semplicemente la rappresentazione visuale di una struttura preesistente. Esistono varie implementazioni di griglie CSS (960Grid System, Blueprint eccetera), ma quando si tratta di lavorare su progetti particolari i framework esistenti possono non soddisfare i requisiti del progetto. In particolare, le sfide poste dal mercato del mobile riportano d’attualità  il tema dei layout fluidi e della necessità  di usare griglie fluide. Certo, le media queries CSS3 possono evitare il problema, ma siamo sicuri che la soluzione più complessa è anche la migliore?

Prima delle griglie viene il modo con cui crearle. Esistono attualmente tre modi compatibili con IE8+ e gli altri browser a cui si aggiunge una terza via CSS3 compatibile solo con Firefox, Chrome, Safari e Opera:

1. valori delle tabelle della proprietà  display
2. display: inline-block
3. float
4. colonne CSS3 (column-count, column-gap ecc.)

I valori delle tabelle hanno la capacità  di farci lavorare in un contesto assolutamente adattabile, nel senso che spesso il browser adatterà  le dimensioni totali per far posto al contenuto:

#container {
	display: table-row;
	width: 100%;
}

div.box {
	display: table-cell;
	width: 25%;
}

Il difficile con questi valori è capire che comunque stiamo lavorando come se fossimo all’interno di una tabella, quindi tutte le regole del modello di tabella CSS si applicano anche a questo contesto.

inline-block crea invece un contesto di formattazione misto: gli elementi hanno sia le caratteristiche degli elementi inline (si dispongono sulla stessa riga) che di quelli di blocco (accettano larghezza e altezza):

#container {
	height: 100px;
}

div.box {
	width: 20%;
	margin-right: 5%; /* larghezza totale = 25% del genitore */
	height: 100%;  /* 100px, come il genitore */
}

Il problema col floating riguarda soprattutto il collassamento dello spazio verticale. Questo problema si risolve in vari modi e prende il nome di contenimento dei float sull’elemento genitore:

#container {
	overflow: hidden;
	height: 100%; /* IE6 */
}

div.float {
	float: left;
	width: 25%;
}

Un problema da tenere presente nelle griglie fluide è inerente al modo con cui le percentuali vengono calcolate. Nei CSS le dimensioni in percentuali vengono calcolate rispetto alle dimensioni dell’elemento genitore. Quindi il valore 25% è diverso se il contenitore è largo 1200 o 1900 pixel.

Fino a quando si tratta di usare un numero pari di box su ciascuna riga i calcoli sono semplici. Diventano più complessi quando gli elementi sono dispari:

<div id="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

In questo caso la larghezza del contenitore è sempre 100%. 100 diviso 3 equivale a 33.3 (periodico). I CSS supportano i valori decimali, quindi si può scrivere:

div.box {
	float: left;
	width: 33.3%;
}

La soluzione funzionerà  in IE8+, Firefox, Safari, Chrome e Opera, ma non nelle versioni 6 e 7 di Explorer. Infatti qui stiamo costringendo il browser ad operare un arrotondamento sul valore. Explorer 6 e 7 tende sempre ad arrotondare per eccesso, quindi spingerà  il terzo box sulla nuova riga perchè considererà  la sua dimensione come maggiore rispetto agli altri browser.

Un altro problema sono le dimensioni degli elementi rimpiazzati, ossia immagini, elementi multimediali o più precisamente gli elementi img, object, iframe, audio, embed e video.

Tutti questi elementi sono di tipo inline-block. Per quanto riguarda gli elementi multimediali e i frame, usare le percentuali per le loro dimensioni non è un problema, in quanto la definizione del loro rendering non ne verrà  degradata.

Con le immagini il discorso è diverso. Possiamo usare le percentuali su questi elementi con sicurezza solo se le dimensioni dell’immagine sono uguali o superiori a quelle del suo blocco contenitore (non il contrario):

div.img {
	width: 30%;
	height: 200px;
}

div.img img {
	display: block;
	width: 100%;
	height: 100%;
}

Questo codice non degraderà  l’immagine se questa per esempio ha le dimensioni di 500 x 300 pixel. Possiamo tuttavia controllare meglio le immagini usando le dimensioni minime e massime (come fa il tema TwentyEleven di WordPress):

.caption img {
	display: block;
	max-width: 90%;
	margin: 0 auto;
}

Infine, la soluzione CSS3 per le colonne è ancora in fase di definizione nelle specifiche e attualmente si pensa di apportare delle modifiche sostanziali al modo con cui vengono gestite le colonne create con questa tecnica. Se si vuole si può sperimentare qualcosa, ma già  il fatto che IE9- non supporta queste proprietà resta ancora un grande limite.