display

Il fatto che nell’HTML esistano diverse tipologie di elementi è uno dei punti a favore di questo linguaggio… il fatto che con CSS si possa variarne la tipologia è un altro punto a suo favore.

Prima di andare oltre, tuttavia, vorrei che ti soffermassi per un attimo su tutte le tipologie di visualizzazione che un elemento può assumere. Tieni conto che alcune di esse sono molto rare e difficilmente le utilizzerai in un progetto. Tutte le tipologie di visualizzazione sono: inline, block, inline-block, inline-table, list-item, table, table-caption, table-column-group, table-header-group, table-footer-group, table-row-group, table-cell, table-column, table-row, flex, inline-flex1, none.

Come abbiamo visto nel capitolo introduttivo, i due elementi più comuni sono inline e block. Tuttavia hai sicuramente già incontrato altre tipologie: gli elementi di lista sono dei list-item, le tabelle sono dei table (per non parlare delle righe, delle colonne e delle celle).
Grazie, quindi, ai CSS puoi far variare a tuo piacimento la visualizzazione di un elemento.

span{
   display: block;
}

In questo modo cambi temporaneamente le modalità con cui uno <span> si presenta, rendendolo di tipo block. Attenzione però: non vuol dire che a livello logico <span> adesso sia di tipo block, per cui puoi inserire al suo interno un DIV, ad esempio2! La sua naturale funzionalità rimane. È come se prendessi il motore di una Ferrari e lo inserissi all’interno di una Panda: non è che potrai per questo vantarti con i tuoi amici di aver acquistato una Ferrari!

Ritornando un secondo sull’argomento float e clear, potendo variare la visualizzazione di un elemento, capisci anche come sia possibile utilizzare un clear su uno <span>.

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

In questo modo non vai a “sporcare” l’HTML con tag non necessari e con 3 semplici righe di CSS ti risolvi un grande problema.

Impostando display:none; su un elemento, questo viene nascosto e l’utente non lo vede nel tuo sito. Attenzione che anche lo spazio che occupa viene completamente nascosto. Esiste un’altra proprietà che nasconde l’elemento ma che mantiene inalterato il suo spazio occupato: visibility.

1. flex e inline-flex sono nuove proprietà di CSS3. Inoltre, ricorda che non tutte le proprietà sono supportate da tutti i browser (a maggior ragione quelle nuove).

2. Questo ti fa comprendere anche che tecniche per me errate, come ad esempio inserire un <div> all’interno di un link — cosa che in HTML5 potresti fare — a livello logico non avrebbero senso.