displayAnalisi dei valori, esempi di visualizzazione, compatibilità.
Nota: I valori block, inline e none non saranno
presi in considerazione, vista la loro popolarità.
Attenzione! La pagina necessita di una sistemata e di alcune correzioni di fondo, pertanto nel frattempo vi consiglio di prendere come punto di riferimento la guida di quirksmode.org. Eventuali aggiornamenti verranno segnalati sul blog.
Visivamente un elemento inline-block assomiglia ad un elemento inline, sebbene realmente si comporti come un elemento block - offrendo quindi l'opportunità di specificare tutte quelle proprietà valide solo per conenitori block level.
Proprietà supportata da Internet Explorer 5 (Mac), Opera (sperimentata sulla versione 9) e Safari (sperimentata sulla versione 3.5.2 di Konqueror).
Su Internet Explorer 6, funziona solo su elementi inline nativi (es. <span>, <a>, <label>).
inline-block e width: 20em, anch'esso a puro scopo dimostrativo.
Anche qua c'è del testo assolutamente inutile, a puro scopo dimostrativo.
Se un elemento block (senza float o posizionamento assoluto) segue un elemento run-in, l'elemento run-in
diventa il primo elemento inline nell'elemento block.
Se non è seguito da un elemento block, lo stesso elemento run-in diventa elemento block.
Proprietà supportata da Opera 5+ e parzialmente su Internet Explorer 5 (Mac).
Su Mozilla Firefox (sperimentata sulla versione 1.5) e Safari (sperimentata sulla versione 3.5.2 di Konqueror), funziona solo nel primo caso.
run-inblockrun-ininlineSe un elemento block (senza float o posizionamento assoluto) segue un elemento compact, l'elemento compact
diventa elemento inline (su una sola riga). La larghezza viene quindi comparata col margine assegnato
all'elemento block: se la larghezza è minore od uguale al margine, l'elemento compact sfrutta lo spazio
creato dal margine, e si posiziona accanto all'elemento block; altrimenti, l'elemento compact occupa tutta
la larghezza disponibile e rimane sopra all'elemento block.
Se non è seguito da un elemento block, lo stesso elemento compact diventa elemento block.
Proprietà supportata da Opera 7+.
Su Mozilla Firefox (sperimentata sulla versione 1.5) e Safari (sperimentata sulla versione 3.5.2 di Konqueror), funziona solo nel primo caso.
compactblock e margin-left: 20emcompactblock e senza marginecompactinlineL'elemento viene trattato come se fosse una voce di una lista.
Proprietà supportata da Opera (sperimentata sulla versione 9), Mozilla Firefox (sperimentata sulla versione 1.5) e Safari (sperimentata sulla versione 3.5.2 di Konqueror) e Internet Explorer 6.
blocklist-itemUn marcatore non viene considerato come parte integrante di un elemento. Mentre gli pseudo elementi after e before di elementi block e inline fanno parte del box principale, un elemento marker è formattato come un box indipendente di una sola riga, al di fuori di quello principale.
Proprietà attualmente non supportata da alcun browser.
marker e pseudo-elemento :before con display markerL'elemento table viene trattato come se fosse una tabella (<table>).
Gli elementi annidati table-row vengono trattati come righe della tabella (<tr>).
Gli elementi table-cell annidati negli elementi table-row vengono trattati come celle (<td>).
Gli elementi table-caption annidati negli elementi table vengono trattati come intestazioni di una tabella, e visivamente posti al di fuori dell'elemento table (<caption>).
E' bene osservare che eventuale contenuto annidato nell'elemento table (e non specificato come elemento table-cell),
assume le proprietà di un unico elemento table-cell.
Proprietà supportate su Opera 5+, Mozilla Firefox (sperimentate sulla versione 1.5) e Safari (sperimentate sulla versione 3.5.2 di Konqueror).
table. Questo testo è direttamente annidato nell'elemento table,
e si comporta come cella unica.
table-cell, contenuto in un elemento con display table-rowtable-cell, contenuto in un elemento con display table-rowtable-caption, contenuto nell'elemento con display tableL'elemento table-header-group viene trattato come gruppo di righe e celle semanticamente appartenenti alla testa della tabella (<thead>).
L'elemento table-row-group viene trattato come gruppo di righe e celle semanticamente appartenenti al corpo della tabella (<tbody>).
L'elemento table-footer-group viene trattato come gruppo di righe e celle semanticamente appartenenti ai piedi della tabella (<tfoot>).
A prescindere dall'ordine seguito nel markup, gli elementi si susseguiranno visivamente in questo modo:
Proprietà supportate su Opera (sperimentate sulla versione 9), Mozilla Firefox (sperimentate sulla versione 1.5) e Safari (sperimentate sulla versione 3.5.2 di Konqueror).
table
table-cell, contenuto in un elemento con display table-footer-grouptable-cell, contenuto in un elemento con display table-footer-grouptable-cell, contenuto in un elemento con display table-row-grouptable-cell, contenuto in un elemento con display table-row-grouptable-cell, contenuto in un elemento con display table-header-grouptable-cell, contenuto in un elemento con display table-header-groupL'elemento table-column viene trattato come colonna di celle (<col>), e visivamente è nascosto.
L'elemento table-column-group viene trattato come gruppo di colonne (<colgroup>.
Proprietà supportate su Mozilla Firefox (sperimentate sulla versione 1.5).
table
table-cell, contenuto in un elemento con display table-row.table-cell, contenuto in un elemento con display table-row.table-column e width: 30%, contenuto in un elemento con display table-column-grouptable-column e width: 70%, contenuto in un elemento con display table-column-groupVisivamente un elemento inline-table assomiglia ad un elemento inline, sebbene realmente si comporti come un elemento table.
Proprietà supportate su Opera (sperimentate sulla versione 9) e Safari (sperimentate sulla versione 3.5.2 di Konqueror).
inline-table e width: 50%
table-cell, contenuto in un elemento con display table-rowtable-cell, contenuto in un elemento con display table-rowE' possibile (se non probabile) che nella stesura di questa pagina abbia commesso alcuni errori, sia di natura linguistica, che tecnica. Per correzioni, lamentele, suggerimenti, potete contattarmi a questo indirizzo:
my.ekoes [at] gmail [dot] comIn particolare, avrei bisogno di maggiori informazioni sulla compatibilità a livello browser.
Se avete la possibilità di testare questa pagina su browser datati e non citati in questo documento, vi prego
di informarmi sui risultati ottenuti tramite l'indirizzo email sopra fornito (fornendomi, possibilmente,
anche una schermata di come visualizzate il test).
Vi ringrazio per la collaborazione.