CSS: La proprietà display

Analisi 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.

display: inline-block (Torna su)

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.

Compatibilità

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>).

Esempio

Qua c'è del testo assolutamente inutile, a puro scopo dimostrativo. Qua c'è del testo assolutamente inutile, a puro scopo dimostrativo.
Elemento con display inline-block e width: 20em, anch'esso a puro scopo dimostrativo. Anche qua c'è del testo assolutamente inutile, a puro scopo dimostrativo.
Qua c'è del testo assolutamente inutile, a puro scopo dimostrativo. Qua c'è del testo assolutamente inutile, a puro scopo dimostrativo.

display: run-in (Torna su)

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.

Compatibilità

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.

Esempio

Elemento con display run-in
Elemento con display block
Elemento con display run-in
Elemento con display inline

display: compact (Torna su)

Se 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.

Compatibilità

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.

Esempio

Elemento con display compact
Elemento con display block e margin-left: 20em
Elemento con display compact
Elemento con display block e senza margine
Elemento con display compact
Elemento con display inline

display: list-item (Torna su)

L'elemento viene trattato come se fosse una voce di una lista.

Compatibilità

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.

Esempio

Elemento con display block
Elemento con display list-item

display: marker (Torna su)

Un 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.

Compatibilità

Proprietà attualmente non supportata da alcun browser.

Esempio

Elemento con display marker e pseudo-elemento :before con display marker

display: table, table-row, table-cell, table-caption (Torna su)

L'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.

Compatibilità

Proprietà supportate su Opera 5+, Mozilla Firefox (sperimentate sulla versione 1.5) e Safari (sperimentate sulla versione 3.5.2 di Konqueror).

Esempio

Elemento con display table. Questo testo è direttamente annidato nell'elemento table, e si comporta come cella unica.
Elemento con display table-cell, contenuto in un elemento con display table-row
Elemento con display table-cell, contenuto in un elemento con display table-row
Elemento con display table-caption, contenuto nell'elemento con display table

display: table-header-group, table-row-group, table-footer-group (Torna su)

L'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:

  1. Elemento table-header-group
  2. Eventuale contenuto dell'elemento table (poichè incluso nel corpo della tabella)
  3. Elemento table-row-group
  4. Elemento table-footer-group

Compatibilità

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).

Esempio

Elemento con display table
Elemento con display table-cell, contenuto in un elemento con display table-footer-group
Elemento con display table-cell, contenuto in un elemento con display table-footer-group
Elemento con display table-cell, contenuto in un elemento con display table-row-group
Elemento con display table-cell, contenuto in un elemento con display table-row-group
Elemento con display table-cell, contenuto in un elemento con display table-header-group
Elemento con display table-cell, contenuto in un elemento con display table-header-group

display: table-column, table-column-group (Torna su)

L'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>.

Compatibilità

Proprietà supportate su Mozilla Firefox (sperimentate sulla versione 1.5).

Esempio

Elemento con display table
Elemento con display table-cell, contenuto in un elemento con display table-row.
Questo elemento dovrebbe avere una larghezza del 30%, impostata tramite un elemento table-column successivo all'elemento table-row.
Elemento con display table-cell, contenuto in un elemento con display table-row.
Questo elemento dovrebbe avere una larghezza del 70%, impostata tramite un elemento table-column successivo all'elemento table-row.
Elemento con display table-column e width: 30%, contenuto in un elemento con display table-column-group
Elemento con display table-column e width: 70%, contenuto in un elemento con display table-column-group

display: inline-table (Torna su)

Visivamente un elemento inline-table assomiglia ad un elemento inline, sebbene realmente si comporti come un elemento table.

Compatibilità

Proprietà supportate su Opera (sperimentate sulla versione 9) e Safari (sperimentate sulla versione 3.5.2 di Konqueror).

Esempio

Qua c'è del testo assolutamente inutile, a puro scopo dimostrativo. Qua c'è del testo assolutamente inutile, a puro scopo dimostrativo.
Elemento con display inline-table e width: 50%
Elemento con display table-cell, contenuto in un elemento con display table-row
Elemento con display table-cell, contenuto in un elemento con display table-row
Qua c'è del testo assolutamente inutile, a puro scopo dimostrativo. Qua c'è del testo assolutamente inutile, a puro scopo dimostrativo.

Informazioni (Torna su)

E' 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] com

In 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.