Nella lezione precedente abbiamo visto cosa sono e come funzionano le proprietà del CSS visibility e display ed abbiamo avuto modo di capire che entrambe agiscono sulla visualizzazione (o meno) di un dato elemento della pagina. Diveramente da quello che si potrebbe pensare, tuttavia, le due proprietà non hanno lo stesso effetto…
Usare display:none o visibility:hidden?
In entrambi i casi l’elemento non verrà mostrato. Entrambe le direttive CSS, infatti, impediscono la visualizzazione dell’elemento cui sono applicate. Tra le due, tuttavia, esiste una differenza di non secondaria importanza:
- con visibility:hidden resterà uno spazio vuoto in corrispondenza dell’elemento (che si comporta come fosse "trasparente");
- con display:none, viceversa, non verrà mostrato nessuno spazio vuoto in corrispondenza dell’elemento.
In altre parole: se vogliamo "cancellare" virtualmente un elemento dalla pagina useremo display:none, se invece vogliamo solo renderlo invisibile (mantenendo, tuttavia, inalterato il suo ingombro) utilizzeremo visibility:hidden.
