Usare inline-block

Nell'articolo di cui si parlava l'altro giorno, quello in cui Douglas Bowman spiegava il processo di creazione dei bottoni adottati nell'interfaccia di GMail e GReader, il designer di Google attribuiva gran parte del merito per la riuscita implementazione alla dichiarazione CSS display:inline-block:

The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work.

Di cosa si tratta?

Previsto come valore per display, inline-block è stato aggiunto alla lista di quelli per la proprietà  in questione a partire dai CSS2.1. Spero di interpretare e tradurre correttamente la specifica dicendo che l'effetto che si ottiene applicandolo ad un elemento è questo: "Cià che sta all'interno di un inline-block è formattato come un box a blocco, l'elemento in sé è formattato con un elemento inline rimpiazzato".

Se dalla teoria si passa alla pratica, lo scenario d'uso su cui l'ho visto applicare quasi sempre è quello di strutture con icone e testo di accompagnamento organizzate secondo questo schema:

Ho preso l'immagine da questo post apparso su Mozilla Webdev, perché proprio questo layout l'autore ricrea facendo ricorso a inline-block. Spiegando, tra l'altro, i modi per raggiungere una compatibilità  cross-browser che si estende a Firefox 2 e IE6 e indicando i motivi per cui l'utilizzo dei float non sia l'ideale in certe situazioni.

Di analogo tenore e molto ben documentati (per esempio sul modo in cui usando hasLayout si possa estendere il supporto pieno di inline-block a IE) sono i tutorial di Gary Turner e Isaac Schlueter.

C'è poi un aspetto interessante nel post di Mozilla Webdev che vorrei proporre alla vostra attenzione. Dice l'autore:

Basically we want a layout with the flexibility of a table, but proper, semantic markup.

"Vorremmo un layout con la flessibilità  di una tabella, ma con un markup appropriato e semantico" (nel tutorial si fa uso di liste). Scusate, guardate l'immagine qui sopra: vi pare che in questo contesto l'uso di una tabella sia semanticamente errato? Così, per curiosità  :) Mi affido alla vostra saggezza e competenza :)