CSS Academy · Lezione

Visibility e display: none

Imparate quando utilizzare visibility: hidden anziché display: none e come ciascuna proprietà influisce sul layout.

Visibility e display: none è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Tre modi per nascondere gli elementi

Il CSS offre tre metodi comuni per nascondere gli elementi, ciascuno con effetti diversi sul layout, sull'accessibilità e sull'interazione:

display: none
visibility: hidden
opacity: 0

display: none

L'elemento viene completamente rimosso dal layout. Non occupa spazio, non è interattivo e non viene letto dai lettori di schermo nella maggior parte delle implementazioni. L'elemento esiste comunque nel DOM.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

L'elemento è invisibile, ma continua a occupare spazio nel layout. Non è possibile fare clic su di esso e non viene letto dai lettori di schermo. È utile per nascondere qualcosa senza causare spostamenti del layout.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

L'elemento è invisibile, ma completamente interattivo. Continua a occupare spazio e risponde agli eventi, come clic e passaggi del mouse. I lettori di schermo potrebbero continuare a leggerlo.

<button class="transparent">Invisible but clickable</button>

Override di visibility: visible

Un elemento figlio può sovrascrivere visibility: hidden del genitore impostando visibility: visible. Questo non è possibile con display: none: anche i figli restano completamente nascosti.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Tabella di confronto

Riferimento rapido:

display: none: nessuno spazio, nessun clic, non viene letto
visibility: hidden: occupa spazio, nessun clic, non viene letto
opacity: 0: occupa spazio, rimane selezionabile, potrebbe essere letto

Animare visibility

display non può essere animato. Per fare apparire o scomparire gradualmente gli elementi, combini visibility con opacity:

<div class="dropdown open">Dropdown menu content</div>

Nascondere in modo accessibile con SR-only

Il pattern solo per lettori di schermo nasconde visivamente il contenuto, mantenendolo accessibile alle tecnologie assistive:

<button>Save <span class="sr-only">your document now</span></button>

Attributo hidden a confronto con CSS

L'attributo HTML hidden applica display: none tramite il foglio di stile dell'user agent del browser. È accessibile e semantico, ma può essere sovrascritto dalla specificità CSS.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden evita il rendering delle sezioni fuori dallo schermo, ma preserva il relativo albero di accessibilità e il layout. È una tecnica moderna per migliorare le prestazioni delle pagine lunghe.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Per mantenere visibile un elemento rendendolo non interattivo, utilizzi pointer-events: none. I clic e i passaggi del mouse attraversano l'elemento e raggiungono quelli sottostanti.

<div class="overlay">Clicks pass through this overlay</div>

Verifica rapida

Quale tecnica nasconde un elemento preservando lo spazio che occupa nel layout?

Riepilogo

display: none rimuove completamente un elemento dal layout. visibility: hidden lo nasconde preservando lo spazio. opacity: 0 lo nasconde, ma mantiene l'interattività. Per nascondere i contenuti in modo accessibile, utilizzi il pattern .sr-only. Combini visibility e opacity per creare transizioni con dissolvenza.

Domande Frequenti

La lezione «Visibility e display: none» è gratuita?

Sì — il testo completo di «Visibility e display: none» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Visibility e display: none»?

Imparate quando utilizzare visibility: hidden anziché display: none e come ciascuna proprietà influisce sul layout. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Visibility e display: none»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy