CSS: consigli per i layout fluidi

Ho sempre pensato che in fondo le media queries dei CSS3 che intercettano la larghezza della finestra del dispositivo non siano altro che un'inutile complicazione rispetto a quanto i layout fluidi CSS possano già offrire. Riflettiamo sulla parola: fluido significa che si adatta alla finestra del browser, a qualsiasi risoluzione. Una colonna la cui larghezza è pari a 30% sarà sempre proporzionale alla larghezza dello schermo. Dunque avrà un valore maggiore con schermi grandi e minore con schermi piccoli. Ma la cosa importante è che la ratio, la proporzione del layout rimarrà intatta. Ma quali sono gli accorgimenti da adottare con i layout fluidi? Vediamoli insieme.

Gestire le immagini

Ci sono due tipi di immagini da gestire:

1. elementi img
2. immagini di sfondo

Il trucco per gestire le immagini nella marcatura è definire la loro larghezza in percentuale. Tale larghezza in percentuale viene calcolata rispetto all'elemento genitore delle immagini. Il segreto è avere immagini sempre leggermente più grandi del loro genitore (senza esagerare):

li {
	width: 30%;
	float: left;
}

li img {
	display: block;
	width: 100%;
}

Per le proporzioni è utile usare le misure minime e massime dei CSS:

li {
	width: 30%;
	float: left;
}

li img {
	display: block;
	width: 100%;
	min-width: 250px;
	max-width: 400px;
}

Questo ci permette di mantenere le proporzioni dell'immagine sia quando la finestra si allarga che quando si restringe.

Le immagini di sfondo CSS, invece, andrebbero gestite non come un unico blocco visivo, ma cercando di vederle come delle tessere del mosaico finale. In tal senso occorre ricordare che usare immagini di sfondo pensando alla maggiore risoluzione di schermo possibile è un approccio sbagliato, perchè porta ad avere immagini enormi e pesanti.

Invece bisogna fare il contrario: prendere un'immagine grande e scomporla in componenti più piccoli che poi andranno posizionati con i CSS:

#branding {
	height: 6em;
	background: url(branding-left.png) no-repeat 0 50%;
}

#branding h1 {
	background: url(branding-right.png) no-repeat 100% 50%;
}

Un tipico esempio sono i gradienti: è inutile avere un gradiente largo 2000 pixel, perchè basta realizzare un'immagine larga 1 pixel e alta quanto l'elemento che andrà a coprire e poi usare la proprietà background-repeat:

#footer {
	height: 6em;
	background: #000 url(gradient-footer.png) repeat-x 0 0;
}

E le altezze? Occorre usare un approccio incrementale, ossia tenere conto dei possibili ingrandimenti del font di base da parte dell'utente e creare immagini più alte del normale usando al contempo gli em:

#navigation a {
	background: #06c url(tab.png) no-repeat;
	height: 2em;
	min-height: 32px;
}

Se partiamo da un font di base della dimensione di 12 pixel, allora possiamo usare un'immagine alta 36 pixel, perchè questa misura equivale a 3em. In questo modo abbiamo tenuto conto di un ingrandimento del font di circa due volte.

Arrotondamenti

Tenete sempre presente che i browser arrotondano i valori delle percentuali per eccesso o per difetto. Internet Explorer, fino alla versione 7, ha sempre arrotondato per eccesso. Quindi se abbiamo tre elementi flottati su una riga e vogliamo dividere esattamente il loro contenitore in tre parti possiamo scrivere:

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

Possiamo arrotondare fino a due o a tre cifre decimali, ma purtroppo il risultato non sarà identico su Internet Explorer. Infatti le versioni 6 e 7 interpreteranno il valore complessivo non come 99.9% ma per eccesso, e quindi un box finirà sulla riga successiva.

La soluzione è usare in Explorer valori inferiori di circa un punto percentuale per compensare questo suo difetto.