Con Internet Explorer 8 sarà possibile usare la proprietà CSS display:table. Cambierà qualcosa per i web designer?
Dopo aver abbandonato l’uso delle tabelle per il layout, in questo periodo si sta tornando a parlare del loro utilizzo in forma diversa: non più all’interno del codice HTML, ma con la proprietà display dei CSS.
Come fa notare Digital Web Magazine, con l’imminente uscita di Internet Explorer 8 questa proprietà supporterà correttamente i valori table, table-row e table-cell per la prima volta su un browser Microsoft. Le ultime versioni di Safari, Opera e Firefox seguono già gli standard e non dovrebbero avere alcun problema.
Come funziona la tecnica?
Basta realizzare una semplice struttura nel codice HTML con dei div:
<div id="main">
<div id="nav">
...contenuto della colonna
</div>
<div id="content">
...contenuto della pagina
</div>
</div>
Quindi è sufficiente applicare gli stili relativi, facendo in modo che il contenitore principale abbia un display: table, e le singole colonne un display: table-cell:
#main {
display: table;
border-collapse: collapse;
}
#nav {
display: table-cell;
width: 180px;
}
#content {
display: table-cell;
width: 580px;
}
Da notare che una tecnica simile dal punto di vista della semantica del codice non presenta alcuna controindicazione. L’aspetto tabellare infatti viene gestito interamente tramite i fogli di stile, il markup è ben organizzato e non ha particolari differenze rispetto a quello di un layout con i float.
Incompatibilità e difetti
Per ogni nuova tecnica è fondamentale considerare quanto essa sia realmente applicabile. Nel caso dei layout a tabelle con i CSS, uno dei punti deboli è sicuramente il mancato supporto di IE6 e IE7. Non poter usare questa soluzione sui due browser che da soli rappresentano più del 70% del mercato, la rende di fatto inutilizzabile: al momento è poco più che esercizio di stile.
Un altro aspetto poco considerato è l’ordine dei contenuti all’interno del codice HTML. Con questa tecnica si ripresenta uno dei difetti principali delle tabelle: l’impossibilità di organizzarli secondo la loro importanza. Usando un layout tabellare tutti i vantaggi del posizionamento con i float spariscono, dovendo per forza di cose ordinare gli elementi secondo il loro ordine di apparizione nella pagina.
Se volete continuare ad approfondire il discorso, vi rimando ad un post di Edit di qualche settimana fa. Dal mio punto di vista, potrebbe essere interessante sperimentare la tecnica per il futuro, ma con qualche riserva. Sarà infatti possibile usarla quando IE6 e IE7 spariranno dalla circolazione, ma i CSS3 saranno ormai alle porte con nuove soluzioni per gestire il layout di un sito.
Sarà interessante osservare le soluzioni che si verranno a creare con la nuova proprietà finalmente disponibile su un IE. Purtroppo la classica controindicazione, la retrocompatibilità con gli -altri- IE, ne faranno come dici tu poco più di un curioso esercizio di stile.
continuo a pensare che sia una scelta anti-semantica. Le tabelle vanno usate per gestire matrici e dati tabellari… non per i layout.
Quella che dovrebbe essere un’innovazione mi sembra tanto un ritorno al passato!!!
@Laura: quello che dici vale per le tabelle utilizzate nel codice HTML, in questo post se ci fai caso si parla esclusivamente di fogli di stile. La questione è sullo stesso piano del dare ad un elemento inline un display:block, la semantica non c’entra.
Non potrei nemmeno lontanamente pensare di scrivere un post incitando all’uso delle tabelle nel codice HTML :)
@Tom: rileggo ora il mio commento e in effetti ho fatto un po’ di confusione, in ogni caso non mi convince questa proprietà.. devo capire meglio che vantaggi potrebbe apportare. Le mie, e forse è inutile ribadirlo, sono considerazioni sull’argomento non sulla scelta di pubblicare questo post nè tantomeno sul come è stato scritto.. leggo sempre con piacere il tuo blog perchè è davvero scritto bene ed ogni argomento è approfondito nel modo giusto… dove lo trovi tutto questo tempo….. :-)
Se volessi aver a due colonne ?
e che poi secondo il dispositivo (device) che utilizzo se è più piccolo si rimpiciolisce a formare una colonna unica è fattibile ciò ?
Se sì come ? Grazie chiunque volesse rispondermi ^_^