Questa è la traduzione dell'articolo The First Tool You Reach For di Kevin Yank pubblicato originariamente su 24 Ways il 13 dicembre 2008.
Microsoft ha recentemente annunciato che Internet Explorer 8 sarà rilasciato nella prima metà del 2009. Rispetto al supporto degli standard degli altri browser più diffusi, IE8 non offrirà nulla di particolarmente eccezionale, ma raggiungerà finalmente lo stato dell'arte in una specifica area: il supporto delle tabelle CSS. Questo fatto può potenzialmente innescare un cambiamento importante nel vostro approccio al web design.
Per mostrarvi quanta grande differenza possano fare le tabelle CSS, pensate a come potreste realizzare da zero un layout fluido a tre colonne. Giusto per rendervi la vita un po' più complicata, una colonna sarà a larghezza fissa, con un colore di sfondo diverso da quello del resto della pagina. Pronti? Andiamo!
OK, dal momento che siete tra i web designer che leggete 24Ways, supporrò che avete almeno considerato l'idea di realizzare il tutto senza usare le tabelle HTML per il layout. Se poi siete tra quelli che seguono le tendenze più avanzate, allora suppongo che avete già iniziato a pensare ai float CSS, ai margini negativi e alle false colonne.
Ora ammetetelo: probabilmente avete anche considerato il tempo necessario per calcolare alla perfezione le possibili sovrapposizioni sui margini negativi, per verificare i float collassati in Internet Explorer e in generale per far sì che su tutti i browser le cose appaiano come volete. Se dopo tutto avrete la tentazione di mollare e usare le tabelle HTML, non posso certo incolparvi di qualcosa.
Ci sono tantissimi web designer professionisti che scelgono ancora di usare le tabelle HTML come loro principale strumento nella creazione del layout. Certo, sanno che gli utilizzatori di screen reader possono rimanere confusi da questo uso inappropriato delle tabelle, ma alla fine hanno un lavoro da portare a termine, e preferiscono affidarsi a strumenti che rendano quel lavoro semplice non difficile e complicato.
Ora lasciate che vi mostri come fare tutto usando le tabelle CSS. Per prima cosa, abbiamo un elemento div per ciascuna delle nostre colonne e inseriamo tutto all'interno di altri due div:
<div class="container">
<div>
<div id="menu">
---
</div>
<div id="content">
---
</div>
<div id="sidebar">
---
</div>
</div>
</div>
Non preoccupatevi dell'ammasso di div che vedete nel codice riportato qui sopra. Diversamente da quanto avviene per le tabelle, i div non hanno un significato semantico e dunque possono essere usati liberamente per offrire degli agganci agli stili che volete applicare alla pagina.
Usando i CSS possiamo far sì che il div più esterno si comporti e venga visualizzato come una tabella con i bordi collassati (ovvero, le celle adiacenti condividono un bordo) e con layout fisso (ovvero, la larghezza delle celle non è definita dal loro contenuto):
.container {
display: table;
border-collapse: collapse;
table-layout: fixed;
}
Con altre due regole impostiamo il div centrale per far sì che si comporti come la riga di una tabella, e ciascuno dei div interni li definiamo come se fossero le celle della tabella:
.container > div {
display: table-row;
}
.container > div > div {
display: table-cell;
}
Per finire, possiamo impostare direttamente la larghezza delle celle (e della tabella stessa):
.container {
width: 100%;
}
#menu {
width: 200px;
}
#content {
width: auto;
}
#sidebar {
width: 25%;
}
Ecco, abbiamo ora un solido layout a tre colonne pronto per ricevere gli stili che preferite, come in questo esempio:
Questo esempio sarà reso alla perfezione nelle versioni ultime di Firefox, Safari e Opera, così come sulla beta attuale di Internet Explorer 8.
Le tabelle CSS non sono utili solo per layout di pagina con più colonne; possono venire comodi in svariate situazioni, in tutte quelle che richiedono che degli elementi vengano visualizzati fianco a fianco sulla pagina. Considerate questo semplice form per il login:
Tutto quello che serve per ottenere questo layout usando i float CSS potrà essere roba vecchia e nota per voi, ma provate spiegarlo ad un dilettante agli inizi e guardatelo mentre sgrana gli occhi inorridito davanti alle acrobazie che bisogna mettere in atto.
Ecco invece come si può fare con le tabelle CSS:
<form action="/login" method="post">
<div>
<div>
<label for="username">Username:</label>
<span class="input"><input type="text" name="username" id="username"/></span>
</div>
<div>
<label for="userpass">Password:</label>
<span class="input"><input type="password" name="userpass" id="userpass"/></span>
</div>
<div class="submit">
<label for="login"></label>
<span class="input"><input type="submit" name="login" id="login" value="Login"/></span>
</div>
</div>
</form>
Questa volta usiamo un misto di div e span come agganci semantici trasparenti per gli stili. Diamo un'occhiata al codice CSS.
Per prima cosa impostiamo il div esterno come tabella, i div interni come righe di tabella e gli elementi label e span come celle di tabella (con il testo allineato a destra):
form > div {
display: table;
}
form > div > div {
display: table-row;
}
form label,
form span {
display: table-cell;
text-align: right;
}
Vogliamo che la prima colonna della tabella sia sufficientemente larga da ospitare le nostre label, ma non più larga. Con la tecnica dei float CSS dovremmo indovinare quanto potrebbe essere questa larghezza e aggiustarla ogni volta che cambiamo le label del form. Con le tabelle CSS possiamo semplicemente impostare il valore per la proprietà width della prima colonna a qualcosa di molto piccolo (1em) e poi usare la proprietà white-space per forzare la colonna alla larghezza richiesta:
form label {
white-space: nowrap;
width: 1em;
}
Pe rifinire il layout faremo occupare ai campi di testo e password l'intera larghezza delle celle che li contengono:
input[type=text],
input[type=password] {
width: 100%;
}
Il resto è questione di margini, padding e bordi per ottenere l'aspetto che desideriamo. Ecco l'esempio finale.
Come primo strumento che approcciate per svolgere ogni compito relativo al layout, le tabelle CSS hanno molto più senso a certe criptiche astrusità legate all'uso dei float. Quando IE8 sarà rilasciato e tutti i browser principali supporteranno le tabelle CSS, potremo gradualmente iniziare a sviluppare layout basati sulle tabelle CSS su siti più mainstream.
Nel nostro libro, Everything You Know About CSS Is Wrong!, io e Rachel Andrew esploriamo con più dettagli come le tabelle CSS funzionano da strumento per i layout nel mondo reale. Le tabelle CSS hanno i loro problemi esattamente come i float, ma tendono a non influenzare negativamente i task più comuni legati alla costruzione di un layout, anche i modi per aggirare i problemi sono meno complicati. Dateci un'occhiata e preparatevi sin da ora per il prossimo grande passo nel web design con i CSS.
