Layout con le tabelle CSS
Venerdì 10 Ottobre 2008 - 09:27
di Cesare Lamanna
Qualcuno tra i lettori più affezionati ricorderà un vecchio post con cui segnalavamo questo esperimento consistente nel realizzare un layout basato sui CSS senza però float o posizionamenti, ma attraverso l’uso delle proprietà associate alle tabelle e a certi valori speciali di display come display: table. In sintesi, un elemento a cui venga associata qualcuna di queste definizioni di stile si comporta in fase di resa come una tabella o uno dei suoi elementi costitutivi (celle, colonne, righe, etc). Una specie di uovo di Colombo con cui si ripristina tramite i CSS ciò che prima si faceva con HTML.
Torna sul tema con un intervento al solito estremamente completo Andy Clarke. Il post analizza nei punti essenziali la trasformazione di un layout basato sui float nella versione basata sulle tabelle CSS. Non male vero? Il supporto è garantito per tutti i browser recenti (Firefox 2/3, Safari, Opera 9.5) meno che per IE6 e IE7 (su IE8 invece tutto bene). L’analisi del CSS nella sua parte finale rivela i punti chiave della tecnica adottata.
Clarke specifica che in certi casi specifici (la trasformazione di una lista di immagini in griglia, per esempio) l’uso di float e posizionamenti è ovviamente ancora necessario, ma che per la realizzazione della struttura portante del layout la tecnica si riveli piuttosto robusta.
Proprio l’uso di questo metodo, si segnala, è il tema portante di un nuovo e-book in preparazione per i tipi di Sitepoint, Everything You Know About CSS Is Wrong!. Uno degli autori è proprio quel Kevin Yank che aveva presentato l’esempio da cui abbiamo preso le mosse in questo post.
Commenti
1
Sinceramente non riesco a vedere le migliorie apportate da tale tecnica, rispetto al posizionamento con i float. Come spesso ho scritto, e letto, ognuno adotta la tecnica con la quale si trova meglio. Non credo esista un metodo migliore o peggiore rispetto ad un altro. Quello che conta è il risultato; e poi… siamo alle solite: se è stato scritto:
“Il supporto è garantito per tutti i browser recenti (Firefox 2/3, Safari, Opera 9.5) meno che per IE6 e IE7 (su IE8 invece tutto bene)“,
a cosa servirebbe introdurre questa tecnica in un sito? tanto vale si va avanti a colpi di commenti condizionali, oltre al fatto che il display:table viene segnalato come errore dal validatore dei css.
2
Non c’è dubbio che come cosa sia interessante, ma come ha definito gia floyd nel suo commento, l’importante è il risultato!
Poi se non va bene con IE6\7 il gioco non vale la candela, in quanto si sa che ad oggi (purtroppo) la maggior parte degli utenti usa, questo tipo di browser.
Per il layout ognuno usa quello con cui piu si trova meglio! io ad esempio mi trovo meglio ancora con le tabelle
# - postato da Pierluigi - 12 Ottobre 2008 - 12:13
3
devo combattere con clienti che usano ancora IE 5.5 (perchè il loro IT si “dimentica” di aggiornare IE), temo che non sia una tecnica molto spendibile per il momento…
# - postato da Veronica Rota - 13 Ottobre 2008 - 09:33
4
I vantaggi che porta questa tecnica sono notevoli, per esempio il fatto che le colonne di una tabella non seguono, ovviamente, il box model offrendo quindi molta più libertà agli sviluppatori.
Tuttavia utilizzarla ora vorrebbe dire comunque creare dei fogli di stile specifici per IE6/7, quindi a livello procedurale grandi vantaggi non ne ha, anzi!
Però l’anno prossimo, con l’introduzione di IE8, probabilmente potremo utilizzarla più frequentemente!
# - postato da Andrea Gandino - 13 Ottobre 2008 - 11:53
5
@Vernica Rota…..
L’IE5.5 non viene sostituito con qualcosa di più aggiornato per via del sistema troppo vecchio oppure per le troppe rogne che i superiori di quel responsabile it potrebbero fargli avere.# - postato da Ratamusa - 13 Ottobre 2008 - 12:54
6
la trovo una cosa abbastanza inutile, cioe IE6/7 sono i leader del mercato dei browser e tu gli ignori beatamente? ce da dire che io sono un fan accanito di microsoft quindi sono un po di parte! :)
# - postato da stefanomnn - 15 Ottobre 2008 - 08:25
7
[…] 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. […]
# - postato da Layout a tabelle con i CSS - TomStardust.com - 18 Novembre 2008 - 00:13
8
Speriamo arrivino presto i CSS3. Quoto Veronica. Odio IE!
# - postato da 2slides Web Design - 24 Febbraio 2009 - 00:30