Usare inline-block
Lunedì 23 Febbraio 2009 - 08:18
di Cesare Lamanna
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.
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 :)
Commenti
1
Bello e utile, credo comunque di riuscire a replicare “l’effetto” usando elementi in float.
2
Scusate, guardate l’immagine qui sopra: vi pare che in questo contesto l’uso di una tabella sia semanticamente errato?
Semeanticamente direi proprio di sì: il fatto che quei dati siano su 3 righe e 4 colonne è una scelta esclusivamente di presentazione, non intrinseca dei dati.
Operativamente parlando, se arriva la richiesta di mettere l’ultimo elemento in seconda posizione e far slittare tutti gli altri: con una lista (o una serie di div o quant’altro) basta un taglia/incolla, con una tabella i taglia/incolla si sprecano… (ovviamente parlo di modifica manuale della pagina, se i dati vengono generati dinamicamente il problema non si pone a livello di html)
# - postato da Luciano Ghione - 23 Febbraio 2009 - 09:20
3
Tra l’altro, a mio parere, l’elemento più indicato per una photogallery è la definition list.
# - postato da William Ghelfi - 23 Febbraio 2009 - 09:24
4
Sono d’accordo con Luciano Ghione.
Da un punto di vista semantico, l’uso della tabella in quel caso e’ errato; le tabelle devono essere utilizzate per intabellare dati mentre qui sono utilizzate per fini di layout.
La cosa puo’ pero’ comunque funzionare dal punto di vista dell’accessibilità, dato che uno screen reader, leggendo le celle della tabella da sinistra a destra e dall’alto in basso, puo’ rendere chiaro il contenuto della tabella stessa.# - postato da ferli - 23 Febbraio 2009 - 10:53
5
Avevo giá trovato il post tramite un altro blog. Molto interessante. Perché voi di HTML.it non scrivete un articolo a riguardo dei css hacks?
Cesare, per me le tabelle sono semanticamente corrette se per ogni riga ci sono campi che corrispondono alla colonna.
# - postato da Martin Sarsini - 23 Febbraio 2009 - 10:54
6
Perfetto, mi avete già convinto :) Soprattutto la tua osservazione, Martin, mi pare assolutamente risolutiva di tutte le mie perplessità
# - postato da Cesare Lamanna - 23 Febbraio 2009 - 11:40
7
E’ finito anche nel mio feedreader l’ottimo articolo citato.
Condivido quanto detto: semanticamente più corretta una lista e faccio notare che, non essendo “celle” ad altezza fissa, non si può realizzare tutto ciò con semplici float.
Pecccato dover ricorrere agli hack e rendere il css non valido… In questo caso però ne vale la pena.
# - postato da Andrea Zilio - 23 Febbraio 2009 - 12:27
8
La tabella può essere comoda, ma non è il markup giusto. Se poi si deve adattare ad un layout fluido, la soluzione sta solo nei float. Io ho provato a fare una galleria con didascalie che si adattasse al contemitore (Demo Galleria CSS) e il vantaggio di avere un codice HTML molto semplice si presta particolarmente bene in tutti quei casi (vedi CMS) in cui tale galleria deve essere generata automaticamente facendo un loop.
9
la soluzione è bella, non c’è che dire, però io odio le proprietà CSS non standard e non le uso.
10
Quelle tabelle fanno buona impressione ma non sono adatte a quei dati.
# - postato da Ratamusa - 24 Febbraio 2009 - 10:52
11
ma usare inline-block vuol dire utilizzare moz-inline-stack e questo non è gradito nella validazione del css
# - postato da Marco - 25 Febbraio 2009 - 10:45
12
[…] Usare inline-block Come creare un layout con la flessibilità di una tabella, ma con un markup appropriato e semantico. […]
# - postato da Il meglio della settimana #7 | BigThink - 28 Febbraio 2009 - 11:01