Come ognuno di voi che smanetta HTML/CSS ben saprà, la proprietà display è una delle più importanti che il codice mette a vostra disposizione, in quanto permette di determinare le modalità con cui gestire i vari marcatori (o tags che dir si voglia) che utilizzate nei vostri siti web.
Ogni singolo marcatore ha una sua proprietà di default, nella maggioranza dei casi parliamo di block o inline, ma tramite l’attributo display di CSS possiamo tranquillamente andare a forzare la natura con cui questi vengono normalmente gestiti.
Prima di tutto, facciamo un po’ di chiarezza.
Un elemento display:block occupa tutto lo spazio disponibile, ovvero non accetta altri elementi nella stessa riga, a meno di non intervenire con dei float. Tra i più comuni i classici p o div.
Un elemento display:inline fa ovviamente il contrario. Permette agli elementi di essere uno a fianco all’altro fin quando lo spazio lo consente, vedi per esempio i marcatori a o span.
Un elemento display:none consente di nascondere visivamente lo stesso dalla visualizzazione del browser. Questo valore viene utilizzato di norma per far apparire gli oggetti con animazione jQuery.
Un valore estremamente utile è quello che vi concede di gestire gli elementi in display:inline-block. Come ben sapete, non è possibile attribuire delle misure ai marcatori inline, in quanto le loro dimensioni dipendono dal contenuto. Il valore inline-block può mantenere gli elementi in linea pur potendoli gestire come marcatori di blocco.
Un valore al quale invece non ho mai dato grande rilevanza è display:list-item che gestisce i marcatori trattandoli come block e assegnando ad ognuno di loro il pallino tipico della lista non ordinata.
Il valore Table per la gestione dei siti fullsize
Veniamo quindi al valore che oggi mi interessa spiegarvi per la gestione dei vostri siti fullsize responsive, ovvero display:table.
Questo valore è in grado di trasformare i vostri marcatori in vere e proprie tabelle, con tanto di righe e celle per gestire l’impaginazione della pagina.
Come potete utilizzarlo?
Supponete di voler creare un layout fullsize distribuito su 4 colonne come quello in figura.
La prima cosa da fare è creare la struttura HTML.
Come da figura, inserite in un div class section una riga e 4 elementi article, in cui ognuno di questi conterrà un h2 e un p (utilizzate del testo segnaposto Lorem Ipsum).
Passiamo ora alla formattazione.
Per cominciare, indicate che il vostro contenitore principale section venga settato in display:table. Di fatto formattiamo anche la riga e il vostro div section-row assume quindi il valore display:table-row.
A questo punto non vi rimane che definire i vostri 4 article come celle all’interno di riga e tabella, un po’ come si faceva ai tempi dei table-layout. Le vecchie tabelle, infatti, sono state deprecate anni or sono dal W3C e i layout odierni sono definiti table-less (senza tabelle).
Ed ecco qui, il gioco è fatto.
Ora non vi rimane che andare a definire la media queries per il mobile, dove di certo non potete lasciare le quattro colonne una a fianco all’altra, in quanto diventerebbero lunghissime e illeggibili. Riportiamo pertanto la proprietà display al valore originale (block) e ridefinite le misure.
Ecco qui una visualizzazione consona in portrait per smartphone, con risoluzione inferiore ai 768px di larghezza.
Vi ricordo che una volta definita la struttura, potete tranquillamente inserire una quinta colonna o toglierne una. Il layout si adeguerà di conseguenza senza utilizzo di float o misure percentuali di varia natura e genere. Questo sia che si decida di utilizzare una struttura fullsize, sia che si opti per un content di dimensioni standard (di norma 1170px).
Come da ultima figura questa soluzione viene implementata in numerosi temi premium. Nello screenshot che segue potete vedere un esempio di utilizzo dal noto tema Oshine.
Siete pronti a gestire i vostri layout?
Allora, buon divertimento.
Ancora nessun commento