La proprietà display
Una proprietà fondamentale di CSS è sicuramente display. Attraverso questa proprietà, infatti, è possibile definire il modo in cui un dato elemento viene mostrato (o meno) all’interno della pagina.
Abbiamo già visto, in una precedente lezione, che ogni elemento della pagina ha un valore predefinito di visualizzazione ed è pertanto possibile distinguere gli elementi in linea dagli elementi di tipo blocco. Oltre a questi devono essere menzionati, inoltre, gli elementi delle liste e delle tabelle che costituiscono due ulteriori famiglie di elementi con peculiari caratteristiche di presentazione.
Attraverso la proprietà display possiamo agire su questi valori predefiniti trasformando, ad esempio, un elemento inline in uno di tipo block in questo modo:
span.box { display: block; }Con questo codice abbiamo trasformato uno <span> (tipico elemento in linea) in un blocco equivalente ad un <div>.
I principali valori utilizzati per la proprietà block sono:
- block – l’elemento viene presentato come un blocco (a prescindere dalle sue caratteristiche di default);
- inline – l’elemento viene presentato come un in linea (a prescindere dalle sue caratteristiche di default);
- inline-block – l’elemento viene presentato come un blocco in linea, cioè un particolare tipo di blocco che – pur avendo dimensioni, margini, padding e bordi come i normali elementi di tipo block – si dispone orizzontalmente e non produce alcun ritorno a capo;
- none – l’elemento non viene visualizzato nella pagina e non occupa alcun ingombro all’interno del documento.
Oltre a questi (che sono sicuramente i più utilizzati) è possibile utilizzare valori specifici per trasformare un elemento in qualcosa di diverso, ad esempio:
- list-item – l’elemento viene presentato come un item di una lista;
- table – l’elemento viene presentato come una tabella;
- table-row – l’elemento viene presentato come la riga di una tabella;
- table-cell – l’elemento viene presentato come la cella di una tabella.
Oltre a questi, esistono numerosi altri valori tuttavia la loro trattazione esula dallo scopo della nostra guida.
La proprietà visibility
Per certi versi strettamene connessa alla proprietà display è la proprietà visibility. Attraverso questa proprietà viene gestita, come è facile intuire, la visibilità dell’elemento. In pratica, in parole povere, consente di creare elementi invisibili all’interno della pagina.
Questa proprietà ammette due soli valori:
- visible – (default) l’elemento è visibile;
- hidden – l’elemento è invisibile.
A questo punto, però, si rende necessaria una precisazione: gli elementi nascosti mediante visibility: hidden, a differenza di quelli cui è stato applicato display: none, sono presenti nella pagina ma semplicemente non vengono visualizzati. Questo significa che l’ingombro dell’elemento non muta, semplicemente al suo posto compare uno spazio vuoto avente le stesse dimensioni dell’elemento nascosto.
