Tag: layout

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.

Alla scoperta di un nuovo modo di costruire layout CSS, senza float e posizionamenti assoluti.

A List Apart ha pubblicato un articolo che propone una nuova tecnica di posizionamento con i CSS, chiamata Faux Absolute Positioning. In pratica è un’alternativa ai due metodi più diffusi, il posizionamento con i float e quello assoluto.

Le ragioni della ricerca di un nuovo metodo per la realizzazione di layout CSS sono nella necessità di risolvere problematiche complesse e non così frequenti: si parla di siti dinamici, dove gli utenti possono magari decidere la posizione degli elementi nella pagina, con tutte le difficoltà che ne derivano.

Proprio per questo la tecnica del Falso Posizionamento Assoluto cerca di unire i pregi dei metodi conosciuti, eliminandone i difetti. In realtà non esattamente così, ma approfondiamo l’analisi per capire meglio.

La tecnica

Il codice HTML utilizzato deve servire a costruire una struttura a griglia, con linee orizzontali ed item (che rappresentano le colonne), in questo modo:

<div class="line">
<div class="item" id="item1">
<p>contenuto</p>
</div>
<div class="item" id="item2">
<p>contenuto</p>
</div>
<div class="item" id="item3">
<p>contenuto</p>
</div>
</div>

Sulla tecnica originale è presente un altro div intorno al contenuto, ma ai fini del layout non è rilevante.

Il CSS relativo invece è il seguente:

.line {
float: left;
width: 100%;
display: block;
position: relative;
}
.item {
position: relative;
float: left;
left: 100%;
}

Infine per posizionare ogni item, serve una dichiarazione come questa:

#item1 {
margin-left: -100%;
width: 20%;
}

In pratica per ogni item la posizione viene assegnata tramite un margin-left negativo. Per chiarirvi le idee, ho realizzato un esempio di layout a 3 colonne costruito in questo modo.

Considerazioni

Il vantaggio della tecnica è che ogni elemento viene posizionato facendo riferimento ad un punto ben preciso, cioè il margine destro del layout. Questo è un punto di forza preso direttamente dal posizionamento assoluto, con il vantaggio che gli elementi non vengono estratti dal normale flusso del codice, ed inoltre il contenuto continua a definirne l’altezza, cosa che non succede utilizzando i float.

Il risultato è stabile, rimane valido sia ingrandendo il testo che ridimensionando la finestra, e funziona su tutti i browser senza richiedere nessun hack, nemmeno per IE6.

Sembrerebbe un’ottima soluzione quindi, ma i difetti non mancano. Il più evidente è il gran numero di div utilizzati: se dovete realizzare un layout semplice a 2 o 3 colonne, non usate questo metodo e magari seguite gli esempi di Layout Gala di Alessandro Fulciniti.

Un altro problema riguarda le unità di misura, che devono essere sempre le stesse per posizionare gli elementi. Non potrete combinare percentuali, em, e pixel.

In conclusione, non vedo molte applicazioni per questa tecnica nel lavoro di tutti i giorni, ma per particolari esigenze potrebbe essere un’alternativa da considerare. Tenetela presente per i momenti di difficoltà, almeno finchè non arriveranno i CSS3 con il modulo per i layout a colonne.