Proprietà CSS visibility
La proprietà CSS visibility definisce se un elemento è visibile o nascosto. Scopri esempi pratici e provali tu stesso.
La proprietà CSS visibility controlla se un elemento viene mostrato o nascosto senza modificare il layout — un elemento nascosto mantiene esattamente lo spazio che occuperebbe se fosse visibile. Questa pagina tratta i tre valori principali (visible, hidden, collapse), le differenze tra visibility e display e opacity, le implicazioni di accessibilità quando si nasconde un contenuto, e degli esempi eseguibili per ciascun valore.
Cosa fa visibility
Il valore più utilizzato è hidden. Quando si imposta visibility: hidden, l'elemento diventa invisibile ma continua a occupare il suo spazio nel layout — il contenuto circostante non si sposta per riempire il vuoto. L'elemento viene inoltre rimosso dall'ordine di tabulazione e non viene annunciato dagli screen reader, quindi è effettivamente nascosto anche dalla tecnologia assistiva, non solo visivamente.
Una caratteristica particolare: visibility è ereditata, ma un elemento figlio può sovrascriverla. Se un elemento padre ha visibility: hidden, un discendente con visibility: visible riapparirà anche se il suo antenato è nascosto.
Il valore collapse ha un comportamento speciale per gli elementi correlati alle tabelle (<tr>, <col>, gruppi di righe, gruppi di colonne). Su questi elementi, rimuove completamente la riga o la colonna — come farebbe display: none — in modo che il resto della tabella si ridisegni per colmare il vuoto, ma le larghezze delle colonne della tabella rimangono calcolate come se la riga fosse ancora presente. Sugli elementi non-tabella, collapse si comporta semplicemente come hidden.
Il supporto browser per collapse sugli elementi di tabella è inconsistente: alcuni motori di rendering lo trattano in modo identico a hidden (la riga mantiene lo spazio visivo). Se hai bisogno che una riga scompaia davvero su tutti i browser, utilizza display: none sull'elemento <tr>.
visibility vs. display vs. opacity
Queste tre proprietà "nascondono" tutte un elemento, ma si comportano in modo diverso — scegliere quella sbagliata è un errore comune.
| Proprietà | Mantiene lo spazio nel layout? | Presente nell'albero di accessibilità? | Riceve eventi? |
|---|---|---|---|
visibility: hidden | Sì | No | No |
display: none | No (collassa) | No | No |
opacity: 0 | Sì | Sì | Sì |
Usa visibility: hidden quando vuoi riservare lo spazio dell'elemento ma nasconderne il contenuto (ad esempio, alternare un segnaposto senza che la pagina salti). Usa display: none quando vuoi che l'elemento scompaia e che il layout si chiuda. Usa opacity: 0 solo quando vuoi un elemento ancora interattivo e ancora leggibile dagli screen reader — ad esempio, un elemento che stai facendo apparire o scomparire con una dissolvenza.
Poiché visibility è animabile, puoi combinarla con opacity per ottenere una dissolvenza in uscita che termina con un elemento completamente nascosto e non interattivo:
.fade {
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.fade.is-hidden {
opacity: 0;
visibility: hidden;
}| Valore iniziale | visible |
|---|---|
| Si applica a | Tutti gli elementi (collapse si applica solo agli elementi correlati alle tabelle). |
| Ereditata | Sì. |
| Animabile | Sì. |
| Versione | CSS2 |
| Sintassi DOM | Object.style.visibility = "collapse"; |
Sintassi
Sintassi della proprietà CSS visibility
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Esempio della proprietà visibility con il valore "hidden":
Esempio della proprietà CSS visibility con il valore hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Risultato
Esempio della proprietà visibility con i valori "visible" e "hidden":
Esempio della proprietà CSS visibility con i valori visible e hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Esempio della proprietà visibility con il valore "collapse":
Esempio della proprietà CSS visibility con il valore collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| visible | In questo caso il tag è visibile. Questo è il valore predefinito di questa proprietà. | Play it » |
| hidden | Questo valore nasconde gli elementi solo visivamente. | Play it » |
| collapse | Utilizzato con particolari elementi di tabella (righe, gruppi di righe, colonne, gruppi di colonne) per rimuovere intere righe o colonne. Questo valore ha lo stesso significato di "hidden" quando viene utilizzato con altri elementi. | Play it » |
| initial | Imposta la proprietà al suo valore predefinito. | Play it » |
| inherit | Eredita la proprietà dall'elemento padre. | |
| revert | Ripristina la proprietà al suo valore ereditato o iniziale, a seconda di ciò che è applicabile. | Play it » |
| revert-layer | Ripristina la proprietà al valore impostato nel livello precedente della cascata. | Play it » |
Proprietà correlate
- CSS
display— nasconde un elemento e rimuove il suo spazio dal layout. - CSS
opacity— rende un elemento trasparente mantenendolo interattivo. - CSS
overflow— controlla il contenuto che fuoriesce dal suo box. - CSS
position— sposta gli elementi fuori dal flusso normale.